require-dir插件主要是将多个任务分离到多个文件中。例如当我们用gulpfile.js单文件编写任务时,会造成文件过于繁杂。此时我们可以用require-dir插件将不同的任务,分离到不同的文件中,进而实现按模块编写任务。
安装插件
npm install require-dir --save dev
文件结构
package.json
gulpfile.js
gulp
+ task
++ build.js
++ html.js
++ css.js
如何使用
gulpfile.js内容为:
var requireDir = require('require-dir');
requireDir('./gulp/task');
不同功能模块的具体任务分别编写在gulp/task目录下的不同JS文件中,其中必须有一个任务名为default,作为任务的入口 。
gulp会根据requireDir提供的路径自动加载该目录下所有文件,并找到default任务开始执行。
requireDir(’./gulp/task’)其实会返回如下内容:
{
build:require('./gulp/task/build.js'),
build:require('./gulp/task/html.js'),
build:require('./gulp/task/css.js')
}
我们还可以添加扩展选项
1、recurse
var dir = requireDir('./gulp/task', { recurse: true });
recurse:是否递归子目录,默认为false
2、noCache
var dir = requireDir('./gulp/task', { noCache: true });
防止文件缓存。使用gulp.watch或其他需要刷新文件内容的监视可能很有用,默认值为false。
3、filter
filter:筛选文件名应用
//忽略生产环境中以dev为前缀的文件
requireDir('./gulp/task', {
filter: function (fullPath) {
return process.env.NODE_ENV !== 'production' && !fullPath.match(/$dev/);
}
})
4、mapKey
mapKey,请求后转换模块名
requireDir('./gulp/task', {
mapKey: function (value, baseName) {
return baseName.toUpperCase();
}
})
5、mapValue
请求后,转换值类型
requireDir('./gulp/task', {
mapValue: function (value, baseName) {
return typeof value === 'string' ? value.toUpperCase() : value;
}
})