javascript 如何让 Grunt/Watch/LiveReload 重新加载 Sass/CSS 而无需刷新整个页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19005847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?
提问by Trey Piepmeier
So far, I've gotten everything working how I want (which is monitoring all the files I want and refreshing whenever there is a change), other than I'd love to be able to make modifications to Sass/CSS and have it refresh in the browser without a page load. It's not a huge deal, but sometimes I'm trying to modify the style of something after there's been some page interaction and I have to go through the process all over again if the page refreshes.
到目前为止，除了我希望能够对 Sass/CSS 进行修改并刷新之外，我已经让一切都按照我想要的方式工作（监控我想要的所有文件并在发生更改时刷新）在没有页面加载的浏览器中。这没什么大不了的，但有时我会在进行了一些页面交互后尝试修改某些内容的样式，如果页面刷新，我必须重新完成整个过程。
I'm fairly certain this is possible, but it eludes me so far.
我相当肯定这是可能的，但到目前为止我还没有做到。
Here's my Gruntfile.js:
这是我的Gruntfile.js：
module.exports = function(grunt) {
// Project configuration.
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'],
},
}
});
// Actually running things.
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Default task(s).
grunt.registerTask('default', ['connect', 'watch']);
};
One odd thing I wanted to mention about my setup: when I run grunt watch --verboseI see that it's monitoring .gitas well as .sass-cache. Does that seem right? I don't know what I did to make it do that.
关于我的设置，我想提及一件奇怪的事情：当我运行时，grunt watch --verbose我看到它正在监控.git以及.sass-cache. 这看起来对吗？我不知道我做了什么让它这样做。
Watching .git for changes.
Watching .sass-cache for changes.
回答by Ben
The first part of your question is straightforward enough. Live reload only reloads the files you specify in the configuration; i.e if you specify sass files it is those that are reloaded. I fixed this in my setup by having Grunt watch the css file in my dist directory, which obviously gets changed every time the Sass is recompiled.
你问题的第一部分很简单。Live reload只重新加载您在配置中指定的文件；即，如果您指定 sass 文件，则是重新加载的文件。我通过让 Grunt 观察我的 dist 目录中的 css 文件在我的设置中修复了这个问题，这显然在每次重新编译 Sass 时都会改变。
watch: {
options: {
livereload: true,
},
html: {
files: ['index.html'],
},
js: {
files: ['js/**/*.js'],
tasks: ['jshint'],
},
sass: {
options: {
livereload: false
},
files: ['css/scss/**/*.scss'],
tasks: ['sass'],
},
css: {
files: ['dist/css/master.css'],
tasks: []
}
}
I'm not sure about the second question. It doesn't show those directories in my grunt watch --verbosefor any project, then again I never run that command verbosely.
我不确定第二个问题。它不会在我grunt watch --verbose的任何项目中显示这些目录，然后我再一次从不冗长地运行该命令。
