Question

直到最近，我一直在使用类似的gruntfile成功。然而，在我的最新项目中，grunt手表不断循环 - 有时4次，有时是15次左右停止 - 我无法弄清楚如何更改gruntfile以使其再次正常工作。

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Define our source and build folders
        js_path: 'public_html/js',
        img_path: 'public_html/img',
        css_path: 'public_html/css',
        imagemin: {
            dynamic: {
                files: [{
                        expand: true,
                        cwd: '<%= img_path %>/',
                        src: ['*.{png,jpg,gif}'],
                        dest: '<%= img_path %>/'
                    }]
            }
        },
        concat: {
            dist: {
                src: [
                    '<%= js_path %>/jquery-ui.js',
                    '<%= js_path %>/plugin_royal_slider.js',
                    '<%= js_path %>/plugins.js',
                    '<%= js_path %>/plugin_selectboxit.js',
                    '<%= js_path %>/plugin_picturefill.js',
                    '<%= js_path %>/plugin_jquery_placeholder.js',
                    '<%= js_path %>/plugin_pickadate.js',
                    '<%= js_path %>/script.js'
                ],
                dest: '<%= js_path %>/output.js',
                nonull: true
            }

        },
        jshint: {
            beforeconcat: [
                '<%= js_path %>/jquery-ui.js',
                '<%= js_path %>/plugin_royal_slider.js',
                '<%= js_path %>/plugins.js',
                '<%= js_path %>/plugin_selectboxit.js',
                '<%= js_path %>/plugin_picturefill.js',
                '<%= js_path %>/plugin_jquery_placeholder.js',
                '<%= js_path %>/plugin_pickadate.js',
                '<%= js_path %>/script.js'],
            afterconcat: ['<%= js_path %>/output.js'
            ],
            options: {
                sub: true,
                "-W004": true,
                "-W041": true,
                "-W093": true,
                "-W032": true,
                "-W099": true,
                "-W033": true,
                "-W030": true,
                ignores: ['<%= js_path %>/jquery-ui.js']
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy H:M:s") %> */\n',
                mangle: true,
                compress: {drop_console: true} // true supresses console.log output: https://github.com/gruntjs/grunt-contrib-uglify#turn-off-console-warnings
            },
            dist: {
                files: {
                    '<%= js_path %>/js.min.js': ['<%= js_path %>/output.js'] 
                }
            }
        },
        postcss: {
            options: {
                map: true,
                processors: [
                    require('autoprefixer')({browsers: 'last 2 versions'}),
                    require('csswring')
                ]
            },
            dist: {
                src: '<%= css_path %>/*.css'
            }
        },
        watch: {
            options: {nospawn: true},
            scripts: {
                files: ['<%= js_path %>/*.js'],
                tasks: ['build']
            },
            css: {
                files: ['<%= css_path %>/*.css'],
                tasks: ['build']
            },
            grunt: {
                files: ['Gruntfile.js']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.registerTask('build', ['jshint', 'concat', 'uglify', 'postcss']); // run manually with grunt build or run grunt watch - ctrl c to exit
    grunt.registerTask('optimg', ['imagemin']); // run with grunt optimg
    grunt.event.on('watch', function (action, filepath) {
        grunt.log.writeln(filepath + ' has ' + action);
    });
};

当前依赖关系：

"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-imagemin": "~0.9.4",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-uglify": "~0.9.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-postcss": "~0.6.0",
"csswring": "~4.0.0",
"autoprefixer-core": "~6.0.1",
"autoprefixer": "~6.0.3"

Answer 1

您的问题是concat将其文件生成到您的js_path目录中，并监视监视该目录中的所有js文件。那么会发生什么：

修改js源文件
watch会检测您的修改并启动concat
concat生成output.js
watch检测output.js并启动concat
3然后重复4次 - 直到你通过手表缓冲保存（这可以防止按顺序触发太快）

要解决此问题，您必须从监视列表中删除concat输出。我建议将concat输出到源外的构建目录 - 无论如何，将构建工件与源元素分开是最佳实践。定义build_path配置变量并在concat目标中使用它。如果您确实无法做到这一点，请使用否定指令（http://gruntjs.com/configuring-tasks#globbing-patterns）从手表中手动删除output.js：

watch: {
  scripts: {
    files: ['<%= js_path %>/*.js', '!<%= js_path %>/output.js'],
    tasks: ['build']
  },
}

Answer 2

将postcss移动到一个单独的任务已经解决了我的问题。

以下是对gruntfile的更改：

watch: {
    options: {nospawn: true},
    scripts: {
        files: ['<%= js_path %>/*.js'],
        tasks: ['build_js']
    },
    css: {
        files: ['<%= css_path %>/*.css'],
        tasks: ['build:css']
    },
    grunt: {
        files: ['Gruntfile.js']
    }

和

grunt.registerTask('build_js', ['jshint', 'concat', 'uglify']);
grunt.registerTask('build_css', ['postcss:dist']);

使用新版autoprefixer循环grunt-watch

2 个答案: