如何在不刷新整个页面的情况下,使Grunt/Watch/LiveReload重新加载Sass/CSS?

19 浏览
0 Comments

如何在不刷新整个页面的情况下,使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。这是正常的吗?我不知道我做了什么导致它这样。

0