0

直到最近，我一直在成功地使用与此类似的 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);
    });
};

当前依赖项：

"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"
4

2 回答 2

0

将 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']);
于 2015-10-07T06:46:56.323 回答
0

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

  1. 你修改一个js源文件
  2. watch 检测到您的修改并启动 concat
  3. concat 生成 output.js
  4. watch 检测到 output.js 并启动 concat
  5. 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']
  },
}
于 2015-10-05T09:42:52.800 回答