gulp初体验记录(简介、插件开发介绍)
目前用的业界比较知名的三个前端构建工具:grunt、gulp、fis,自己此前一直都是只在用grunt,fis看过一点,gulp则一直都没注意过,直到最近发现好像用的人越来越多,所以今天也就抽了点时间尝试了一下。
【什么是gulp】
比较官方的一句话就是:gulp是一种基于流的,代码优于配置的新一代构建工具。
gulp和grunt有点类似,但是从书写角度上来说,写grunt的gruntfile就是在写一个配置文件,写gulp的gulpfile则如同在写代码一样。
从gulp和grunt的具体构建上来说,grunt的每一次插件调用,就是一次新的IO操作,当项目足够大时,大量的IO操作会使整个构建过程效率极其低下。而gulp采用了一种更高效的构建思想,也就是使用流将各个插件的构建串联起来,效率的提升很显而易见。
grunt:开始构建=>读文件=>插件改文件=>写文件=>读文件=>插件改文件=>写文件=>构建完成
gulp:开始构建=>读文件=>插件改文件=>插件改文件=>写文件=>构建完成
【gulp的使用】
gulp的使用及其简单,由于网上资料极多,所以此处不过多赘述,用个简单的例子概括即可
- 安装gulp命令行工具:npm install -g gulp
- 创建test目录,打开test目录,新建一个test1.js文件,再新建一个test2.js文件
- 在test目录下安装gulp:npm install --save-dev gulp
- 安装concat工具:npm install gulp-concat
- 创建gulpfile并写入以下内容
var gulp = require("gulp");
var concat = require("gulp-concat") gulp.task("default" , function(){
console.log("gulp is running") return gulp.src(["test1.js" , "test2.js"])
.pipe(concat("result.js"))
.pipe(gulp.dest("./build/"))
})
最后打开命令行输入gulp,敲下回车,就发现在build目录下多出了一个合并了test1.js和test2.js的result.js文件,至此就构建完成了,更多的使用可以参考http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
【gulp插件的开发】
gulp的插件开发没有grunt那么直观,grunt的话,只需注册一个任务,然后就可以通过传进的grunt对象里的files里获取到所有文件的路径以及输出路径,然后就只需要用fs模块获取到这些文件后再进行处理就行了。但是gulp有点不大一样,从它配置文件的写法中就可以看出。
gulp是采用流式的,使用pipe连通。nodejs中的流有四种,包括Readable可读流,Writable可写流,Duplex双工流以及Transform转换流。这四种流的具体解释可看官方文档:http://nodeapi.ucdok.com/#/api/stream.html
分析一下下面那段配置文件的代码:
gulp.src(["test1.js" , "test2.js"]).pipe(concat("result.js")).pipe(gulp.dest("./build/"))
其中gulp.src(["test1.js" , "test2.js"])是获取文件流,也就是一个可读流,获取到文件流后需要处理这些数据,就会通过pipe方法输入到concat("result.js")中,进行处理,处理完还需要再输送到下一个环节,也就是说concat("result.js")这个方法处理完毕后的返回内容必须要是一个转换流对象,因为转换流对象也是双工的,可读也可写。处理完后再执行pipe(gulp.dest("./build/"))进行写出。用张图来说就是:
也就是说,中间的Transform其实就是我们要实现的插件,而我们的插件需要返回一个转换流对象。
知道了这些,我们就可以开始自己的插件开发了。先建个文件,然后写入以下代码
var fs = require("fs")
var gulputil = require("gulp-util")
var stream = require('stream') module.exports = function(){
var transform;
return transform;
}
这一块尚未实现任何内容,如果gulp里直接引用也肯定是报错的,先不急,一步一步来,上面中gulp-util是gulp提供的一个工具模块,下面的方法主体中,先把要返回的值写好,我们要返回一个转换流对象,所以,我们得先实例化一个转换流对象,也就是
var transform = new stream.Transform({ objectMode: true });
其中objectMode参数必须要有,顾名思义:对象模式,只有有了这个参数,transform才是一个面向实现者的转换流对象,否则就是一个面向消费者的一堆buffer块。
转换流对象有了,那我们如何获得文件流,又如何处理呢?通过nodejs的官方文档找到了关于转换流里的一个方法的一段说明:
也就是说,我们需要给实例化出来的转换流对象实现一个_transform方法,当数据流传入的时候,就会调用该方法并且传入相关参数。所以添加一段代码:
var file;
transform._transform = function(chunk, encoding, callback){ console.log(chunk.contents) //此处输出传入的文件流,就是一段buffer
file = chunk;
//可以在这里对文件流内容进行处理
var str = chunk.contents.toString(); //比如这里的str为"hello ${arg}"
str = str.replace('${arg}' , 'gulp')
chunk.contents = new Buffer(str) this.push(chunk) callback();
}
也就是说,对文件内容的处理就是在这里处理。处理完后通过this.push(chunk)推入到转换流对象中,然后调用callback说明执行完毕。然后我们还可以再实现一个方法_flush
transform._flush = function(cb){
//更改文件输出命名
file.path = file.path.substring(0 , file.path.lastIndexOf("\\"))+"\\newfile.js"; this.push(file) cb()
}
当写入完毕剩下的数据后调用此函数,比如我们如果想更改文件命名,就可以再此前的_transform方法中把chunk保存一下,然后执行_flush的时候将文件名更改,然后再通过this.push()推入转换流对象,再执行callback结束。
基本上整个插件开发的架子就是这样,就是处理流数据。
不过有个问题就是,stream.Transform是在nodejs v0.10版本中才有,所以目前的gulp主流插件中,大部分为了兼容以前的版本,实现转换流用的都是第三方工具,比如through2。但是写法差不多:
var file
var transform = through2.obj(function(chunk, encoding, callback){
console.log(chunk.contents) //此处输出传入的文件流,就是一段buffer file = chunk;
//可以在这里对文件流内容进行处理
var str = chunk.contents.toString(); //比如这里的str为"hello ${arg}"
str = str.replace('${arg}' , 'gulp')
chunk.contents = new Buffer(str) this.push(chunk) callback();
},function(cb){
file.path = file.path.substring(0 , file.path.lastIndexOf("\\"))+"\\newfile.js"; this.push(file) cb()
}) return transform;
gulp初体验记录(简介、插件开发介绍)的更多相关文章
- gulp初体验
项目流程 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 常用命令简介: node -v 查 ...
- gulp 初体验
1,全局安装 gulp npm install --global gulp 但是一直无法成功,后来才知被墙了,于是使用了如下命令,安装cnpm npm install -g cnpm --regist ...
- 前端工业化工具Gulp初体验
1. 全局安装 gulp: npm install --global gulp 2.在项目目录下,用以下命令创建一个基本的package.json文件 npm init 3.安装Gulp npm in ...
- 痞子衡嵌入式:恩智浦机器视觉模块OpenMV-RT那些事(1)- 初体验
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是机器视觉模块OpenMV-RT初体验. 近些年机器视觉应用一直是个很火的方向,想象一下机器如果能长上"眼睛",是不 ...
- 痞子衡嵌入式:走进二维码(QR Code)的世界(2)- 初体验(PyQt5.11+MyQR2.3+ZXing+OpenCV4.2.0)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是走进二维码(QR Code)的世界专题之初体验. 接上篇 <走进二维码(QR Code)的世界(1)- 引言> 继续更文,在 ...
- 【微服务】Nacos初体验
SpringCloud - Nacos初体验 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长 ...
- PHP初体验
PHP初体验 提笔写初体验总不知道从何说起,直接聊PHP中的函数.PHP网络技术.数据库操作.PHP模板等感觉又不是初体验.最后还是决定从PHP的面向对象.PHP的魔术方法.PHP的反射.PHP中的异 ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验
Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...
随机推荐
- [转]ASP.NET 2.0中GridView无限层复杂表头的实现
本文转自:http://blog.csdn.net/net_lover/article/details/1306211 实现方法就是给单元格填充我们想要的格式代码. C# <%@ Page La ...
- [转]JavaScript实现 页面滚动图片加载
本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...
- Java向上转型与向下转型
一.向上转型 例如:Parent p=new Son(); 这样引用p只能调用子类中重载父类的方法:但属性是父类的:如果想调用子类属性的话,可以用getter()方法. 二.向下转型 子类对象的父类引 ...
- ZOJ 2301 / HDU 1199 Color the Ball 离散化+线段树区间连续最大和
题意:给你n个球排成一行,初始都为黑色,现在给一些操作(L,R,color),给[L,R]区间内的求染上颜色color,'w'为白,'b'为黑.问最后最长的白色区间的起点和终点的位置. 解法:先离散化 ...
- HDU 2189 悼念512汶川大地震遇难同胞――来生一起走 --生成函数
这题跟上两题也差不多. 把150以内的素数找出来,把素数的值看做硬币的面值,每个硬币的个数即ceil(150/prime[i]),因为再多也没用,最多组成n=150就行了,所以又回到了找硬币问题.用生 ...
- maya获取邻接顶点的一个问题
maya网格数据结构允许"非流形"的存在,于是,这种数据结构无法按顺序给出一个点的邻接顶点. 于是,MItMeshVertex::getConnectedVertices函数返回的 ...
- Javascript中的delete
一.问题的提出 我们先来看看下面几段代码,要注意的是,以下代码不要在浏览器的开发者工具(如FireBug.Chrome Developer tool)中运行,原因后面会说明: 为什么我们可以删除对象的 ...
- iOS请求服务器数据去空NSNull
我们在处理数据库接口的过程中,如果数据中出现null,我们是没法处理的.我在使用NSUserDaults保存后,出现崩溃. null产生原因 null是后台在处理数据的时候,如果没有设置value值, ...
- 05JavaIO详解_仿照IO源码自己去实现一个IO流(为了加深印象,本身没有价值)
版本会越来越难: 版本1:只写一个read方法 package com.guigu.shen.InputStream; import java.io.IOException; import java. ...
- 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)
原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...