gulp常用插件之gulp-if使用
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-if这是一款条件判断插件。
注意:与
gulp-if一起使用时,表现不佳的插件通常会变得更糟。通常,修复不在gulp-if中。
注意:与lazypipe一起使用时效果很好,请参见下文
安装
一键安装不多解释
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真实情况。
如果condition为false且elseStream已传递,则数据将通过管道传递到elseStream
在数据通过管道传输到stream或elseStream或两者都不是之后,数据通过管道传输到stream。
condition
类型:boolean或stat对象,或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使用的更多相关文章
- 精通gulp常用插件
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...
- node和gulp实现前端工程自动化(附:gulp常用插件)
/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...
- gulp常用插件之gulp-eslint使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...
- gulp常用插件之gulp-babel使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...
- gulp常用插件之gulp-postcss使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...
- gulp常用插件之cssnano使用
更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...
- gulp常用插件之pump使用
更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...
- gulp常用插件之gulp-notify使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...
- gulp常用插件之gulp-beautify使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-beautify这是一款使用js-beautify进行资产美化插件. 更多使用文档请点击访问gulp-beautify工具官网. 安装 ...
- gulp常用插件之gulp-uglify使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-uglify这是一款使用UglifyJS缩小js文件. 更多使用文档请点击访问gulp-uglify工具官网. 安装 一键安装不多解释 ...
随机推荐
- NR / 5G - F-OFDM
- [Effective Java 读书笔记] 第三章 对所有对象都通用的方法 第八 ---- 九条
这一章主要讲解Object类中的方法, Object类是所有类的父类,所以它的方法也称得上是所有对象都通用的方法 第八条 覆盖equals时需要遵守的约定 Object中的equals实现,就是直接对 ...
- 《Web渗透与漏洞挖掘》第一章 安全知识
漏洞:漏洞是指一个系统存在的弱点或缺陷,系统对特定威胁攻击或危险时间的敏感性,或进行攻击威胁的可能性.漏洞可能来自应用软件或操作系统设计时的缺陷或编码时的错误,也可能来自业务交互处理过程中的设计缺陷或 ...
- UI自动化框架搭建
1.目录结构 大概分为以下几个文件 common :主要是用来放一些封装的公共函数 outputs :主要是输出一些文件,失败截图.用例执行完的测试报告 pagelocate :主要是元素的定位 pa ...
- SQL Server 2019 表无法修改问题
SQL Server 2019 表无法修改问题 问题描述: 解决方法: 1.在菜单栏中,点击工具->选项,示例: 2.在选项中单击设计器->表设计器和数据库设计器->取消勾选阻止保存 ...
- Spring有哪些配置方式
1.XML 配置文件. Bean 所需的依赖项和服务在 XML 格式的配置文件中指定.这些配置文件通常包含许多 bean 定义和特定于应用程序的配置选项.它们通常以 bean 标签开头.例如: < ...
- 医院信息集成平台(ESB)实施、建设方案
医院信息集成平台(ESB)实施.建设方案 基于中立.标准.开放的IT架构和数据标准,打造插拔式医院应用生态. 解决方案 基于ESB集成总线,构建医院信息化建设顶层设计. ...
- JS常见的表单验证,H5自带的验证和正则表达式的验证
H5验证 自带的验证无法满足需求: <form action="" method="get"> name:<input type=" ...
- 使用JDBC获取数据库中的一条记录并封装为Bean
比如我数据库中存入的是一条一条的用户信息,现在想取出一个人的个人信息,并封装为Bean对象,可以使用queryForObject来获取数据并通过new BeanPropertyRowMapper(Be ...
- C#中 ref 关键字的认识和理解
之前接手老项目的时候有遇到一些的方法参数中使用了ref关键字加在传参的参数前面的情况.对于新手,这里介绍和讲解一下ref的用法和实际效果. CLR中默认所有方法的参数传递方式都是传值,也就是说不管你传 ...