Grunt.js：在文件被修改后立即触发 livereload，在任务完成之前答案

【问题标题】：Grunt.js: Fire livereload as soon a files are modified, before task completesGrunt.js：在文件被修改后立即触发 livereload，在任务完成之前
【发布时间】：2013-08-13 17:35:28
【问题描述】：

我正在使用 Grunt 用 compass 编译我的 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，它在 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}'],
    },
},

谢谢。

【问题讨论】：

标签： node.js gruntjs livereload grunt-contrib-watch

【解决方案1】：

我已经设法通过使用grunt-concurrent 并行运行三个监视任务来完成这项工作：

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

【讨论】：

你是如何做到这一点的？我得到了Fatal error: Port 35729 is already in use by another process.，因为多个观察者并行运行（如果我更改 som 样式和一些脚本并点击«保存»）。