How to get grunt serve task working alongside watch?

问题

I've recently installed and got a it up and running but I can't seem to get it running concurrently with my watch task? In my grunt file, if register the serve task before watch, the server spins up and but the watch task doesn't....and vice versa. This is the serve package and Im using and Grunt file attached:

https://www.npmjs.com/package/grunt-serve

module.exports = function(grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {   
            dist: {
                src: [
                    'js/libs/*.js', // All JS in the libs folder
                    'js/global.js'  // This specific file
                ],
                dest: 'js/build/production.js',
            }
        },

        uglify: {
            options: {
              mangle: false
            },
            my_target: {
              files: {
                'js/build/production.min.js': ['js/build/production.js']
              }
            }
          },

        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'images/build/'
                }]
            }
        },

        sass: {
            //options: {  
            //    style: 'compressed'
            //},
            dist: {
              files: [{
                expand: true,
                cwd: 'css',
                src: ['*.scss'],
                dest: 'css/build/',
                ext: '.css'
              }]
            }
          },

        serve: {
            options: {
                port: 9000
            }
        },

        watch: {
            options: {
                livereload: true,
            },              
            css: {
                files: ['css/**/*.scss'],
                tasks: ['sass'],
                options: {
                    spawn: false,
                }
            },            
            scripts: {
                files: ['js/*.js'],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false,
                },
            } 
        }



    });

    // Load all Grunt tasks automatically wihtout having to enter manaually
    require('load-grunt-tasks')(grunt);

    grunt.registerTask(
        'default',
            [
                'concat', 
                'uglify', 
                'sass', 
                'serve',
                'watch'
            ]
    );

};

回答1:

Grunt serve and grunt watch are both blocking tasks. You can use a plugin like grunt-concurrent to run both at the same time in separate threads. https://github.com/sindresorhus/grunt-concurrent

concurrent: {
    target1: ['serve', 'watch'],
}

//aslo update your default task
grunt.registerTask(
    'default',
        [
            'concat', 
            'uglify', 
            'sass', 
            'concurrent:target1'
        ]
);

Additionally you could also use grunt-concurrent to run your uglify and sass tasks in parallel which may improve build time.

来源：https://stackoverflow.com/questions/42307936/how-to-get-grunt-serve-task-working-alongside-watch