更多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，您有責任結束流。