Grunt.js：在任务完成之前尽快修改文件以激活livereload [英] Grunt.js: Fire livereload as soon a files are modified, before task completes

问题描述

我使用Grunt用罗盘编译我的CSS并触发浏览器livereload。这些是我的手表任务：

I'm using Grunt to compile my CSS with compass and trigger the browser livereload. These are my watch tasks:

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就会立即准备好。

At the moment the livereload task doesn't trigger until the styles task has fully completed, however imagemin can add some significant delay, and all I really care about is the CSS, which is ready as soon as compass has finished.

如何让livereload一旦指南针完成就触发，但允许其他任务继续？我尝试了下面的配置，它会在CSS更改时触发imagemin，但它似乎不起作用。有了这个imagemin由于某种原因根本不会触发。你能看到相同的文件没有多个任务？

How can I get livereload to trigger as soon as compass has completed, but allow the other tasks to continue on? I tried the configuration below, which triggers imagemin when the CSS changes, however it doesn't seem to work. With this imagemin doesn't trigger at all for some reason. Can you not have multiple tasks watching the same files?

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 同时运行三个监视任务：

I've managed to get this working by using grunt-concurrent to run the three watch tasks in parallel:

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

这篇关于Grunt.js：在任务完成之前尽快修改文件以激活livereload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！