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


gulp-if这是一款条件判断插件。

注意:gulp-if一起使用时,表现不佳的插件通常会变得更糟。通常,修复不在gulp-if中。

注意:lazypipe一起使用时效果很好,请参见下文

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

安装

一键安装不多解释

npm install --save-dev gulp-if

使用

/**
* @param condition {Boolen} 判断条件或glob条件
* @param stream condition为true时,执行的任务
* @param elseStream condition为false时,执行的任务
* @param minimatchOptions 如果是GLUB条件,这些选项被传递给minimatch
*/
gulpif(condition, stream [, elseStream, [, minimatchOptions]])

1:有条件地过滤内容

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify'); var condition = true; // TODO: add business logic gulp.task('task', function() {
gulp.src('./src/*.js')
.pipe(gulpif(condition, uglify()))
.pipe(gulp.dest('./dist/'));
});

如果条件为真,则压缩内容,将所有文件发送到dist文件夹

2:三元过滤器

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var beautify = require('gulp-beautify'); var condition = function (file) {
// TODO: 添加业务逻辑
return true;
} gulp.task('task', function() {
gulp.src('./src/*.js')
.pipe(gulpif(condition, uglify(), beautify()))
.pipe(gulp.dest('./dist/'));
});

如果条件返回true,则进行压缩其他对象进行美化,然后所有内容发送到dist文件夹

3:从流中删除内容

var gulpIgnore = require('gulp-ignore');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint'); var condition = './gulpfile.js'; gulp.task('task', function() {
gulp.src('./*.js')
.pipe(jshint())
.pipe(gulpIgnore.exclude(condition))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});

对所有内容运行JSHint,从流中删除gulpfile,然后进行丑化并编写其他所有内容。

4:从流中排除事物

var uglify = require('gulp-uglify');

gulp.task('task', function() {
gulp.src(['./*.js', '!./node_modules/**'])
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});

抓取所有不在node_modules文件夹中的JavaScript文件,对其进行丑化处理并将其写入。这是最快的,因为node_modules中什么都没有留下gulp.src()

** 与lazypipe搭配使用效果很好 **

Lazypipe创建一个函数,该函数在使用时初始化管道链。这使您可以在gulp-if条件内创建一系列事件。仅当linting标志为true时,此方案才会运行jshint分析和报告程序。

var gulpif = require('gulp-if');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var lazypipe = require('lazypipe'); var linting = false;
var compressing = false; var jshintChannel = lazypipe()
// 添加管道步骤
.pipe(jshint) // 注意流函数尚未被调用!
.pipe(jshint.reporter)
// 添加具有自变量的步骤
.pipe(jshint.reporter, 'fail'); gulp.task('scripts', function () {
return gulp.src(paths.scripts.src)
.pipe(gulpif(linting, jshintChannel()))
.pipe(gulpif(compressing, uglify()))
.pipe(gulp.dest(paths.scripts.dest));
});

** 在lazypipe内部效果很好 **

Lazypipe假定所有函数参数都是静态的,如果需要在每个lazypipe内部实例化gulp-if参数,则为gulp。通过在惰性管道步骤上传递函数可以轻松解决此差异

var gulpif = require('gulp-if');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var lazypipe = require('lazypipe'); var compressing = false; var jsChannel = lazypipe()
// 添加管道步骤
.pipe(jshint) // 注意流函数尚未被调用!
.pipe(jshint.reporter)
// 添加具有自变量的步骤
.pipe(jshint.reporter, 'fail')
// 你不能说 .pipe(gulpif, compressing, uglify)
// 因为丑化需要在每个lazypipe情况下单独实例化
// 您可以这样说:
.pipe(function () {
return gulpif(compressing, uglify());
});
// 为什么这样做有效?lazypipe调用该函数,并传入no参数,,
// 实例化一个新的gulp-if管道,并将其返回给lazypipe。 gulp.task('scripts', function () {
return gulp.src(paths.scripts.src)
.pipe(jsChannel())
.pipe(gulp.dest(paths.scripts.dest));
});

API

gulpif(condition, stream [, elseStream, [, minimatchOptions]])

