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

Question

我是 Grunt.js 的新手。我一直在开发一个微型项目，旨在生成一个非常可移植且没有任何外部依赖项的 .html 文件。它将在 HTML 文档中包含 CSS 和 Javascript，但我希望使用外部 sass 和 js 文件来处理该项目，同时使用 grunt 任务通过每次更改来组装最终的 .html 文件。

因此，我正在“观察”所有 scss、js 和 html 文件更改。当任何文件发生更改时，我需要重建 html 文件(也使用grunt-includes)。从技术上来说，现在一切都正常。但似乎有些任务在重复。我无法准确地阅读这篇文章，所以我对以下内容感兴趣:

1. 有没有办法可以避免多次传递相同的任务？
2. 这是我第一次完成繁琐的任务集，据您所知，我的代码中是否有任何完全关闭/倒退的内容(很高兴根据需要提供更多信息)？

我的 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:我在文件匹配和任务运行方面不够具体。

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

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

到

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

毕竟，我在构建目录的顶层 .html 文件中只有 include "file.ext" block 。我一开始就太过分了。

接下来，我通过进一步更正确地指定文件匹配来完善其他任务。最后，我使用更具体的触发器更新了 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']);
};