如何在不刷新整个页面的情况下,使Grunt/Watch/LiveReload重新加载Sass/CSS?
如何在不刷新整个页面的情况下,使Grunt/Watch/LiveReload重新加载Sass/CSS?
到目前为止,我已经将所有的东西都按照我的要求工作起来了(即监控我想要的所有文件,并在有变化时进行刷新),除了我希望能够修改Sass/CSS并在浏览器中进行刷新,而不需要重新加载页面。这不是什么大问题,但有时候在页面交互后,我想修改某个元素的样式,如果页面刷新,我就必须重新进行整个过程。
我相当确定这是可能的,但目前我还没有找到方法。
这是我的Gruntfile.js文件:
module.exports = function(grunt) {
// 项目配置。
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {},
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/main.css': 'css/scss/main.scss',
}
}
},
jshint: {
files: ['js/*.js'],
},
watch: {
options: {
livereload: true,
},
html: {
files: ['index.html'],
},
js: {
files: ['js/**/*.js'],
tasks: ['jshint'],
},
css: {
files: ['css/scss/**/*.scss'],
tasks: ['sass'],
},
}
});
// 实际运行任务。
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
// 默认任务。
grunt.registerTask('default', ['connect', 'watch']);
};
关于我的配置,我想提到一个奇怪的事情:当我运行grunt watch --verbose时,我看到它也在监控.git和.sass-cache。这是正常的吗?我不知道我做了什么导致它这样。