Grunt.js: Fire livereload as soon a files are modified, before task completes

Question

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}'],
    },
},  

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.

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}'],
    },
},

Thanks.

Answer 1

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',
    ],
},