gulp常用插件之gulp-filter使用

Posted 2020-11-23 jiaoshou

更多gulp常用插件使用请访问：gulp常用插件汇总

---

gulp-filter这是一款可以把stream里的文件根据一定的规则进行筛选过滤。

更多使用文档请点击访问gulp-filter工具官网。

安装

一键安装不多解释

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，您有责任结束流。