Grunt.js:在任务完成之前,一旦文件被修改,就立即进行Firererere

Question

我正在使用Grunt用罗盘编译我的CSS并触发浏览器livereload.这些是我的观察任务:

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,只要指南针完成就可以使用了.

如何在指南针完成后立即触发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}'],
    },
},

谢谢.

Answer 1

我已经设法通过使用grunt-concurrent来并行运行三个监视任务来实现这个目的:

concurrent: {
    options: {
        logConcurrentOutput: true,
    },
    watch: [
        'watch:scripts',
        'watch:styles',
        'watch:livereload',
    ],
},