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. Mac 10.12安装FTP工具FileZilla

    说明:在Windows估计用的比较多,在Linux基本不用了,CRT和Xshell基本可以完成上传. 下载: (链接: https://pan.baidu.com/s/1bpaxmeN 密码: uuw ...

  2. Mac下使用crontab来实现定时任务

    说明: 1.Linux和Mac下操作crontab都是一致的 2.配置文件都在/etc/crontab下,如果没有就创建. 3.测试发现直接使用crontab -e命令创建的定时任务是放在临时文件夹的 ...

  3. [Xamarin.Android] 儲存資料於Windows Azure (转帖)

    在準備討論Xamarin.Android 如何整合GCM與Windows Azure來實作Push Notification之前, 先來了解如何將Xamarin.Android 與Windows Az ...

  4. (转)MySQL多源复制

    原文:https://dev.mysql.com/doc/refman/5.7/en/replication-multi-source.html MySQL多源复制概述 MySQL多源复制使复制从接受 ...

  5. Android中9-Patch图片之理解

    在android中,不仅可以将扩展名为.png,.jpg,.gif的普通图片作为图片资源,而且可以将扩展名为.9.png的9-Patch图片作为图片资源.扩展名为.png,.jpg,.gif的普通图片 ...

  6. ruby **option作为函数参数,map的key必须是符号

    # NEW UNNAMED KEYWORD ARGUMENTSdef new_way(**options)return options[:foo]end# => :new_waynew_way( ...

  7. 深度学习(十三) R-CNN Fast RCNN

    object detection我的理解,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别.object detection要解决的问题就是物体在哪里,是什么这整个流程的问题.然而,这个问题 ...

  8. Vue2.0项目实战语法

    一.安装配置依赖 1) vue init webpack-simple 项目名称 2) cnpm install 3 )  npm run dev 4 )  cnpm install vuex vue ...

  9. PowerDesigner常用设置

    使用powerdesigner进行数据库设计确实方便,以下是一些常用的设置 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了 PowerDesigner 快捷工具栏 palette 不见了 ...

  10. xsl 和xml transform方法的调用

    xsl 和xml生成html,兼容多个浏览器 <html> <head> <meta charset="UTF-8"/> </head&g ...