我正在使用 Grunt 来编译我的带有指南针的 CSS 并触发浏览器 livereload。这些是我的 watch 任务:
watch: {
styles: {
options: {
spawn: false,
},
files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
tasks: [
'concat:styles',
'compass:styles',
'imagemin:styles',
'cssmin:styles',
'clean:styles',
],
},
scripts: {
options: {
spawn: false,
},
files: [assetsDir + '/**/*.js', '!**/*.{dev,min}.js'],
tasks: [
'concat:scripts',
'uglify:scripts',
],
},
livereload: {
options: {
livereload: true,
spawn: false,
},
files: [assetsDir + '/**/*.{dev,min}.{css,js}'],
},
},
目前,在样式任务完全完成之前,livereload 任务不会触发,但是 imagemin 可能会增加一些明显的延迟,我真正关心的是 CSS,它在 compass 完成后立即准备就绪。
如何让 livereload 在罗盘完成后立即触发,但允许其他任务继续进行?我尝试了下面的配置,它在 CSS 更改时触发 imagemin,但它似乎不起作用。由于某种原因,使用此 imagemin 根本不会触发。不能让多个任务看同一个文件吗?
watch: {
styles: {
options: {
spawn: false,
},
files: [assetsDir + '/**/*.scss', '!**/*.{dev,min}.scss'],
tasks: [
'concat:styles',
'compass:styles',
'cssmin:styles',
'clean:styles',
],
},
scripts: {
options: {
spawn: false,
},
files: [assetsDir + '/**/*.js', '!**/*.{dev,min}.js'],
tasks: [
'concat:scripts',
'uglify:scripts',
],
},
images: {
options: {
spawn: false,
},
files: [assetsDir + '/**/*.{dev,min}.css'],
tasks: [
'imagemin:styles',
],
},
livereload: {
options: {
livereload: true,
spawn: false,
},
files: [assetsDir + '/**/*.{dev,min}.{css,js}'],
},
},
谢谢。
最佳答案
我已经通过使用 grunt-concurrent 成功实现了这个功能并行运行三个 watch 任务:
concurrent: {
options: {
logConcurrentOutput: true,
},
watch: [
'watch:scripts',
'watch:styles',
'watch:livereload',
],
},
关于node.js - Grunt.js : Fire livereload as soon a files are modified, 任务完成前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18186455/