Fork me on GitHub

gulp常用插件之gulp-filter使用

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


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

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

安装

一键安装不多解释

npm install --save-dev gulp-filter

使用

gulp.src中传入匹配符匹配了很多文件,可以把这些文件pipegulp-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));

注意:设置dot: true是否需要匹配带点号的文件,例如.gitignore

  • restore
    类型: boolean
    默认值: false
    恢复过滤的文件。

  • passthrough
    类型: boolean
    默认值: true
    设置为时true,过滤后的文件将以还原stream.PassThrough;否则,设置为时false,过滤后的文件将以还原stram.Readable
    当流为时stream.Readable,它本身会结束,但是当为时stream.PassThrough,您有责任结束流。

posted @ 2019-12-14 23:47  较瘦  阅读(1566)  评论(0编辑  收藏  举报
知识点文章整理