gulp在前端自动化构建中非常好用,有非常丰富的可以直接拿来使用的plugin,完成我们日常构建工作。

但是万事没有十全十美能够完全满足自己的需求,这时我们就要自己动手写一个小的函数,用于在gulp stream pipeline中执行我们想要的动作,比如我有一个需求在build后将gulp-inject插入的assets url修改为laravel的一个helper以便识别不同的运行环境:如果是staging环境则不要上cdn方便调试,如果是生产环境则将url修改为cdn的url,实现网站快速飞起来的梦想。怎们办呢?

一个可行的偷懒方案是使用gulp-through2 plugin,不需要我们写完整的plugin,而只需关注我们想要的功能:

https://meanstack.wordpress.com/2015/10/09/write-your-own-gulp-module-with-example-as-image-cache-buster-for-css/

function (file, enc, callback) {
var stringData = String(file.contents);
//loop for each supported images types
for (var i = 0; i < module.exports.supportedImages.length; i++) {
//add version of image
stringData = cssImageBusterForOneImageType(stringData, module.exports.supportedImages[i]);
}
var finalBinaryData = new Buffer(stringData, “binary”);
file.contents = finalBinaryData;
callback(null, file);
}
var jsOutputFile = “combined.js”;
var jsOutputFolder=”./dest/js”
var jsSrc=[“./src/js/**/*.js”];
gulp.task(‘jsconcat’, function () {
gulp.src(jsSrc)
.pipe(uglifyJs())
.pipe(concat(jsOutputFile, {newLine: ‘ ‘}))
.pipe(jshint())
.pipe(through.obj(imagebuster.jsImageBuster))
.pipe(gulp.dest(jsOutputFolder));
});

如何写一个能在gulp build pipe中任意更改src内容的函数的更多相关文章

  1. 写一个python脚本监控在linux中的进程

    在虚拟机中安装Linux中的CentOS7系统 https://baijiahao.baidu.com/s?id=1597320700700593557&wfr=spider&for= ...

  2. 编程写一个方法时,注意方法中传参数的数量最好不要超过5个,超过5个怎么办?可以用struct或class,或一个字典类

    图  1 一.从图1发现了什么问题呢? 答案:1.参数传的的太多了:2.另外注释也没写好. 说明:一个方法中,传参数的数量最好不要超过5个. 应该采用:struct或class,或一个字典类都行.其中 ...

  3. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  4. 学了C语言,如何利用CURL写一个下载程序?—用nmake编译CURL并安装

    在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...

  5. python写一个信息收集四大件的脚本

    0x0前言: 带来一首小歌: 之前看了小迪老师讲的课,仔细做了些笔记 然后打算将其写成一个脚本. 0x01准备: requests模块 socket模块 optparser模块 time模块 0x02 ...

  6. 教你如何使用Java手写一个基于链表的队列

    在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...

  7. 写一个scrapy中间件--ip代理池

    middleware文件 # -*- coding: utf-8 -*- # Define here the models for your spider middleware # See docum ...

  8. 使用 Node.js 写一个代码生成器

    背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操 ...

  9. 如何写一个HttpClient[1]——URI的处理

    如何写一个HttpClient[1]--URI的处理 在翻阅apache的http client的代码的时候,看到org.apache.http.client.utils.URIBuilder.jav ...

随机推荐

  1. C 扩展库 - mysql API CRUD

    CRUD table create table if not exists `student` ( `id` int auto_increment, `name` varchar(16) not nu ...

  2. 性能调优-CPU方面,内存方面

    CPU调优 首先要清楚数据库应用的分类,一般分为两类:OLTP(Online Transaction Processing,在线事务处理)和OLAP(Online Analytical Process ...

  3. InnoDB的B+树索引

    B+树索引其本质就是B+树在数据库中的实现,但是B+索引在数据库中有一个特点就是其高扇出性,因此在数据库中,B+树的高度一般都在2-3层,也就是对于查找某一键值的行记录,最多只需要2到3次IO,这倒不 ...

  4. flask框架的学习

    ---恢复内容开始--- 第一个flask程序讲解:1. 第一次创建项目的时候,要添加flask的虚拟环境.添加虚拟环境的时候,一定要选择到python这个执行文件.比如你的flask的虚拟环境的目录 ...

  5. yii2 页面加载警告框

    在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...

  6. get/post 接口调用

    content-type:  application/~~~~~ /// <summary> /// Post数据到网站 /// </summary> /// <para ...

  7. 微信WeUI常见页面模板

    购物车模板 就是popup弹层(css样式+js),还有slider滑动操作,还有增减的js 代码: <!DOCTYPE html> <html lang="zh-CN&q ...

  8. 如鹏网学习笔记(十)DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  9. c# MVC模式学习笔记_数据验证

    改变显示字段名称 设计字段规范 1.引用 using System.ComponentModel; using System.ComponentModel.DataAnnotations; 2.Dis ...

  10. 用JavaScript将数字转换为大写金额(收藏)

    (非原创, 来自网络,仅作收藏) var digitUppercase = function(n) { var fraction = ['角', '分']; var digit = [ '零', '壹 ...