Grunt Watch 任务不必要地重复步骤

Question

我是 Grunt.js 的新手。我一直在从事一个微型项目，该项目旨在生成一个单一的 .html 文件，该文件非常便携，没有任何外部依赖性。它将在 HTML 文档中包含 CSS 和 Javascript，但我想在使用 grunt 任务 [=40] 时使用外部 sass 和 js 文件处理该项目=] 每次更改的最终 .html 文件。

因此，我 "watching" 所有 scss、js 和 html 文件更改。当任何文件更改时，我需要重建 html 文件（也使用 grunt-includes）。从技术上讲，现在一切正常。但似乎有些任务在重复。我无法准确阅读这篇文章，所以我对以下内容感兴趣：

有什么方法可以避免多次通过相同的任务？
这是我第一次通过 grunt 任务集，据您所知，我的代码中是否有任何完全偏离/倒退的地方（很乐意根据需要提供更多信息）？

我的grunt.js文件内容：

    module.exports = function(grunt) {
    "use strict";
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        includes: {
            files: {
                src: ['build/*.html','build/*.css','build/*.js'],
                dest: './',
                flatten: true,
                cwd: '.',
                options: {
                    silent: true,
                    includePath: 'build/includes'
                }
            }
        },
        concat: {
            fields: {
                src: ['build/fieldTypes/*.html'],
                dest: 'build/includes/fieldTypes.inc.html',
                options: {
                    separator: '\n\n\t<hr/>\n\n\n'
                }
            },
            js: {
                src: ['build/js/ga.js', 'build/js/core.js'],
                dest: 'build/includes/scripts.inc.js',
                options: {
                    separator: '\n\n'
                }
            },
        },
        sass: {
            options: {
                style: 'compressed',
                sourcemap: 'none'
            },
            dist: {
                files: [{
                    expand: true,
                    flatten: true,
                    src: 'build/sass/styles.scss',
                    dest: 'build/includes/',
                    ext: '.inc.css'
                }]
            }
        },
        watch: {
            css: {
                files: 'build/**/*.scss',
                tasks: ['sass', 'includes']
            },
            js: {
                files: 'build/**/*.js',
                tasks: ['concat', 'includes']
            },
            html: {
                files: 'build/**/*.html',
                tasks: ['concat','includes']
            }
        }
    });

    grunt.registerTask('default',['watch']);
};

修改后的日志：

Running "watch" task
Waiting...
>> File "build/fieldTypes/Dropdown.html" changed.
Running "concat:fields" (concat) task
File "build/includes/fieldTypes.inc.html" created.

Running "concat:js" (concat) task
File "build/includes/scripts.inc.js" created.

Running "includes:files" (includes) task

Done, without errors.
Completed in 0.631s at Sun Apr 12 2015 09:54:20 GMT-0400 (EDT) - Waiting...
>> File "build/includes/fieldTypes.inc.html" changed.
>> File "build/includes/scripts.inc.js" changed.
Running "concat:fields" (concat) task
File "build/includes/fieldTypes.inc.html" created.

Running "concat:js" (concat) task
File "build/includes/scripts.inc.js" created.

Running "includes:files" (includes) task

Done, without errors.
Running "concat:fields" (concat) task
File "build/includes/fieldTypes.inc.html" created.

Running "concat:js" (concat) task
File "build/includes/scripts.inc.js" created.

Running "includes:files" (includes) task

Done, without errors.
Completed in 2.022s at Sun Apr 12 2015 09:54:22 GMT-0400 (EDT) - Waiting...
>> File "build/includes/fieldTypes.inc.html" changed.
>> File "build/includes/scripts.inc.js" changed.
Running "concat:fields" (concat) task
File "build/includes/fieldTypes.inc.html" created.

Running "concat:js" (concat) task
File "build/includes/scripts.inc.js" created.

Running "includes:files" (includes) task

Done, without errors.
Running "concat:fields" (concat) task
File "build/includes/fieldTypes.inc.html" created.

Running "concat:js" (concat) task
File "build/includes/scripts.inc.js" created.

Running "includes:files" (includes) task

Done, without errors.
Completed in 2.111s at Sun Apr 12 2015 09:54:24 GMT-0400 (EDT) - Waiting...

非常感谢您抽出宝贵的时间和协助。

Answer 1

感谢@rosshamish，我找到了解决方案。我看文件的方式不对：太全局了，任务不够具体运行。我修改后的 grunt.js 文件将我的观看限制为更少的文件，并且在特定更改后仅运行必要的任务。

tl;dr：我在文件匹配和任务运行ning 方面不够具体。

部分问题是我正在查看整个 build 目录中的所有 html、css 和 js 文件，而不仅仅是我需要查看的主要文件。我的第一个更改如下：

includes: {
    files: {
        src: ['build/*.html','build/*.css','build/*.js'],

到

includes: {
    files: {
        src: ['build/*.html'],

毕竟，我在构建目录的顶级 .html 文件中只有 include "file.ext" 个块。一开始我有点过分了。

接下来我通过进一步指定更正确的文件匹配来完善其他任务。最后，我用更具体的触发器更新了 watch 任务。

原文watch如下：

watch: {
    css: {
        files: 'build/**/*.scss',
        tasks: ['sass', 'includes']
    },
    js: {
        files: 'build/**/*.js',
        tasks: ['concat', 'includes']
    },
    html: {
        files: 'build/**/*.html',
        tasks: ['concat','includes']
    }
}

我将其更新为：

watch: {
    css: {
        files: 'build/sass/*.scss',
        tasks: ['sass', 'includes']
    },
    js: {
        files: 'build/js/*.js',
        tasks: ['concat:js', 'includes']
    },
    fieldTypes: {
        files: 'build/fieldTypes/*.html',
        tasks: ['concat:fields', 'includes']
    },
    core: {
        files: 'build/*.html',
        tasks: ['concat','includes']
    }
}

最终的grunt.js文件内容为：

module.exports = function(grunt) {
    "use strict";
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        includes: {
            files: {
                src: ['build/*.html'],
                dest: './',
                flatten: true,
                cwd: '.',
                options: {
                    silent: true,
                    includePath: 'build/includes'
                }
            }
        },
        concat: {
            fields: {
                src: ['build/fieldTypes/*.html'],
                dest: 'build/includes/fieldTypes.inc.html',
                options: {
                    separator: '\n\n\t<hr/>\n\n\n'
                }
            },
            js: {
                src: ['build/js/ga.js', 'build/js/core.js'],
                dest: 'build/includes/scripts.inc.js',
                options: {
                    separator: '\n\n'
                }
            },
        },
        sass: {
            options: {
                style: 'compressed',
                sourcemap: 'none'
            },
            dist: {
                files: [{
                    expand: true,
                    flatten: true,
                    src: 'build/sass/styles.scss',
                    dest: 'build/includes/',
                    ext: '.inc.css'
                }]
            }
        },
        watch: {
            css: {
                files: 'build/sass/*.scss',
                tasks: ['sass', 'includes']
            },
            js: {
                files: 'build/js/*.js',
                tasks: ['concat:js', 'includes']
            },
            fieldTypes: {
                files: 'build/fieldTypes/*.html',
                tasks: ['concat:fields', 'includes']
            },
            core: {
                files: 'build/*.html',
                tasks: ['concat','includes']
            }
        }
    });

    grunt.registerTask('default',['watch']);
};

Grunt Watch 任务不必要地重复步骤

Grunt Watch task repeating steps unnecessarily

javascript

gruntjs

grunt-contrib-watch