gruntjs - 让 karma 服务器在 grunt watch 上启动

Question

在开发过程中，我使用 karma 和 grunt 来监视文件更改并运行测试。

在命令行中，我希望能够简单地输入

$ grunt watch

并让 karma 服务器启动一次，然后在文件更改时用 grunt 监视更改并运行各种任务(包括 karma 测试)。我不想输入 $ karma start 。

如何实现？

Answer 1

选项#1

可以使用 grunt-contrib-watch 的 atBegin 选项。思路是引入一个启动任务，在watcher启动时运行:

watch: {
    startup: {
        files: [], // This is redundant, but we get an error if not specifying files.
        tasks: [ 'karma:continuous:start' ],
        options: {
            atBegin: true,
            spawn: false
        }
    },

    ...
}

完整的 Gruntfile.js:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        karma: {
            options: {
                files:      [ 'client/**/*.spec.js' ],
                frameworks: [ 'jasmine'   ],
                reporters:  [ 'progress'  ],
                browsers:   [ 'PhantomJS' ],
                singleRun:  true,
                autoWatch:  false
            },
            continuous: {
                singleRun:  false,
                background: true
            }
        },

        concat: { ... },

        uglify: { ... },

        watch: {
            startup: {
                files: [], // This is redundant, but we get an error if not specifying files.
                tasks: [ 'karma:continuous:start' ],
                options: {
                    atBegin: true,
                    spawn: false
                }
            },

            js: {
                files: [ '<%= concat.js.src %>' ],
                tasks: [ 'concat:js', 'uglify' ]
            },

            karma: {
                files: [ '<%= concat.js.src %>', 'src/**/test/**/*.js' ],
                tasks: [ 'karma:continuous:run' ]
            },

        }
    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask( 'default', [ 'concat', 'uglify', 'karma:unit:run' ] );
};

选项#2

如图this和 this博客，替代方法是调用

$ grunt watch

创建另一个启动 karma 服务器的任务:

grunt.registerTask( 'serve', [ 'karma:continuous:start', 'watch' ] );

然后调用:

$ grunt serve

完整的 Gruntfile.js:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        karma: {
            options: {
                configFile: 'karma.conf.js'
            },
            unit: {
                singleRun: true
            },
            continuous: {
                // keep karma running in the background
                background: true
            }
        },

        concat: { ... },

        uglify: { ... },

        watch: {   
            js: {
                files: [ '<%= concat.js.src %>' ],
                tasks: [ 'concat:js', 'uglify' ]
            },

            karma: {
                files: [ '<%= concat.js.src %>', 'src/**/test/**/*.js' ],
                tasks: [ 'karma:continuous:run' ]
            },

        }
    });

    require('load-grunt-tasks')(grunt);

    grunt.registerTask( 'default', [ 'concat', 'uglify', 'karma:unit:run' ] );

    grunt.registerTask( 'serve', [ 'karma:continuous:start', 'watch' ] );
};