如何让 grunt 服务任务与手表一起工作？答案

【问题标题】：How to get grunt serve task working alongside watch?如何让 grunt 服务任务与手表一起工作？
【发布时间】：2017-02-19 04:24:00
【问题描述】：

我最近安装并运行了它，但我似乎无法让它与我的监视任务同时运行？在我的 grunt 文件中，如果在 watch 之前注册 serve 任务，服务器会启动，但 watch 任务不会......反之亦然。这是服务包，我正在使用和附加的 Grunt 文件：

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'
            ]
    );

};

【问题讨论】：

标签： server gruntjs

【解决方案1】：

Grunt serve 和 grunt watch 都是阻塞任务。您可以使用像 grunt-concurrent 这样的插件在不同的线程中同时运行两者。 https://github.com/sindresorhus/grunt-concurrent

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

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

此外，您还可以使用 grunt-concurrent 并行运行 uglify 和 sass 任务，这可能会缩短构建时间。

【讨论】：