更多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. 13.深度学习(词嵌入)与自然语言处理--HanLP实现

    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 13. 深度学习与自然语言处理 13.1 传统方法的局限 前面已经讲过了隐马尔可夫 ...

  2. vue 过渡 & 动画

    过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...

  3. 论文《Entity Linking with Effective Acronym Expansion, Instance Selection and Topic Modeling》

    Entity Linking with Effective Acronym Expansion, Instance Selection and Topic Modeling 一.主要贡献 1. pro ...

  4. 戏说前端之CSS编码规范

    前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式.为什么呢?因为这样可读性比较强,看起来比较清爽,像链接也是用这样的方式,例如 // 地址: github的地 ...

  5. 共同战“疫”,CODING 帮助研发团队高效协同

    新冠疫情下,家里蹲的日子继续延长.部分企业虽然受困于不能回公司办公,但都陆续开启了远程协作办公,远程协作领域被推上了风口.但「远程协同」看不见摸不着工作伙伴,个人的自律能力也无法保证,难免出现沟通响应 ...

  6. Learning hard 学习笔记

    第一章 你真的了解C#吗 1.什么是C#, 微软公司,面向对象,运行于.NET Framework之上, 2.C#能编写哪些应用程序, Windows应用桌面程序,Web应用程序,Web服务, 3.什 ...

  7. vuex学习详细解(主页目录

    学习vuex过程中,通过 vue-cli命令来配置和使用vuex笔记整理 vue-cli中配置vuex流程和注意事项 vuex目录配置 vuex的states.js vuex的getters.js v ...

  8. C#的委托案例

    C#实现(Delegate)的委托就不多说了,直接上代码,看代码中的注释: namespace Delegate { delegate void DGSayiHi(string name);//声明委 ...

  9. if 语句 总结笔记

    1.if 语句 语法: if(condition) statement1; else statement2; graph TD A[JAVA考试] -->|几天后| B(收到成绩单) B --& ...

  10. mysql官方源安装的一些问题

    今天测试Linux 各个软件源 ,发现mysql 配置官方源之后,yum install -y mysql   安装了 mysql lastst 最新版,  安装完之后,奇葩的是没有提示输入密码, 所 ...