Gruntjs 使用新版autoprefixer循环grunt watch

直到最近，我一直在成功地使用与此类似的gruntfile。然而，在我最新的项目中，grunt watch不断循环——有时循环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);
    });
};

您的问题是concat将其文件生成到您的js_path目录中，而watch将监视该目录中的所有js文件。因此发生的情况是：

修改js源文件 watch检测您的修改并启动concat concat生成output.js watch检测output.js并启动concat 3然后4重复-直到您通过手表缓冲保存，以防止顺序触发过快 要解决这个问题，您必须从观察列表中删除concat输出。 我建议将concat输出到源代码之外的构建目录中——最好的做法是将构建构件与源代码元素分开。定义一个build_path config变量并在您的concat目标中使用它。 如果出于合理的原因确实无法执行此操作，请使用否定指令手动从手表中删除output.js：

---

将POSTSS移动到一个单独的任务已经为我解决了这个问题

以下是对GrunFile的更改：

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

---

谢谢你的意见。这个问题是在更新AutoRefixer后才开始出现的，因此它似乎与此直接相关。不过，我尝试了您的建议，从监视任务中删除output.js，但没有任何帮助。我已经成功地将POSTSS转移到一个单独的构建任务。

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

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