Question

我是Grunt.js的新手。我一直致力于一个微型项目，旨在生成一个非常便携的.html文件，没有任何外部依赖。它将在HTML文档中包含CSS和Javascript，但我希望使用外部sass和js文件处理项目，同时使用grunt任务组合每次更改的最终.html文件。

因此，我正在“观察”所有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：我在文件匹配和任务运行方面不够具体。

部分问题是我在整个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任务不必要地重复步骤

1 个答案: