我是 Grunt.js 的新手。我一直在开发一个微型项目，旨在生成一个非常可移植且没有任何外部依赖项的 .html 文件。它将在 HTML 文档中包含 CSS 和 Javascript，但我希望使用外部 sass 和 js 文件来处理该项目，同时使用 grunt 任务通过每次更改来组装最终的 .html 文件。
因此，我正在“观察”所有 scss、js 和 html 文件更改。当任何文件发生更改时，我需要重建 html 文件(也使用grunt-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','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...
感谢您的时间和帮助。
最佳答案
感谢@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']);
};
关于javascript - Grunt Watch 任务不必要地重复步骤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29590219/