gulp-if会将数据通过管道传输到stream任何condition真实情况。

如果conditionfalseelseStream已传递,则数据将通过管道传递到elseStream

在数据通过管道传输到streamelseStream或两者都不是之后,数据通过管道传输到stream

  • condition

    类型:booleanstat对象,或function需要一个vinyl文件并返回布尔值或RegularExpression可以在file.path

    condition参数是gulp-match支持的任何条件。将file.path传递到中gulp-match

    如果给出了功能,则该功能会传递乙烯基file。该函数应返回boolean
  • stream

    gulp-if的流,以在条件为真时将数据通过管道传输到其中。
  • elseStream

    可选,当条件为false时,为gulp-if提供流传输数据。
  • minimatchOptions

    可选,如果是全局条件,则将这些选项传递给minimatch

gulp常用插件之gulp-if使用的更多相关文章

  1. 精通gulp常用插件

    本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...

  2. node和gulp实现前端工程自动化(附:gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  3. gulp常用插件之gulp-eslint使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...

  4. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

  5. gulp常用插件之gulp-postcss使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...

  6. gulp常用插件之cssnano使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...

  7. gulp常用插件之pump使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...

  8. gulp常用插件之gulp-notify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...

  9. gulp常用插件之gulp-beautify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-beautify这是一款使用js-beautify进行资产美化插件. 更多使用文档请点击访问gulp-beautify工具官网. 安装 ...

  10. gulp常用插件之gulp-uglify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-uglify这是一款使用UglifyJS缩小js文件. 更多使用文档请点击访问gulp-uglify工具官网. 安装 一键安装不多解释 ...

随机推荐

  1. 一个"/"引发的惨案

    今天行云流水写了一个接口,正想着写完就睡觉了,结果访问的时候一直报错404,找不到路径,我反复检查了好久,确定路径名字没写错,百思不得其解,瞬间有想砸电脑的冲动,于是准备洗洗睡了,明天再搞 洗玩脚回到 ...

  2. 【OpenGL】LNK1104 无法打开文件“freeglutd.lib”

    新建的OpenGL程序编译时经常会出现[LNK1104 无法打开文件“freeglutd.lib”]问题,如果freeglutd.lib确实放到了正确的路径下,通常可以通过添加“NDEBUG”宏定义解 ...

  3. Mysql设置创建时间字段和更新时间字段自动获取时间,填充时间

    1.引言在实际开发中,每条数据的创建时间和修改时间,尽量不需要应用程序去记录,而由数据库获取当前时间自动记录创建时间,获取当前时间自动记录修改时间. 2.创建语句(1)–添加CreateTime 设置 ...

  4. golang中使用Shutdown特性对http服务进行优雅退出使用总结

    golang 程序启动一个 http 服务时,若服务被意外终止或中断,会让现有请求连接突然中断,未处理完成的任务也会出现不可预知的错误,这样即会造成服务硬终止:为了解决硬终止问题我们希望服务中断或退出 ...

  5. new 的实现原理

    自己封装一个new <script> // 创建一个构造函数 function Father() { this.name = '小红'; this.eat = function () { ...

  6. NR / 5G - Uplink Carrier Waveform Generation

  7. VFP 图形文件与剪切板互换的API解决方法

    在 VFP 中,凡遇图形处理,大多数情况下,都会涉及到图形文件与剪切板互换的情况.下面给出利用 API 解决的方法.这是原来从网上摘下来的,版权归原作者.基本处理的代码如下,你可以将其应用到你的代码中 ...

  8. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  9. asp.net MVC项目开发之统计图echarts后台数据的处理(三)

    前台显示的东西,有相应的文档很容易修改,后台传递数据方式才是我们最关心的 首先要记住,我们一步数据使用的是post,那么后台代码我们要给方法加上 [HttpPost]注解 不然异步没有效果 下面上代码 ...

  10. ModbusTCP协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析Modbus所含功能码

    现在网上有很多类似的文章.其实这一篇也借鉴了很多其他博主的文章. 写这篇文章的重点是在于解析功能和报文.对Modbus这个协议并不会做很多介绍. 好了,我们开始吧. 常用的功能码其实也没多少.我也就按 ...