gulp常用插件之gulp-filter使用
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-filter这是一款可以把stream里的文件根据一定的规则进行筛选过滤。
安装
一键安装不多解释
npm install --save-dev gulp-filter
使用
gulp.src
中传入匹配符匹配了很多文件,可以把这些文件pipe
给gulp-filter
做二次筛选。如:gulp.src('**/*.js').pipe($.filter(**/a/*.js))
,本来选中了所有子文件下的js文件,经过筛选后变成名为a的子文件夹下的js文件。那有人要问了,为什么不直接将需要的筛选传入gulp.src
,干嘛要多筛选一步呢?这里面有两种情况:
gulp.src
与$.filter
中间可能需要别的处理,比如我对所有文件做了操作1
以后,还需要筛选出一部分做操作2
。- 第二种情况就要谈到
gulp-filter
的另外一个特性:筛选之后还可以restore
回去。比如我对所有文件做了操作1
,筛选了一部分做操作2
,最后要把所有的文件都拷贝到最终的位置。
代码如下:
var filter = $.filter('**/a/*.js', { restore: true });
gulp.src('**/*.js')
.pipe(action1())
.pipe(filter)
.pipe(action2())
.pipe(filter.restore())
.pipe(gulp.dest('dist'))
可以看到,如果没有restore这个操作,那么拷贝到最终位置的文件将只包含被过滤出来的文件,这样一restore
,所有的文件都被拷贝了。
下面我们来看看到底要如何使用:
- 仅过滤
您可能只想过滤流内容:
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const filter = require('gulp-filter');
exports.default = () => {
// Create filter instance inside task function
const f = filter(['**', '!*src/vendor']);
return gulp.src('src/**/*.js')
// 过滤文件的子集
.pipe(f)
// 通过插件运行它们
.pipe(uglify())
.pipe(gulp.dest('dist'));
};
- 恢复过滤文件
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const filter = require('gulp-filter');
exports.default = () => {
// 定义任务函数
const f = filter(['**', '!*src/vendor'], {restore: true});
return gulp.src('src/**/*.js')
// 过滤文件的子集
.pipe(f)
// 通过插件运行它们
.pipe(uglify())
// 带回以前过滤的文件(可选)
.pipe(f.restore)
.pipe(gulp.dest('dist'));
};
- 多个过滤器
通过组合和还原不同的筛选器,您可以使用单个管道处理不同的文件集。
const gulp = require('gulp');
const less = require('gulp-less');
const concat = require('gulp-concat');
const filter = require('gulp-filter');
exports.default = () => {
const jsFilter = filter('**/*.js', {restore: true});
const lessFilter = filter('**/*.less', {restore: true});
return gulp.src('assets/**')
.pipe(jsFilter)
.pipe(concat('bundle.js'))
.pipe(jsFilter.restore)
.pipe(lessFilter)
.pipe(less())
.pipe(lessFilter.restore)
.pipe(gulp.dest('out/'));
};
- 还原为文件源
您可以将过滤的文件还原到其他位置,并将其用作文件的独立源(ReadableStream)。将passthrough
选项设置为false
允许您这样做。
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const filter = require('gulp-filter');
exports.default = () => {
const f = filter(['**', '!*src/vendor'], {restore: true, passthrough: false});
const stream = gulp.src('src/**/*.js')
// 过滤文件的子集
.pipe(f)
// 通过插件运行它们
.pipe(uglify())
.pipe(gulp.dest('dist'));
// 将过滤后的文件用作gulp文件源
f.restore.pipe(gulp.dest('vendor-dist'));
return stream;
};
API
filter(pattern, options)
返回具有.restore
属性的转换流
。
pattern
类型:string
|string[]
|Function
接受具有通过multimatch运行的glob模式的字符串/数组。
如果提供函数,您将获得一个vinyl文件对象作为第一个参数,并且期望返回一个布尔值是否包含文件:
filter(file => /unicorns/.test(file.path));
options
类型:object
接受multimatch
注意:设置
dot: true
是否需要匹配带点号的文件,例如.gitignore
。
-
restore
类型:boolean
默认值:false
恢复过滤的文件。 -
passthrough
类型:boolean
默认值:true
设置为时true
,过滤后的文件将以还原stream.PassThrough
;否则,设置为时false
,过滤后的文件将以还原stram.Readable
。
当流为时stream.Readable
,它本身会结束,但是当为时stream.PassThrough
,您有责任结束流。