![](/img/trans.png)
[英]How do I get grunt to watch and livereload with just one command - Gruntjs
[英]How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?
到目前为止,我已经完成了我想要的一切(这是监视我想要的所有文件并在有变化时刷新),除了我希望能够对Sass / CSS进行修改并让它刷新在没有页面加载的浏览器中。 这不是什么大不了的事,但有时我会尝试修改某些页面交互之后的某些内容,如果页面刷新,我必须重新完成整个过程。
我相当确定这是可能的,但到目前为止我还没有。
这是我的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']);
};
有一件奇怪的事我想提一下我的设置:当我运行grunt watch --verbose
我看到它正在监视.git
以及.sass-cache
。 那似乎对吗? 我不知道我做了什么才能做到这一点。
Watching .git for changes.
Watching .sass-cache for changes.
你问题的第一部分很简单。 实时重新加载仅重新加载您在配置中指定的文件 ; 即如果您指定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: []
}
}
我不确定第二个问题。 它没有在我的grunt watch --verbose
显示那些目录 - 对于任何项目都是grunt watch --verbose
,然后我再也没有详细地运行该命令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.