gulp流(stream) 插件gulp-filter、gulp-flatten和gulp-if案例解读

导读

在gulp实现前端自动化的时候，最多的时候就是对流（stream）的分析处理，在某些情景比较复杂的时候，在流处理的过程中很容易出现问题，就比如一些流需要单独过滤处理，但是之后最终却要一起再处理；或者一些多文件夹层级的文件处理，需要提取某一层级的文件，或者把所有层级的文件全部提取出来，放在一个层级里面；甚至有些管道需要使用条件处理，等等； 所以我们这里介绍，gulp-filter、gulp-flatten、gulp-if这三个流处理插件：

gulp-filter

根据规则（minimatch），筛选出需要的文件流单独最后处理，筛选时坑有点多，建议配合使用gulp-print以及gulp-util工具开发，以及需要注意工作流的先后同步问题

gulp-filter文档：https://www.npmjs.com/package/gulp-filter

规则文档：https://github.com/isaacs/minimatch#options

let gulp = require("gulp"); let gulpLoadPlugins = require('gulp-load-plugins'); let $ = gulpLoadPlugins({lazyload: true, rename:{"gulp-ruby-sass" : "sass", "gulp-markdown-pdf": "mdpdf", "gulp-rev-collector":"revCollector", "gulp-asset-rev":"assetRev"}}); let del = require("del") const clear = (done) => { del.sync(['./dist/newjs/**',"!./dist/newjs"]) done() } const filters = (done) => { let filter = $.filter(["./js/*.js"],{restore: true}) // console.log(filter) gulp.src(["./**/*.js","!**/node_modules/**","!./dist/**","!**/gulpfile.js","!./class/*"]) .pipe($.print.default(func)) .pipe(filter) .pipe($.concat("all.min.js")) // 把筛选到的js文件打包合成all.min.js文件 /* .pipe($.uglify()) // 开启后会执行压缩*/ .pipe(filter.restore) .pipe($.print.default(func)) .on('error', function(err) { $.util.log($.util.colors.red('[Error]'), err.toString()); }) .pipe(gulp.dest("./dist/newjs/")) done() } function func(data){ console.log("当前的文件路径："+data) } exports.default = gulp.series(clear, filters )

gulp-flatten

常用于把各个子目录下面的所有满足匹配规则的文件（比如所有js文件）取出来放在同级文件夹下面 文档地址：https://www.npmjs.com/package/gulp-flatten

const flattens = (done) => { gulp.src(["**/**/*.js","!**/node_modules/**","!./dist/newjs/**"]) .pipe($.print.default(func)) .pipe($.flatten()) .pipe(gulp.dest("./dist/newjs/")) done() } exports.default = gulp.series(clear, flattens)

gulp-if

类似于三元运算符， 如果为true则执行当前管道的操作 （可以执行多个操作），如果false则不再执行当前管道

备注：只会影响当前管道，不影响后续的管道，意思是当前管道什么都不干文档地址：https://www.npmjs.com/package/gulp-if const guif = (done) => { gulp.src(["**/**/*.js","!**/node_modules/**","!./dist/newjs/**"]) .pipe($.print.default(func)) .pipe($.if(false, $.flatten())) .pipe(gulp.dest("./dist/newjs/")) done() } exports.default = gulp.series(clear, guif)