Grunt:观察文件变化并编译父目录
Grunt: Watch file changes and compile parent directory
我正在使用 grunt 开发一个项目,我之前没有使用过 grunt,目前设置为监视文件,当文件被更改时重新编译所有文件(包含数百个文件的多个子目录) 在 html 中使用车把,这非常慢。我想通过只编译需要的东西来将其改进为更快的过程。
用 grunt newer 查看文件并没有真正起作用,因为目录中存在依赖关系,因此仅重新编译更改的文件不会产生有效页面。
我基本上需要重新编译已更改文件的整个父目录,但我不太确定我将如何配置类似的东西。
有什么我应该看的提示吗?
assemble本身是这样配置的:
var _ = require('lodash');
var path = require('path');
// expand the data files and loop over each filepath
var pages = _.flatten(_.map(grunt.file.expand('./src/**/*.json'), function(filepath) {
// read in the data file
var data = grunt.file.readJSON(filepath);
var dest=path.dirname(filepath)+ '/' +path.basename(filepath, path.extname(filepath));
dest=dest.replace("src/","");
var hbs;
if (data.hbs){
hbs=grunt.file.read(path.dirname(filepath)+ '/' + data.hbs)
}
// create a 'page' object to add to the 'pages' collection
return {
// the filename will determine how the page is named later
filename: dest,
// the data from the json file
data: data,
// add the recipe template as the page content
content:hbs
};
}));
return {
options: {
/*postprocess: require('pretty'),*/
marked: {sanitize: false},
data: '<%= options.src %>/**/*.json',
helpers: '<%= options.src %>/helpers/helper-*.js',
layoutdir: '<%= options.src %>/templates',
partials: ['<%= options.src %>/components/**/*.hbs']
},
build: {
options: {
layout: 'base.hbs',
assets: '<%= options.build %>',
pages: pages
},
files: [
{
cwd: '<%= options.src %>',
dest: '<%= options.build %>',
src: '!*'
}
]
},
}
所以每次加载时,所有页面都会像 /src/sites/abc/xyz/foo.json 一样被扫描下来并进行编译,但我只想更改文件。 Watch 确实检测到更改的文件,但所有文件都被再次编译,我不确定我如何才能让 watch 在配置中识别的更改文件只处理部分文件。
我想你需要的东西已经在手表里了。
检查 g运行t 文档中的 Using the watch event
复制这里的内容以满足SO MODS/GODS
.
当监视的文件被修改时,此任务将发出一个监视事件。如果您希望在编辑文件时收到简单的通知,或者如果您将此任务与其他任务结合使用,这将很有用。下面是一个使用 watch 事件的简单示例:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
},
},
});
grunt.event.on('watch', function(action, filepath, target) {
grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
});
watch 事件并非用于替换标准 G运行t API 用于配置和 运行ning 任务。如果您尝试 运行 从 watch 事件中执行任务,您很可能做错了。请阅读配置任务。
根据需要编译文件
一个很常见的要求是只编译需要的文件。这是一个仅使用 jshint 任务对更改的文件进行 lint 的示例:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
jshint: {
all: {
src: ['lib/*.js'],
},
},
});
// on watch events configure jshint:all to only run on changed file
grunt.event.on('watch', function(action, filepath) {
grunt.config('jshint.all.src', filepath);
});
如果您需要动态修改您的配置,必须禁用 spawn 选项以使手表 运行保持在相同的上下文中。
如果您同时保存多个文件,您可以选择更可靠的方法:
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
grunt.config('jshint.all.src', Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});
我正在使用 grunt 开发一个项目,我之前没有使用过 grunt,目前设置为监视文件,当文件被更改时重新编译所有文件(包含数百个文件的多个子目录) 在 html 中使用车把,这非常慢。我想通过只编译需要的东西来将其改进为更快的过程。
用 grunt newer 查看文件并没有真正起作用,因为目录中存在依赖关系,因此仅重新编译更改的文件不会产生有效页面。
我基本上需要重新编译已更改文件的整个父目录,但我不太确定我将如何配置类似的东西。
有什么我应该看的提示吗?
assemble本身是这样配置的:
var _ = require('lodash');
var path = require('path');
// expand the data files and loop over each filepath
var pages = _.flatten(_.map(grunt.file.expand('./src/**/*.json'), function(filepath) {
// read in the data file
var data = grunt.file.readJSON(filepath);
var dest=path.dirname(filepath)+ '/' +path.basename(filepath, path.extname(filepath));
dest=dest.replace("src/","");
var hbs;
if (data.hbs){
hbs=grunt.file.read(path.dirname(filepath)+ '/' + data.hbs)
}
// create a 'page' object to add to the 'pages' collection
return {
// the filename will determine how the page is named later
filename: dest,
// the data from the json file
data: data,
// add the recipe template as the page content
content:hbs
};
}));
return {
options: {
/*postprocess: require('pretty'),*/
marked: {sanitize: false},
data: '<%= options.src %>/**/*.json',
helpers: '<%= options.src %>/helpers/helper-*.js',
layoutdir: '<%= options.src %>/templates',
partials: ['<%= options.src %>/components/**/*.hbs']
},
build: {
options: {
layout: 'base.hbs',
assets: '<%= options.build %>',
pages: pages
},
files: [
{
cwd: '<%= options.src %>',
dest: '<%= options.build %>',
src: '!*'
}
]
},
}
所以每次加载时,所有页面都会像 /src/sites/abc/xyz/foo.json 一样被扫描下来并进行编译,但我只想更改文件。 Watch 确实检测到更改的文件,但所有文件都被再次编译,我不确定我如何才能让 watch 在配置中识别的更改文件只处理部分文件。
我想你需要的东西已经在手表里了。
检查 g运行t 文档中的 Using the watch event
复制这里的内容以满足SO MODS/GODS
.
当监视的文件被修改时,此任务将发出一个监视事件。如果您希望在编辑文件时收到简单的通知,或者如果您将此任务与其他任务结合使用,这将很有用。下面是一个使用 watch 事件的简单示例:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
},
},
});
grunt.event.on('watch', function(action, filepath, target) {
grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
});
watch 事件并非用于替换标准 G运行t API 用于配置和 运行ning 任务。如果您尝试 运行 从 watch 事件中执行任务,您很可能做错了。请阅读配置任务。
根据需要编译文件
一个很常见的要求是只编译需要的文件。这是一个仅使用 jshint 任务对更改的文件进行 lint 的示例:
grunt.initConfig({
watch: {
scripts: {
files: ['lib/*.js'],
tasks: ['jshint'],
options: {
spawn: false,
},
},
},
jshint: {
all: {
src: ['lib/*.js'],
},
},
});
// on watch events configure jshint:all to only run on changed file
grunt.event.on('watch', function(action, filepath) {
grunt.config('jshint.all.src', filepath);
});
如果您需要动态修改您的配置,必须禁用 spawn 选项以使手表 运行保持在相同的上下文中。
如果您同时保存多个文件,您可以选择更可靠的方法:
var changedFiles = Object.create(null);
var onChange = grunt.util._.debounce(function() {
grunt.config('jshint.all.src', Object.keys(changedFiles));
changedFiles = Object.create(null);
}, 200);
grunt.event.on('watch', function(action, filepath) {
changedFiles[filepath] = action;
onChange();
});