返回：唐霜｜书

gulp中文入门教程

简明的gulp中文入门教程，从实战角度出发，同时囊括相关的知识点，让开发者真正做到入门。

前言

前端开发已经不再只是搞搞样式，处理处理交【作者：唐霜】本文作者：唐霜，转载请注明出处。互那么简单，前后端分离，后端只为前端提供【未经授权禁止转载】转载请注明出处：www.tangshuang.netapi数据接口，以前url路由、html【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】结构都需要后端来架构，如今这些全靠前端来【未经授权禁止转载】【未经授权禁止转载】处理，前端也具备了工程性。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

这几年，模块化开发已经成为web应用前端【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net开发的共识。以往套上jQuery走天下的转载请注明出处：www.tangshuang.net【作者：唐霜】时代已经过去了，前端已经发展成为复杂的大未经授权，禁止复制转载。【本文首发于唐霜的博客】型应用开发工作。以SPA（Single 未经授权，禁止复制转载。【本文受版权保护】Page Application）为代表本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。的单页应用成为现在很多大公司发布前端产品【转载请注明来源】【转载请注明来源】的形式，以往以html+css+js的前【版权所有】唐霜 www.tangshuang.net【转载请注明来源】端在这里已经不适用了，将所有资源进行打包【本文受版权保护】【版权所有】唐霜 www.tangshuang.net，正是解决这种需求的方案，webpack【转载请注明来源】【版权所有】唐霜 www.tangshuang.net等打包工具也孕育而生。

一年多以前，我接触的前端和上面的“以往的原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】前端”并无二致，直到我进入morning著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】star，才逐渐认识到自己在前端领域是多原创内容，盗版必究。【转载请注明来源】么肤浅。我在自己的博客中，多次把自己工作【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net中认知的，morningstar的开发p原创内容，盗版必究。转载请注明出处：www.tangshuang.netattern进行分享。同时，我现在所在的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】项目也正是使用gulp+webpack进【未经授权禁止转载】【作者：唐霜】行开发的，因此，我希望通过撰写（翻译）这【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】本手册，既让自己重新回顾一下gulp的使【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】用，以及希望在这个过程中有新的收获。

【访问 www.tangshuang.n【转载请注明来源】原创内容，盗版必究。et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ngnet】

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】

你可以在gitbook上在线阅读，也可以在github上fork所有源文件，对文档的细节进行补【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】充。

gulp官方文档

【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshua【未经授权禁止转载】【原创内容，转载请注明出处】ngnet】

【本文受版权保护】

【转载请注明来源】

gulp中文文档（翻译）

【作者：唐霜】

转载请注明出处：www.tangshua【未经授权禁止转载】【未经授权禁止转载】ng.net

【本文受版权保护】

【作者：唐霜】

我以前都是以文章的形式分享技术内容，我觉本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net得技术的东西，用文章那种分散性的形式发表【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】，会让人知识体系比较混乱，仅仅适合解决一未经授权，禁止复制转载。【未经授权禁止转载】些具体的细节性技术问题，而采用book的【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】形式分享，则更有利于形成完整的知识体系。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这是我第一次写一份完整的文档，并且阅读了本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。不少英文材料，但是感觉还是不够详细，如果【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。你有什么意见或觉得不足的地方，可以通过g本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ithub、博客等各个渠道向我反馈。

快速入门

我的所有开发都是在ubuntu上面完成的【原创不易，请尊重版权】【原创不易，请尊重版权】，所以本文档中可能会涉及一些ubuntu【转载请注明来源】转载请注明出处：www.tangshuang.net linux下的一些命令，如果你不接触u【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】buntu，甚至不接触linux，都没有【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。任何关系，因为我们是要用gulp，而不是转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。在纠结命令，而且在后面的文档中，我会对大【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。部分命令进行解释。
【原创不易，请尊重版权】 gulp是node的一个模块（包），因转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net此大部分情况下，我们通过npm进行安装。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】当然，高手而言，甚至可以下载包，手动进行【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】安装。熟悉npm的朋友，也推荐了解一下y【版权所有，侵权必究】未经授权，禁止复制转载。arn，它也是个包管理工具，但是效率上比【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。npm高效（快）。

【原创内容，转载请注明出处】【原创内容，转载请注明出处】

现在，我假设你手上有一台拥有开发环境的u【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。buntu16.04LTS，但是还没有接【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。触node，我会手把手教你一步一步完成安著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】装。

1) 安装node

$ sudo apt install nodejs

假如你的ubuntu不支持apt，可以替【作者：唐霜】【未经授权禁止转载】换为apt-get。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

2) 安装和升级npm

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【转载请注明来源】

$ sudo apt install npm$ npm update -g npm

3) 安装gulp-cli

$ npm install -g gulp-cli

为什么不是安装gulp呢？暂且按住不表。

4) 创建一个项目

$ mkdir my_project$ cd my_project$ npm init

在出现的交互信息中，填写和你项目相关的信【原创内容，转载请注明出处】原创内容，盗版必究。息。

5) 把gulp作为这个项目的一个依赖

【关注微信公众号：wwwtangshua未经授权，禁止复制转载。原创内容，盗版必究。ngnet】【作者：唐霜】

$ npm install --save-dev gulp

上面我们留了一个问题，说为什么上面安装的原创内容，盗版必究。【转载请注明来源】是gulp-cli，而不是gulp。这里【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】就有答案。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原创内容，盗版必究。

我们npm install的gulp将会著作权归作者所有，禁止商业用途转载。【转载请注明来源】被保存到my_project这个目录下的【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】node_mudules目录下去，pac本文版权归作者所有，未经授权不得转载。【本文受版权保护】kage.json文件的dependen【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。cesDev字段也会被增加一个gulp的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。记录。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【本文受版权保护】本文版权归作者所有，未经授权不得转载。ng.net

这是因为npm install gulp【本文首发于唐霜的博客】【本文受版权保护】时安装的gulp是一个node模块，是一【转载请注明来源】【转载请注明来源】个项目依赖的包，我们将会在自己的项目代码【原创内容，转载请注明出处】【版权所有，侵权必究】里面用var gulp = requir著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。e(‘gulp’【未经授权禁止转载】【转载请注明来源】)的形式引用这个包，而这个包，才会是我们【未经授权禁止转载】【转载请注明来源】下面API一章中的所有api的主人。而gulp-c【原创内容，转载请注明出处】【转载请注明来源】li，在这里没有半点关系，cli真的只是【本文受版权保护】【转载请注明来源】一个命令行工具，而不是我们用来requi【作者：唐霜】原创内容，盗版必究。re的东西。

原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

6) 创建一个gulpfile.js文件

var gulp = require('gulp');
gulp.task('my_task', function() {
  setInterval(function(){
    console.log('I am out!');
  },5000);
});

7) 执行gulp任务

$ gulp my_task

【转载请注明来源】【作者：唐霜】未经授权，禁止复制转载。

通过上面这些步骤，你可以轻松快速的创建自【版权所有，侵权必究】转载请注明出处：www.tangshuang.net己的gulp工具，在你的项目里面使用gu【作者：唐霜】【转载请注明来源】lp工具帮你自动化的完成一些任务。比如举【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】一个简单的例子，你可以在你的源代码里面写【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ES6的代码，通过gulp的一系列处理，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。自动生成一个编译成ES5的js文件。当然未经授权，禁止复制转载。【转载请注明来源】，大部分任务都需要使用插件，或额外编写n【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ode脚本来执行。这些，我们都将在这本手未经授权，禁止复制转载。【未经授权禁止转载】册里一一提到。

【本文受版权保护】原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

安装

你可能从来没有接触过node，不要紧，我原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】会教会一个完全不懂node的人如何来搭建【本文首发于唐霜的博客】未经授权，禁止复制转载。。当然了，你必须得懂javascript转载请注明出处：www.tangshuang.net【未经授权禁止转载】，而且最好你对前端领域比较热门的东西都有【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。所了解，这样才不至于在提到一些东西的时候【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】不之所以。

【转载请注明来源】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netng.net

让我们开始吧！

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

Node

【未经授权禁止转载】【原创不易，请尊重版权】

node安装

因为我的大部分开发都是在ubuntu下面原创内容，盗版必究。【本文首发于唐霜的博客】进行的，所以这个文档默认会使用ubunt【原创不易，请尊重版权】【本文受版权保护】u作为讲解。当然，也会提到windows未经授权，禁止复制转载。【原创内容，转载请注明出处】下面的处理方法，但是因为我很少在wind【原创不易，请尊重版权】【原创内容，转载请注明出处】ows下面实践，所以windows里面的【转载请注明来源】【本文受版权保护】坑就不去挖了。

1）采用apt安装

原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。

ubuntu可以使用apt快捷安装：

$ sudo apt install nodejs

2）编译安装

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.n【原创内容，转载请注明出处】【转载请注明来源】et 获取更多精彩内容】

一般apt源中的node都不是最新的稳定【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】版，而现在官方提供的最新稳定版是6.9.未经授权，禁止复制转载。【未经授权禁止转载】1，所以我们可以通过下载官网的最新版本，转载请注明出处：www.tangshuang.net【作者：唐霜】在本地进行编译安装。

【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

$ wget https://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz$ tar -zxvf node-v6.9.1.tar.gz$ cd node-v6.9.1$ ./configure$ make$ make install$ make test

在linux下面，都可以通过源码编译安装本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net。上面使用到了wget, tar, ma本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netke，如果这些软件在你的ubuntu上面转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】都没有安装，可以通过apt进行安装。

wget有的时候并不支持https，这个原创内容，盗版必究。未经授权，禁止复制转载。时候一般在wget后面加一个参数R【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】11;no-check-certific原创内容，盗版必究。未经授权，禁止复制转载。ate就可以解决。

原创内容，盗版必究。转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【作者：唐霜】ng.net原创内容，盗版必究。未经授权，禁止复制转载。

3） windows下面安装node

到node的官网去下载稳定版的node exe/msi安原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。装文件，下载下来之后，像安装普通软件一样【原创内容，转载请注明出处】【原创内容，转载请注明出处】安装好。

安装npm

什么是npm？它是Node Packag【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。e Manager的缩写，及一个包管理工本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net具。最近facebook发布了yarn，【原创内容，转载请注明出处】未经授权，禁止复制转载。也是和npm一样的包管理工具，而且性能上本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net比npm更好，有兴趣的同学可以尝试一下。

【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【本文首发于唐霜的博客】

为什么要管理node的包？在node中，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。javascript以模块的形式存在。虽原创内容，盗版必究。【作者：唐霜】然我们可以像node test.js这样【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】去执行某个脚本，但是它天生具备modul【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】e功能。在node中通过require引原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】入一个模块，在模块中使用module.e著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。xports导出模块的接口。而模块，通常【本文受版权保护】【本文受版权保护】情况下就是一个js文件，但是有些模块功能【本文受版权保护】【未经授权禁止转载】比较复杂，被切割到不同的js文件中，虽然【未经授权禁止转载】未经授权，禁止复制转载。这些js文件都是模块，但是把这些为实现同著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net一个功能的js放在一个文件夹下面，用一个【转载请注明来源】未经授权，禁止复制转载。js作为统一对外的接口，再在这个文件夹内【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net放一个package.json，这样的放【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。在一个文件夹下面的一组文件，被成为“包”【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】，也就是package，package.【作者：唐霜】【本文首发于唐霜的博客】json里面规定了包名，出口文件是哪一个【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。等信息。关于package，我们会在后面未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的文档讲到。

在ubuntu里面，同样可以使用apt安【本文首发于唐霜的博客】【转载请注明来源】装和编译安装两种安装方式。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】ngnet】转载请注明出处：www.tangshua【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ng.net【未经授权禁止转载】

$ sudo apt install npm

编译安装就不介绍了。因为我们可以通过np【关注微信公众号：wwwtangshuangnet】【转载请注明来源】m升级自身到最新的版本。

【作者：唐霜】【转载请注明来源】【原创不易，请尊重版权】未经授权，禁止复制转载。

$ npm install -g npm

这是一种奇怪的升级办法，npm本身也是n原创内容，盗版必究。【原创不易，请尊重版权】ode的一个模块，但是在我们通过apt安原创内容，盗版必究。原创内容，盗版必究。装npm之前，没法使用npm，但是安装了【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】npm之后，就可以用npm安装自身，甚至【本文首发于唐霜的博客】【未经授权禁止转载】可以在后面跟上@版本，这样可以随意在不同【作者：唐霜】【本文受版权保护】版本的npm之间切换。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua【转载请注明来源】转载请注明出处：www.tangshuang.netngnet】

注意：升级npm之后，应该先关掉你的te【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netrminal后重新打开，我不知道这是为什【作者：唐霜】本文作者：唐霜，转载请注明出处。么，但是实践上需要这样做，否则仍然还在使【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】用老版本的npm。

【原创不易，请尊重版权】【本文受版权保护】【未经授权禁止转载】

windows版最新的node自带了np【本文受版权保护】【原创不易，请尊重版权】m包管理工具，所以不需要另外在下载安装。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net但升级到最新版本的方法可以一样。

【关注微信公众号：wwwtangshua【本文受版权保护】【转载请注明来源】ngnet】【原创不易，请尊重版权】【未经授权禁止转载】【作者：唐霜】

安装git

git不算是node环境的东西，但是是安本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】装一些特定的npm包需要的必备武器。

【本文首发于唐霜的博客】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

$ sudo apt install git

安装python2.7 （可选）

最好还是安装一下python，可能会在后【本文受版权保护】本文作者：唐霜，转载请注明出处。面的一些插件中需要。当然，你也可以暂时先【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。不安装，到需要的时候再安装。

转载请注明出处：www.tangshua【本文首发于唐霜的博客】【作者：唐霜】ng.net未经授权，禁止复制转载。

$ sudo apt install python

安装bower （可不安装，扩展阅读）

什么是bower？bower也是包，但是【原创内容，转载请注明出处】【作者：唐霜】它和npm不同，npm管理的是node的本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】模块包，而bower是独立的各种软件包，【本文首发于唐霜的博客】【本文首发于唐霜的博客】比如jquery、bootstrap，它著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net们也可以通过npm来安装，也可以通过bo【本文受版权保护】【原创不易，请尊重版权】wer来安装。bower和npm之间有很著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】多人进行对比，其实没有必要，我感觉bow本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】er比较简单干净，不会将依赖打包到自己的【作者：唐霜】【转载请注明来源】包里，而npm包会把自己依赖的包打包在自【转载请注明来源】本文版权归作者所有，未经授权不得转载。己内部。

所以我在实践中，大部分浏览器端要用的包都【转载请注明来源】【转载请注明来源】用bower进行安装。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

原创内容，盗版必究。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ng.net【本文受版权保护】

$ npm install -g bower

注意，bower默认情况下不允许用roo【作者：唐霜】【原创内容，转载请注明出处】t用户去执行。不过一般ubuntu默认都转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】不是root用户。但是比较坑的是，在ub转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netuntu上面，有时候npm又得用root【原创不易，请尊重版权】【版权所有，侵权必究】去执行，这取决于文件的可写权限。所以你只【版权所有，侵权必究】【本文首发于唐霜的博客】需要记住，npm需要sudo，bower【本文受版权保护】本文作者：唐霜，转载请注明出处。不需要sudo就可以了。或许这也是我更喜【版权所有，侵权必究】【本文首发于唐霜的博客】欢用bower的原因。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua【转载请注明来源】本文作者：唐霜，转载请注明出处。ng.net

现在，你已经搭建好了node环境，你的n原创内容，盗版必究。转载请注明出处：www.tangshuang.netode环境里面还有npm和git，现在可【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】以随便写一个js文件，然后用node去执【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】行一下它试试。要退出node执行状态，【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。Ctrl+C就可以了。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

package.json

每一个node模块包都有一个packag【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】e.json，而我们在node环境下开发本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】项目，整个项目对于node而已，也是一个转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】包，所以也需要在我们的项目根目录下放一个【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。package.json文件。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

这篇文章，主要是来讲解package.j未经授权，禁止复制转载。原创内容，盗版必究。son的结构、主要字段和于gulp相关的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。地方。

未经授权，禁止复制转载。【本文受版权保护】

我们看一个package.json文件的【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net内容，它总是会包含这么一些内容：

{
  "name": "steerjs",
  "version": "1.0.0",
  "description": "a tool package to build your component more quickly",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tangshuang/steerjs.git"
  },
  "keywords": [
    "javascript",
    "component"
  ],
  "author": "frustigor",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/tangshuang/steerjs/issues"
  },
  "homepage": "https://github.com/tangshuang/steerjs#readme",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-preset-latest": "^6.16.0",
    "babel-register": "^6.18.0",
    "gulp": "^3.9.1"
  }
}

name 包的名称version 包的版本
description 包描述
main 入口文件，当require这个包名的时候，这个文件会被require进去。
repository 仓库信息
keywords 描述信息
author 作者信息
license 授权信息
bugs 如果其他人发现了bugs，应该怎么办homepage 包的主页地址
scripts 基于npm的脚本，例如上面这个，可以在命令行里，在这个包里面运行npm run test，就会显示一行字
dependencies 包依赖
devDependencies 包的开发依赖

script是比较高端的应用，现在已经有【转载请注明来源】【原创不易，请尊重版权】人在提倡使用npm script代替gu【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netlp，但是毕竟每个东西存在意义不一样。这本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。里不深究，有兴趣自己去学习。

【原创内容，转载请注明出处】原创内容，盗版必究。

dependencies和devDepe【原创不易，请尊重版权】【原创不易，请尊重版权】ndencies有什么区别？前者是上线以【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net后的产品也需要依赖，比如你发布了一个包，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】别人在npm install你的包的时候转载请注明出处：www.tangshuang.net【未经授权禁止转载】，dependencies里面的包也必须转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。被安装才可以。devDependenci【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netes里面的包则不需要在使用这个包的时候安【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。装。但是如果你是开发这个包的人，会把开发转载请注明出处：www.tangshuang.net原创内容，盗版必究。的时候需要用到的模块放在devDepen本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netdencies里面，这样你在开发的时候执著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。行npm install，所有的包都会安【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net装好。

这个可能一时好理解，我就举个例子：假如你【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。是开发一个jquery插件，你开发的时候著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net肯定需要像gulp、scss之类的辅助工本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】具进行打包压缩，你把gulp和scss相【本文受版权保护】【未经授权禁止转载】关的包放在devDependencies【未经授权禁止转载】【本文受版权保护】里，然后npm install，然后就可原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。以使用scss编译你写的scss文件。开原创内容，盗版必究。原创内容，盗版必究。发完了，你打算发布这个插件，但是发现这个【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。插件发布后，用户必须先安装jquery才著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net行，否则插件不能使用，所以你把jquer【本文受版权保护】【本文受版权保护】y放在dependencies。用户拿到【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】你的包之后，不需要gulp、scss，只转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。需要jquery就可以运行你的包。

【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ngnet】【关注微信公众号：wwwtangshua【作者：唐霜】【作者：唐霜】ngnet】

我们后面会不断的加入新的gulp插件，是【本文受版权保护】【原创不易，请尊重版权】不是要写到devDependencies【转载请注明来源】著作权归作者所有，禁止商业用途转载。里面去重新npm install呢？不需【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。要，我们可以通过命令还完成：

著作权归作者所有，禁止商业用途转载。【转载请注明来源】

$ npm install --save-dev gulp-minify

执行完之后再打开看package.jso【原创内容，转载请注明出处】【未经授权禁止转载】n文件，发现在devDependenci转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。es里面自动多了gulp-minify。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net–save和–s转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ave-dev的区别是，安装的时候，&#著作权归作者所有，禁止商业用途转载。【本文受版权保护】8211;save会把安装的新包加入到d【本文受版权保护】【作者：唐霜】ependencies，–s【作者：唐霜】未经授权，禁止复制转载。ave-dev则会加入devDepend原创内容，盗版必究。原创内容，盗版必究。encies。
【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【作者：唐霜】ang.net 另外，如果你打算npm uninsta【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ll，也要记得带上–save【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net[-dev]参数。

现在你已经了解了package.json【未经授权禁止转载】原创内容，盗版必究。，马上在你的项目目录下创建一个packa【转载请注明来源】转载请注明出处：www.tangshuang.netge.json吧。创建完之后直接运行np【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】m install会安装所有依赖的包，快转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】试试看！

gulp-cli

在快速入门一节已经讲了gulp和gulp【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】-cli的区别。在编程的世界里，大部分c未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。li都指代命令行的意思，gulp-cli【版权所有，侵权必究】【作者：唐霜】就是可以在命令行里面运行gulp命令，而【原创不易，请尊重版权】原创内容，盗版必究。纯粹的gulp并没有这个功能，它只能被r【未经授权禁止转载】【版权所有，侵权必究】equire，然后执行你规定的任务，但是【转载请注明来源】【版权所有】唐霜 www.tangshuang.net你可能根本看不到，只有gulp-cli才【未经授权禁止转载】【未经授权禁止转载】能帮助你在命令行操作gulp，并且还能看著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】到gulp的运行状况。

安装gulp-cli

很简单，直接用npm就可以安装：

转载请注明出处：www.tangshua【原创不易，请尊重版权】【本文受版权保护】ng.net【转载请注明来源】本文作者：唐霜，转载请注明出处。

$ npm install gulp-cli

安装好gulp-cli之后，只是代表你的【关注微信公众号：wwwtangshuangnet】【转载请注明来源】电脑拥有了命令行执行gulp任务的能力，原创内容，盗版必究。【版权所有，侵权必究】并不表示你可以马上运行gulp命令。要运【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。行命令还得你在自己的项目目录中，安装了g【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ulp模块，通过gulpfile.js创本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】建了gulp任务，才能在这个项目目录里运【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】行gulp命令，在其他目录里运行gulp转载请注明出处：www.tangshuang.net【版权所有，侵权必究】命令无效，会报错。

未经授权，禁止复制转载。【转载请注明来源】【未经授权禁止转载】

至于gulp-cli具体的用法，在CLI【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net一章详细讲。

CLI命令行

什么是CLI？它是command-lin【未经授权禁止转载】未经授权，禁止复制转载。e interface的缩写，中文翻译为【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net“命令行界面”，我们一般就直接用命令行代【本文受版权保护】【作者：唐霜】替了。DOS就是典型的命令行操作系统，早未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。期的unix和linux也是，后来lin【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ux用上了开源的桌面引擎，也具备了桌面系【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。统，不过仍然保留着CLI，特别是作为远程著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net服务器，通过CLI对服务器进行操作可以节本文作者：唐霜，转载请注明出处。原创内容，盗版必究。省网络宽带，可以快速完成一些任务。

原创内容，盗版必究。【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【未经授权禁止转载】ngnet】

安装gulp-cli

Gulp CLI就是说可以在命令行里面运原创内容，盗版必究。【原创不易，请尊重版权】行gulp相关的命令。这就依赖于gulp转载请注明出处：www.tangshuang.net【作者：唐霜】-cli，因此，我们必须先安装gulp-【转载请注明来源】原创内容，盗版必究。cli。
本文作者：唐霜，转载请注明出处。如果我们不会在命令行下使用gulp，也原创内容，盗版必究。【作者：唐霜】可以不用安装gulp-cli。但是如果我【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。们大部分情况下，还是在开发的时候通过gu【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】lp自动完成

我们想要的一些任务，所以我们大部分情况下本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。都会在命令行中执行gulp任务。

$ npm install -g gulp-cli

gulp-cli使用

gulp cli使用非常简单，在命令行里本文作者：唐霜，转载请注明出处。【未经授权禁止转载】可以这样输入：

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

$ gulp # 如果后面没有跟任务名称，就直接默认使用default这个任务
$ gulp my_task$ gulp one_task two_task

参数标记

原创内容，盗版必究。【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。et 获取更多精彩内容】

-v 或 –version 【本文受版权保护】【版权所有，侵权必究】会显示全局和项目本地所安装的 gulp 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】版本号

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ngnet】

–require modul【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。e_path 将会在执行之前 reqiu【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。re 一个模块。这对于一些语言编译器或者【版权所有，侵权必究】【原创内容，转载请注明出处】需要其他应用的情况来说来说很有用。你可以【本文首发于唐霜的博客】原创内容，盗版必究。使用多个–require

本文版权归作者所有，未经授权不得转载。

–gulpfile gulp【原创内容，转载请注明出处】【本文受版权保护】file_path 手动指定一个 gul【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。pfile 的路径，这在你有很多个 gu原创内容，盗版必究。【版权所有，侵权必究】lpfile 的时候很有用。这也会将 C转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。WD 设置到该 gulpfile 所在目【本文受版权保护】【本文受版权保护】录

未经授权，禁止复制转载。

原创内容，盗版必究。

–cwd dir_path 【原创不易，请尊重版权】原创内容，盗版必究。手动指定 CWD。定义gulpfile查原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。找的位置，此外，所有的相应的依赖（req本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netuire）会从这里开始计算相对路径

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

-T 或 –tasks 会显【版权所有，侵权必究】转载请注明出处：www.tangshuang.net示所指定 gulpfile 的 task转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】依赖树

【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【转载请注明来源】et 获取更多精彩内容】

【本文首发于唐霜的博客】

–tasks-simple 原创内容，盗版必究。【原创内容，转载请注明出处】会以纯文本的方式显示所载入的 gulpf【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ile 中的 task 列表

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netng.net

–color 强制 gulp本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】和 gulp 插件显示颜色，即便没有颜转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net色支持

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

–no-color 强制不显原创内容，盗版必究。【版权所有，侵权必究】示颜色，即便检测到有颜色支持

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

【原创不易，请尊重版权】

–silent 禁止所有的【作者：唐霜】转载请注明出处：www.tangshuang.netgulp 日志

【关注微信公众号：wwwtangshua【本文首发于唐霜的博客】【转载请注明来源】ngnet】

未经授权，禁止复制转载。

【未经授权禁止转载】

举个栗子：

$ gulp --gulpfile gulpfile.es6.js
$ gulp task
$ gulp --gulpfile gulpfile.js
$ gulp task

上面执行了两次gulp task任务，但【原创不易，请尊重版权】【转载请注明来源】是因为第一次和第二次对应的gulpfil未经授权，禁止复制转载。未经授权，禁止复制转载。e不同，在两个gulpfile里面，可能转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】task任务的具体内容不同，所以两次任务【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的执行结果也可能不一样。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ngnet】

使用自己的参数

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】

我知道你会想到一个问题，可不可以在执行g【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ulp任务的时候，传入参数？gulp默认转载请注明出处：www.tangshuang.net【转载请注明来源】并没有支持这项功能，但这并不代表我们不可本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】以做到，因为我们可以使用其他的包来得到命【未经授权禁止转载】【作者：唐霜】令行中的参数。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netngnet】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ng.net

在命令行中，一般短横线表示参数，但是不同【原创内容，转载请注明出处】未经授权，禁止复制转载。的软件不一样，比如下面这几种都经常看到：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ngnet】原创内容，盗版必究。

-v
--version-name 
my_name
--name my_name-name=my_name
--name=my_name

这些并没有统一的标准，但我个人而言，更倾【本文受版权保护】【版权所有】唐霜 www.tangshuang.net向于-v和–name=my_著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。name这两种，第一种是缩写，比如-v实著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】际上表示的是-version，但用-v可【原创不易，请尊重版权】【转载请注明来源】以更加简单，而且用一个短横线表示这个参数本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】不需要值。第二种是两个短横线加参数名加等本文作者：唐霜，转载请注明出处。【本文受版权保护】号加参数值，这种表达方法非常直观，普通人【作者：唐霜】著作权归作者所有，禁止商业用途转载。大部分都看得懂。基于这种想法，我使用了自【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】己写的process.args，你可以引用我写的这个模块，实现CLI参【本文受版权保护】【原创内容，转载请注明出处】数的风格。

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ngnet】

下面具体讲一下process.args的本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。使用方法：

【关注微信公众号：wwwtangshua【转载请注明来源】本文版权归作者所有，未经授权不得转载。ngnet】【本文受版权保护】

1）下载到本地

$ git clone https://github.com/tangshuang/process.args.git

2）在gulpfile.js文件中引用它

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

var args = require('./process.args')(true);
var gulp = require('gulp');
gulp.task('my_task',function() {
  if(args.d) {
    //...
  }
  
  if(!args.name) {
    console.log('There must be name.')
    return;
  }
  
  var name = args.name;
  
  console.log('Your name is ' + name);
});

【原创内容，转载请注明出处】【访问 www.tangshuang.n原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】

$ gulp my_task -d --name="Nicok"

gulpfile实例

gulpfile是什么呢？简单的说，它是未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】gulp命令的入口文件，当你在命令行里面【本文受版权保护】著作权归作者所有，禁止商业用途转载。执行glup my_task的时候，实际【未经授权禁止转载】转载请注明出处：www.tangshuang.net上可以理解为执行node gulpfil【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。e.js my_task，当然，这只是有【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】利于你理解，实际上比这复杂一些。

我们把这个gulpfile.js创建在项【作者：唐霜】【作者：唐霜】目的根目录下，这样就可以在项目中规定一些著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net我们自己的gulp任务，这些任务在gul【本文首发于唐霜的博客】【原创内容，转载请注明出处】pfile.js里面进行注册，即gulp【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】.task，这会在下一章API里面讲到。

【转载请注明来源】【转载请注明来源】

使用ES6

我们可以用gulpfile.babel.转载请注明出处：www.tangshuang.net原创内容，盗版必究。js代替gulpfile.js（直接重命【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】名即可），这样可以借助babel使用ES著作权归作者所有，禁止商业用途转载。【转载请注明来源】6新特性，不过我们也需要在项目中安装ba本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。bel：

【原创不易，请尊重版权】【作者：唐霜】【原创不易，请尊重版权】【访问 www.tangshuang.n【原创内容，转载请注明出处】【原创内容，转载请注明出处】et 获取更多精彩内容】

$ npm install --save-dev babel-core
$ npm install --save-dev babel-register
$ npm install --save-dev babel-preset-latest

{
  "presets": ["latest"]
}

这样，就可以在gulpfile中使用ES【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。6代码。

【本文受版权保护】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

部署项目任务

有的时候，我们的项目任务比较复杂，不可能【未经授权禁止转载】【转载请注明来源】通过一个gulpfile.js实现全部我【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】们想要的任务功能，否则会让这个文件超级大【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】。
【原创内容，转载请注明出处】这个时候，我们可能需要将不同的任务分到本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】不同的文件模块中去。我的做法是创建一个g【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ulp目录，把所有的任务分割成一个一个的【本文首发于唐霜的博客】【原创内容，转载请注明出处】，每一个文件一个任务：

【原创内容，转载请注明出处】【本文受版权保护】【本文受版权保护】

$ mkdir gulp/task$ vi gulp/task/add.js

在add.js中撰写任务流程。

var args = require('../../tools/process.args'); // 引入我们上一章中介绍的process.args
module.exports = function() {
  
  if(!args.name) {}
  
  ...};

然后再把add.js require到g【未经授权禁止转载】【原创内容，转载请注明出处】ulpfile中进行任务注册：

var gulp = require('gulp');
gulp.task('add',require('./gulp/task/add'));

是不是已经有点感觉了，赶紧手动尝试一下吧【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。。
原创内容，盗版必究。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

转载请注明出处：www.tangshua【原创不易，请尊重版权】原创内容，盗版必究。ng.net著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】未经授权，禁止复制转载。

任务

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

创建任务

上一章已经讲到，单凭一个gulpfile本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】是无法完成整个gulp流程管理的，大多数【本文受版权保护】【作者：唐霜】时候，我们都通过创建一堆有联系的、以gu【原创不易，请尊重版权】【转载请注明来源】lpfile为入口的js代码，以此构建复原创内容，盗版必究。原创内容，盗版必究。杂的gulp管理体系。

在gulp任务体系代码中这样进行任务的注【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】册：

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

gulp.task('my_task',require('./tasks/my_task.js'));

这样就创建好了一个gulp任务，在命令行【本文首发于唐霜的博客】【原创内容，转载请注明出处】中，执行

【转载请注明来源】本文作者：唐霜，转载请注明出处。【转载请注明来源】

$ gulp my_task

require的那个脚本中的模块就会被执【本文受版权保护】【作者：唐霜】行。

未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】

未经授权，禁止复制转载。原创内容，盗版必究。【关注微信公众号：wwwtangshua【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ngnet】

var gulp = require('glup');module.exports = function() {
  
  // do your task};

【作者：唐霜】本文作者：唐霜，转载请注明出处。

如何和你的项目结合

但是讲了这么多，你可能还没搞清楚，你用g【未经授权禁止转载】原创内容，盗版必究。ulp到底为什么。实际上，gulp根本不【本文受版权保护】【关注微信公众号：wwwtangshuangnet】是你的目标，你只是在开发你自己的项目的时转载请注明出处：www.tangshuang.net原创内容，盗版必究。候，把gulp作为一个工具，而不是为了写本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】一大堆gulp任务，你的项目才是主，gu【本文首发于唐霜的博客】【本文受版权保护】lp只是辅助。举个栗子吧，你的项目里面会【转载请注明来源】本文作者：唐霜，转载请注明出处。不断的用一个模板去生成新的文件，但是每一原创内容，盗版必究。转载请注明出处：www.tangshuang.net次生成的时候，都因为传入的参数不同而不同【作者：唐霜】原创内容，盗版必究。。利用gulp就可以实现这个目的，在上面【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。的function里面写上读取模板、构建【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】参数替换、输出到具体的文件等流程，这样就【原创不易，请尊重版权】【本文受版权保护】实现了这个目的，但是最终，gulp这些东著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。西跟用户没关系，只有那些重复生成的文件才原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是用户最后要用的。

gulp比较厉害的，是可以自动去执行一些原创内容，盗版必究。转载请注明出处：www.tangshuang.net代码，后面一章我们会具体将gulp的ap原创内容，盗版必究。【作者：唐霜】i，这一章我们主要讲你应该怎么使用api【转载请注明来源】本文作者：唐霜，转载请注明出处。，知道怎么使用了，下一章再知道都有哪些a本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】pi，将快速掌握gulp。

pipe（管道）这个概念

gulp里面有一个非常有名的概念，叫“管【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】道”，也就是pipe，但它不直接作用于g原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ulp，而是要作用于其他结果上。

pipe是node中的一个概念，可以处理未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netStream，而gulp.src这个ap原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。i恰巧输出的是vinyl files的s著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nettream，因此可以用pipe来进行处理【原创内容，转载请注明出处】原创内容，盗版必究。。
【本文首发于唐霜的博客】 pipe是gulp和grunt的一个重【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。大区别，关于两则的区别，会在专门的章节讲本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。到。它就像一根一根的管道，东西从这个口进转载请注明出处：www.tangshuang.net原创内容，盗版必究。去，下个口出来，样子就变了，再进入下一个【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。管道，出来又继续变，所以gulp里面的经【本文首发于唐霜的博客】未经授权，禁止复制转载。典用法如下：

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【未经授权禁止转载】

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

这个pipe可以连续不断的使用，前面一个【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。pipe处理之后的结果，将作为下一个pi【版权所有，侵权必究】未经授权，禁止复制转载。pe处理的开端。取出.pipe(gulp【转载请注明来源】本文作者：唐霜，转载请注明出处。.dest(‘./build【作者：唐霜】著作权归作者所有，禁止商业用途转载。/xxx’))这一节管道来讲【原创不易，请尊重版权】【作者：唐霜】一下：

未经授权，禁止复制转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【转载请注明来源】

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】

再来说下pipe(minify())这个【转载请注明来源】原创内容，盗版必究。管道，minify来自一个gulp插件，未经授权，禁止复制转载。【转载请注明来源】需要在项目中执行npm install 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netgulp-minify-css R【本文受版权保护】著作权归作者所有，禁止商业用途转载。11;save-dev。这根管道都干了什著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】么呢？将上一个pipe的结果（被放在了内【未经授权禁止转载】转载请注明出处：www.tangshuang.net存中）交给minify这个插件，插件处理【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。完之后，就进入下一个管道。

逻辑处理

当然了，gulp不是只能用管道来进行处理【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。的，你也可以自己处理，比如：

原创内容，盗版必究。未经授权，禁止复制转载。【作者：唐霜】【原创不易，请尊重版权】

module.exports = function() {
  copy(from,to);
  minify(from,to);
};

上面的copy, minify是我自己乱【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net写的两个函数，只是为了说明，你可以不用g未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ulp的api也可以使用简单的js逻辑代本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net码完成任务，只不过后面你学到watch的【本文受版权保护】【本文受版权保护】时候，就会考虑使用gulp。

原创内容，盗版必究。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】原创内容，盗版必究。

现在动手写一个操作文件的gulp任务吧。
【访问 www.tangshuang.n【未经授权禁止转载】【版权所有，侵权必究】et 获取更多精彩内容】【关注微信公众号：wwwtangshua【作者：唐霜】【原创内容，转载请注明出处】ngnet】【转载请注明来源】【本文首发于唐霜的博客】

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

下一章介绍gulp的api。

本文作者：唐霜，转载请注明出处。【转载请注明来源】

API

这一章介绍gulp的所有api，现在来看转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，gulp的api一共就4个：gulp.【版权所有，侵权必究】【原创内容，转载请注明出处】src, gulp.dest, gulp未经授权，禁止复制转载。原创内容，盗版必究。.task, gulp.watch. 之【作者：唐霜】原创内容，盗版必究。前还有gulp.run等api，可以用来【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在一个task中去触发另外一个task，【原创不易，请尊重版权】【版权所有，侵权必究】但是现在这个api被去掉了，因为有了新的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】依赖替代方案，在讲gulp.task这一【转载请注明来源】【版权所有】唐霜 www.tangshuang.net节的时候会详细去说。

gulp.src 获得所有符合条件的文件【版权所有】唐霜 www.tangshuang.net【作者：唐霜】信息

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

未经授权，禁止复制转载。

gulp.dest 将信息输出到某个文件

【原创内容，转载请注明出处】

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

gulp.task 注册一个gulp任务

【本文首发于唐霜的博客】

【本文受版权保护】

gulp.watch 监听文件变化

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

gulp.src

输出（Emits）符合所提供的匹配模式（本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。glob）或者匹配模式的数组（array本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】 of globs）的文件。将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

转载请注明出处：www.tangshua【转载请注明来源】著作权归作者所有，禁止商业用途转载。ng.net【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

用法

gulp.src(globs[, options])

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

参数

globs

描述：所要读取的 glob 或者包含 g【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】lobs 的数组。
本文版权归作者所有，未经授权不得转载。类型： String 或 Array
【关注微信公众号：wwwtangshua【作者：唐霜】本文作者：唐霜，转载请注明出处。ngnet】 glob 请参考 node-glob 语法或者，你也可以直接写文件的路径。

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

options

描述：通过 glob-stream 所传【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net递给 node-glob 的参数。
未经授权，禁止复制转载。类型： Object

除了 node-glob 和 glob-stream 所支持的参数外，gulp 增加了一些额外转载请注明出处：www.tangshuang.net【本文受版权保护】的选项参数：

options.buffer

【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ang.net【版权所有】唐霜 www.tangshu【本文受版权保护】【版权所有】唐霜 www.tangshuang.netang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【本文首发于唐霜的博客】ang.net

描述：是否返回buffer，或者说是返回【原创内容，转载请注明出处】【原创不易，请尊重版权】buffer（true）还是返回file【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。_contents（false）。
【原创不易，请尊重版权】类型： Boolean
本文作者：唐霜，转载请注明出处。默认值： true

如果该项被设置为 false，那么将会以著作权归作者所有，禁止商业用途转载。【本文受版权保护】 stream 方式返回 file.co【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ntents 而不是文件 buffer 转载请注明出处：www.tangshuang.net【未经授权禁止转载】的形式。这在处理一些大文件的时候将会很有【本文受版权保护】【版权所有，侵权必究】用。注意：插件可能并不会实现对 stre【原创内容，转载请注明出处】【未经授权禁止转载】am 的支持。

转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ng.net著作权归作者所有，禁止商业用途转载。

options.read

描述：是否去读取文件的内容。
转载请注明出处：www.tangshua【原创内容，转载请注明出处】【未经授权禁止转载】ng.net 类型： Boolean
【版权所有】唐霜 www.tangshu【转载请注明来源】【作者：唐霜】ang.net 默认值： true

【转载请注明来源】【原创不易，请尊重版权】【作者：唐霜】转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【转载请注明来源】ng.net

如果该项被设置为 false，那么 f转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ile.contents 会返回空值（n本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ull），也就是并不会去读取文件。

options.base

转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ng.net【访问 www.tangshuang.n【转载请注明来源】著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】

描述：重新指定src的base，不好理解转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，具体看下面的解释。
【关注微信公众号：wwwtangshua【作者：唐霜】【原创内容，转载请注明出处】ngnet】类型： String
原创内容，盗版必究。默认值：将会加在 glob 之前 (【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】请看 glob2base)

【作者：唐霜】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

gulp.src('client/js/**/*.js')

上面匹配的结果是什么呢？会得到两个文件的原创内容，盗版必究。【作者：唐霜】路径和内容，路径是client/js/s【作者：唐霜】【原创不易，请尊重版权】omedir/1.js和client/j【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】s/somedir/2.js，但对于gu【版权所有，侵权必究】转载请注明出处：www.tangshuang.netlp而言，这个时候的base是clien【转载请注明来源】本文作者：唐霜，转载请注明出处。/js/，也就是glob开始匹配之前的字【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net符串。

如果不规定options.base，那么原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】在后面的pipe中，就会以options未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。.base=’client/【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netjs/’进行处理，比如我们在【本文受版权保护】【版权所有】唐霜 www.tangshuang.net末尾执行.pipe(gulp.dest(【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。‘dist/name/转载请注明出处：www.tangshuang.net【版权所有，侵权必究】217;))，那么会得到两个文件：dis本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】t/name/somedir/1.js和【原创内容，转载请注明出处】【本文受版权保护】dist/name/somedir/2.本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】js。

gulp.src('client/js/**/*.js',{
  base: 'client'
}).pipe(gulp.dest('dist/name'))

这样就可以得到想要的结果。

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ng.net【未经授权禁止转载】未经授权，禁止复制转载。【转载请注明来源】

它这里面就有一个相对路径的感觉，比如它找【未经授权禁止转载】原创内容，盗版必究。到了client/js/somedir/【版权所有，侵权必究】原创内容，盗版必究。1.js，但是你设置了base字段为cl未经授权，禁止复制转载。原创内容，盗版必究。ient，所以它就会把client这个目【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net录层级从client/js/somedi未经授权，禁止复制转载。【本文首发于唐霜的博客】r/1.js中移除，剩下的部分就是js/本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。somedir/1.js，把这个部分放到转载请注明出处：www.tangshuang.net【未经授权禁止转载】dest规定的目录中去。

【本文受版权保护】未经授权，禁止复制转载。原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

gulp.dest

能被 pipe 进来（实际上，只能在pi【作者：唐霜】著作权归作者所有，禁止商业用途转载。pe中使用，因为它没有参数用于传入文件来著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。源），并且将会写文件。并且重新输出（em【原创内容，转载请注明出处】【原创不易，请尊重版权】its）所有数据，因此你可以将它 pip【本文受版权保护】【版权所有】唐霜 www.tangshuang.nete 到多个文件夹。如果某文件夹不存在，将【本文受版权保护】【本文首发于唐霜的博客】会自动创建它。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】

用法

gulp.dest(path[, options])

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

参数

path

描述：要输出到哪个目录中。
未经授权，禁止复制转载。类型： String or Funct著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ion

文件将被写入的路径（输出目录）。也可以传原创内容，盗版必究。【原创内容，转载请注明出处】入一个函数，在函数中返回相应路径，这个函【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】数也可以由 vinyl 文件实例来提供【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。。
【原创不易，请尊重版权】文件被写入的路径是以所给的相对路径根据原创内容，盗版必究。【本文受版权保护】所给的目标目录计算而来。类似的，相对路径【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。也可以根据所给的 base 来计算。请未经授权，禁止复制转载。【作者：唐霜】查看上述的 gulp.src 来了解更多转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】信息。

【本文首发于唐霜的博客】【访问 www.tangshuang.n【本文首发于唐霜的博客】【原创不易，请尊重版权】et 获取更多精彩内容】【原创内容，转载请注明出处】原创内容，盗版必究。

options

描述：传入一些附加参数
【未经授权禁止转载】类型： Object

options.cwd

描述：以哪个目录作为输出的当前目录。
【版权所有，侵权必究】类型： String
【原创内容，转载请注明出处】默认值： process.cwd() 原创内容，盗版必究。【转载请注明来源】（命令执行时所在的目录，一般而言，是gu【本文首发于唐霜的博客】原创内容，盗版必究。lpfile所在的目录）

【转载请注明来源】【转载请注明来源】

.pipe(gulp.dest('dist',{
  cwd: 'components/'
}))

options.mode

未经授权，禁止复制转载。转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ng.net【原创内容，转载请注明出处】未经授权，禁止复制转载。

描述：八进制权限字符，用以定义所有在输出【转载请注明来源】本文版权归作者所有，未经授权不得转载。目录中新创建的目录的权限。
原创内容，盗版必究。类型： String
转载请注明出处：www.tangshua【原创内容，转载请注明出处】原创内容，盗版必究。ng.net 默认值： 0777

【转载请注明来源】【原创内容，转载请注明出处】【原创不易，请尊重版权】【作者：唐霜】

gulp.task

定义一个使用 Orchestrator 实现的任务（task）。

我看了一下Orchestrator，感觉未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。它就是一个专门处理任务的模块，gulp应【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。该是用了它的部分功能。它在task的功能本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。上，比gulp.task齐全，可以add原创内容，盗版必究。【原创不易，请尊重版权】, start, stop, hasTa转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】sk, on, onAll这些api。玩【转载请注明来源】转载请注明出处：www.tangshuang.net儿过jquery的对on的机制应该都不陌【转载请注明来源】【版权所有】唐霜 www.tangshuang.net生。但是gulp.task感觉只是它的a【原创内容，转载请注明出处】【本文首发于唐霜的博客】dd功能。

原创内容，盗版必究。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

用法

gulp.task(name[, deps], fn)

gulp.task('somename', function() {
  // 做一些事
});

参数

name

描述：任务的名字，如果你需要在命令行中运著作权归作者所有，禁止商业用途转载。【作者：唐霜】行你的某些任务，那么，请不要在名字中使用【本文受版权保护】【未经授权禁止转载】空格。
【未经授权禁止转载】类型：String

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【未经授权禁止转载】

deps

描述：一个包含任务列表的数组，这些任务会本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】在你当前任务运行之前完成。
【未经授权禁止转载】类型： Array

转载请注明出处：www.tangshua【转载请注明来源】原创内容，盗版必究。ng.net转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ng.net

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

注意：你的任务是否在这些前置依赖的任务【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】完成之前运行了？请一定要确保你所依赖的任【转载请注明来源】【作者：唐霜】务列表中的任务都使用了正确的异步执行方式【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。：使用一个 callback，或者返回一未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】个 promise 或 stream。

【未经授权禁止转载】【本文首发于唐霜的博客】

fn

描述：该函数定义任务所要执行的一些操作。
转载请注明出处：www.tangshua未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ng.net 类型：Function

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

【转载请注明来源】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

异步任务支持

任务可以异步执行，如果 fn 能做到以下【未经授权禁止转载】【原创不易，请尊重版权】其中一点：

【转载请注明来源】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】ng.net

接受一个 callback

【本文受版权保护】

【转载请注明来源】

// 在 shell 中执行一个命令var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

返回一个 stream

【原创不易，请尊重版权】

【本文首发于唐霜的博客】

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个 promise

【本文受版权保护】

【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

var Q = require('q');
gulp.task('somename', function() {
  var deferred = Q.defer();
  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);
  return deferred.promise;
});

Promise是javascript中一【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net个非常重要的概念，如果你不知道的话，可以【本文受版权保护】【作者：唐霜】阅读一下我写过的一篇文章有一个基本的概念。

【本文首发于唐霜的博客】原创内容，盗版必究。

注意：默认的，task 将以最大的并发【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。数执行，也就是说，gulp 会一次性运行【转载请注明来源】【未经授权禁止转载】所有的 task 并且不做任何等待。如果【转载请注明来源】【版权所有】唐霜 www.tangshuang.net你想要创建一个序列化的 task 队列，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net并以特定的顺序执行，你需要做两件事：

未经授权，禁止复制转载。【访问 www.tangshuang.n【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】

给出一个提示，来告知 task 什么时候【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】执行完毕，

【未经授权禁止转载】

转载请注明出处：www.tangshua【本文受版权保护】本文版权归作者所有，未经授权不得转载。ng.net

并且再给出一个提示，来告知一个 task【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。依赖另一个 task 的完成。

转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ng.net

【本文受版权保护】

【本文首发于唐霜的博客】

对于这个例子，让我们先假定你有两个 ta原创内容，盗版必究。未经授权，禁止复制转载。sk，”one”【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。和 “two”未经授权，禁止复制转载。【本文首发于唐霜的博客】，并且你希望它们按照这个顺序执行：

在 “one” 【转载请注明来源】转载请注明出处：www.tangshuang.net中，你加入一个提示，来告知什么时候它会完【未经授权禁止转载】本文作者：唐霜，转载请注明出处。成：可以再完成时候返回一个 callba著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ck，或者返回一个 promise 或原创内容，盗版必究。原创内容，盗版必究。stream，这样系统会去等待它完成。

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

本文版权归作者所有，未经授权不得转载。

在 “two” 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。中，你需要添加一个提示来告诉系统它需要依【本文首发于唐霜的博客】【未经授权禁止转载】赖第一个 task 完成。

【转载请注明来源】

【作者：唐霜】

因此，这个例子的实际代码将会是这样：

原创内容，盗版必究。【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

var gulp = require('gulp');
// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
  
  // 做一些事 -- 异步的或者其他的
  
  cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});
// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
  // 'one' 完成后
});
gulp.task('default', ['one', 'two']);

其实简单的说，就是虽然在default这【转载请注明来源】原创内容，盗版必究。个任务中，one和two是不分顺序的，但原创内容，盗版必究。【未经授权禁止转载】是在two这个任务中，需要依赖one这个未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】任务，所以实际上，当default中的o【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netne和two同时开始执行的时候，two并【原创内容，转载请注明出处】【原创内容，转载请注明出处】不会马上执行，而是要等到one执行的ok【本文受版权保护】【版权所有】唐霜 www.tangshuang.net的时候再执行。

回调函数

上面的例子中，多次出现了cb这个回调函数转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，它是用来干嘛的，代表什么？

其实这个回调函数并不做任何操作意义上的事未经授权，禁止复制转载。原创内容，盗版必究。，而是用来通知gulp这个task完成了未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net，不管完成的怎么样，任务已经可以被忽略了【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net。我更愿意把它称为done(fail)，【本文受版权保护】本文版权归作者所有，未经授权不得转载。其中的参数如果是null或undefin【转载请注明来源】著作权归作者所有，禁止商业用途转载。ed，则表示成功了，否则表示失败了，里面【作者：唐霜】【原创不易，请尊重版权】的内容就是告诉gulp失败的信息。

【作者：唐霜】【作者：唐霜】【原创不易，请尊重版权】

gulp.task('my_task',function(done){
  var data = request();
  if(data.error) {
    done(data.msg)
  }
  else {
    done();
  }
  
  // .. other code ..
});

在done()后面其实还可以执行其他的代【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】码，因为done不是return，程序不未经授权，禁止复制转载。【未经授权禁止转载】会停止执行。但是对于gulp.task而本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】言，它已经接收到任务执行情况的信息了，后未经授权，禁止复制转载。【转载请注明来源】面的执行对它来说没什么意义，随便你怎么做转载请注明出处：www.tangshuang.net【未经授权禁止转载】都可以。

【本文受版权保护】【本文首发于唐霜的博客】

这也就是为什么上面说如果要让b任务依赖a著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】任务，要给ａ任务传一个done作为回调函【转载请注明来源】【原创不易，请尊重版权】数的原因。因为当b任务开始被执行时，其实著作权归作者所有，禁止商业用途转载。【作者：唐霜】先是等待状态，要让a先执行，但是等待归等【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。待，你总得告诉我什么时候开始执行吧，这个未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。“告诉”动作就是done函数，只要在任务【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】执行过程中执行了done函数，就相当于告转载请注明出处：www.tangshuang.net【作者：唐霜】诉b可以开始执行了。

ok，关于gulp的task这个api就【本文首发于唐霜的博客】未经授权，禁止复制转载。介绍完了，赶紧去自己实践一下。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】【作者：唐霜】

gulp.watch

转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【作者：唐霜】ng.net原创内容，盗版必究。【本文受版权保护】

用法

gulp.watch(glob [, opts], tasks)gulp.watch(glob [, opts, cb])

它有两种用法，下面分开讲解。

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ng.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【关注微信公众号：wwwtangshua【作者：唐霜】转载请注明出处：www.tangshuang.netngnet】

gulp.watch(glob[, opts], tasks)

监听（单个或多个）文件的变动，一旦有变，【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】就执行规定的task，这些task是通过原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】gulp.task注册的。

glob

描述：要监听的文件。
著作权归作者所有，禁止商业用途转载。类型： String or Array
本文作者：唐霜，转载请注明出处。一个 glob 字符串，或者一个包含多本文版权归作者所有，未经授权不得转载。【转载请注明来源】个 glob 字符串的数组，用来指定具体转载请注明出处：www.tangshuang.net【本文受版权保护】监控哪些文件的变动。

【转载请注明来源】著作权归作者所有，禁止商业用途转载。

opts

类型： Object

【原创内容，转载请注明出处】【原创不易，请尊重版权】

【转载请注明来源】【访问 www.tangshuang.n【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【转载请注明来源】【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ngnet】

从使用上看，我还没有看到怎么用opts这【本文受版权保护】【版权所有，侵权必究】个参数，好像大部分情况都不会用到。我感觉【转载请注明来源】【本文受版权保护】应该是指在什么情况下才执行tasks，比【作者：唐霜】【未经授权禁止转载】如只有在文件被删除的情况下执行task，本文作者：唐霜，转载请注明出处。【转载请注明来源】或者在文件被修改或删除的时候执行。总之我【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。感觉这个opts是用来填写下面的even【转载请注明来源】【版权所有】唐霜 www.tangshuang.nett.type的。

【本文首发于唐霜的博客】【作者：唐霜】【原创不易，请尊重版权】

tasks

描述：要执行的任务列表
【未经授权禁止转载】类型： Array
【原创不易，请尊重版权】需要在文件变动后执行的一个或者多个通过【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】 gulp.task() 创建的 tas【原创不易，请尊重版权】【原创内容，转载请注明出处】k 的名字，

未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netngnet】

gulp.watch('js/**/*.js', ['uglify','reload']);

上面这个动作会监听js目录下的js脚本的未经授权，禁止复制转载。【转载请注明来源】变动，一旦变动了，就会执行uglify,【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】 reload这两个任务。

【转载请注明来源】【本文受版权保护】【原创不易，请尊重版权】

gulp.watch(glob[, opts, callback])

监听（单个或多个）文件的变动，一旦有变，【原创内容，转载请注明出处】原创内容，盗版必究。就执行callback这个回调函数。

转载请注明出处：www.tangshua【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ng.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

glob

描述：要监听的文件。
转载请注明出处：www.tangshua【本文受版权保护】【本文首发于唐霜的博客】ng.net 类型： String or Array
【原创不易，请尊重版权】一个 glob 字符串，或者一个包含多【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。个 glob 字符串的数组，用来指定具体【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。监控哪些文件的变动。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

opts

类型： Object
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ang.net 传给 gaze 的参数。

callback(event)

描述：文件变动时要执行的回调函数。
【访问 www.tangshuang.n【原创内容，转载请注明出处】【本文受版权保护】et 获取更多精彩内容】类型： Function

【本文受版权保护】未经授权，禁止复制转载。原创内容，盗版必究。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

event.type

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创内容，转载请注明出处】

类型： String
未经授权，禁止复制转载。发生的变动的类型：added, cha【本文受版权保护】著作权归作者所有，禁止商业用途转载。nged 或者 deleted。

event.path

类型： String
本文作者：唐霜，转载请注明出处。触发了该事件的文件的路径。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

gulp.watch的返回值

gulp.watch的返回值是一个可以被【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】监听的发射器，什么叫“可以被监听”，就是【转载请注明来源】未经授权，禁止复制转载。可以用on去挂载监听事件的回调函数，例如【转载请注明来源】【关注微信公众号：wwwtangshuangnet】：

原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】原创内容，盗版必究。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

回调函数会在change事件的末尾执行。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net回调函数的event和上面的event是原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】一样的。实际上，我们采用gulp.wat原创内容，盗版必究。【转载请注明来源】ch(files,function(e)【版权所有，侵权必究】【版权所有，侵权必究】{})和用on再去挂载是差不多的。

gulp.watch是作为一个自动化控制未经授权，禁止复制转载。【未经授权禁止转载】的最主要的特性，也是提高我们工作效率的重本文作者：唐霜，转载请注明出处。【作者：唐霜】要助手，应该多写一些例子来锻炼一下。

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ng.net未经授权，禁止复制转载。

插件的使用

转载请注明出处：www.tangshua未经授权，禁止复制转载。原创内容，盗版必究。ng.net未经授权，禁止复制转载。原创内容，盗版必究。

由于篇幅的限制，本章不会对每一个插件最非【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。常详细的介绍，作为开发者，最好的办法就是【作者：唐霜】【本文首发于唐霜的博客】去插件的主页或github查看原始文档，转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】甚至通过阅读源码来了解插件原理，从而更好转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的使用插件。

概念

【访问 www.tangshuang.n【作者：唐霜】【作者：唐霜】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

gulp插件，其实还是一个npm包，只不【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。过这个npm包是提供给gulp用的，但不【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net一定要依赖gulp。gulp比grunt【原创内容，转载请注明出处】【原创不易，请尊重版权】有一点好处就是，gulp是干净的，本身只原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。有几个并不强大的api，借助管道机制，不【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。需要繁琐的配置。插件是决定gulp功能强未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net大的机制。
转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文受版权保护】ng.net 插件从功能上讲，就是对原始体系的补充。

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

但是从npm包的角度而言，并不是只有gu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】lp插件可以用到gulp中，所有的包都可转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】以用进来，只要它可以在node环境中运行【本文首发于唐霜的博客】原创内容，盗版必究。，你都可以require到gulpfil【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】e的体系里面使用。

【原创不易，请尊重版权】【转载请注明来源】【本文受版权保护】

到哪里去找插件

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ngnet】

继续往下读，我会带你一点点了解怎么使用插【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】件，大部分情况下都是熟能生巧，多用用，插【本文受版权保护】【作者：唐霜】件的东西就心领神会了。
原创内容，盗版必究。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【未经授权禁止转载】【原创不易，请尊重版权】

使用插件通用性方法

大部分插件是以管道内的处理方法使用的。什著作权归作者所有，禁止商业用途转载。【本文受版权保护】么叫“管道内”？就是作为参数传给.pip转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。e。

gulp.src(xxx).pipe(plugin)...

我们来举例子：gulp-uglify

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

$ npm install --save-dev gulp-uglify

然后在gulpfile体系的js中这样使未经授权，禁止复制转载。【转载请注明来源】用：

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

var gulp = require('gulp');var uglify = require('gulp-uglify');
gulp.task('my_task',function(){
  gulp.src('js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'));
});

原创内容，盗版必究。【本文受版权保护】

在使用的时候，大部分情况都是直接把这个函原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。数作为pipe()的参数传入即可。

【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ngnet】【作者：唐霜】【未经授权禁止转载】

知道怎么用，实际上也就知道了一般插件应该【原创内容，转载请注明出处】【本文首发于唐霜的博客】怎么去开发，无非就是接收pipe传入的内原创内容，盗版必究。本文作者：唐霜，转载请注明出处。容，把结果返回给pipe输出。

js预编译

我们通常写js都是写符合ES标准的Jav著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netaScript代码，但是就像其他语言一样本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，我们可以用其他语言来写代码，再通过编译本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】得到可以被执行的js代码，借助一些解释器【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，可以不用编译为js就可以直接执行。目前转载请注明出处：www.tangshuang.net【转载请注明来源】比较知名的有CoffeeScript和T【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netypeScript，Coffee比较成熟【版权所有，侵权必究】【转载请注明来源】，而且借鉴了声明式和ruby的很多风格，著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】TypeScript是微软开发的，这两年【作者：唐霜】【原创不易，请尊重版权】刚热，不够成熟，但是据说谷歌用TypeS本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】cript写了angular2.0，这可未经授权，禁止复制转载。【版权所有，侵权必究】能将推动TypeScript超越Coff【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ee。

未经授权，禁止复制转载。原创内容，盗版必究。

gulpfile.coffee

【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ngnet】【作者：唐霜】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

$ npm install coffee-script --save-dev

gulp-coffee

这是gulp的一个插件，它是用来把你项目转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net里面的.coffee文件编译为.js文件【作者：唐霜】原创内容，盗版必究。的。

【关注微信公众号：wwwtangshua【转载请注明来源】【原创不易，请尊重版权】ngnet】原创内容，盗版必究。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

npm install gulp-coffee --save-dev

文档：https://github.com/c转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netontra/gulp-coffee
【作者：唐霜】使用：

var coffee = require('gulp-coffee');
gulp.src('./coffee/*.coffee')
  .pipe(coffee())
  .pipe(gulp.dest('./js/'))

看上去非常好用。如果你不使用coffee未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】写代码，可能也用不上。

js压缩

【原创不易，请尊重版权】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

gulp-uglify

这个插件是gulp里面最常用来压缩js文【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】件的

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netng.net

$ npm install gulp-uglify --save-dev

var uglify = require('gulp-uglify');
glup.src('...')
  
  .pipe(uglify())
  
  .pipe(gulp.dest(...))

这样就可以把你写的代码压缩到目录中去了。

【关注微信公众号：wwwtangshua【作者：唐霜】【原创不易，请尊重版权】ngnet】本文版权归作者所有，未经授权不得转载。【转载请注明来源】

gulp-rename

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】原创内容，盗版必究。

这个插件可以重命名文件

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】原创内容，盗版必究。

$ npm install gulp-rename --save-dev

var gulp = require('gulp'); // 基础库
var uglify = require('gulp-uglify'), // js压缩
  rename = require('gulp-rename'); // 文件重命名
gulp.task('script', function() {
  return gulp.src('src/js/*.js') // 指明源文件路径、并进行文件匹配
    .pipe(rename({ suffix: '.min' })) // 重命名
    .pipe(uglify({ preserveComments:'some' })) // 使用uglify进行压缩，并保留部分注释
    .pipe(gulp.dest('dist/js')); // 输出路径
});

结合uglify，我们可以非常方便的就实【转载请注明来源】本文作者：唐霜，转载请注明出处。现了生成min.js。

后面我们还会讲到将多个文件合并为一个文件【本文受版权保护】【本文受版权保护】。

css预编译

前面讲了js的预编译，情况差不多，我们也本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net可以通过其他语言先写出一种程序，在编译成【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】css提供给浏览器使用。

【原创不易，请尊重版权】转载请注明出处：www.tangshua【作者：唐霜】【原创不易，请尊重版权】ng.net

【原创内容，转载请注明出处】【原创不易，请尊重版权】原创内容，盗版必究。

gulp-less

文档：https://www.npmjs.co转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netm/package/gulp-less

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

把.less编译成.css，如果你在自己转载请注明出处：www.tangshuang.net【作者：唐霜】的项目里面是使用.less写的样式，那么【作者：唐霜】【原创不易，请尊重版权】可以使用这个插件。

【原创内容，转载请注明出处】【原创不易，请尊重版权】

$ npm install gulp-less --save-dev

var less = require('gulp-less');
var path = require('path');
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

gulp-sass

文档：https://www.npmjs.co未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。m/package/gulp-sass

【访问 www.tangshuang.n未经授权，禁止复制转载。【原创内容，转载请注明出处】et 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshua【作者：唐霜】本文作者：唐霜，转载请注明出处。ngnet】

把.sass编译成.css

npm install gulp-sass --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp-scss

用法其实一样，只不过是专门针对.scss著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】的，其实.sass和.scss是一个东西【关注微信公众号：wwwtangshuangnet】【作者：唐霜】，可以被同一个编译器编译，所以实际上上面【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的是gulp-sass也应该是可以编译.【本文受版权保护】原创内容，盗版必究。scss的。

原创内容，盗版必究。【关注微信公众号：wwwtangshua【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【原创内容，转载请注明出处】

【本文受版权保护】【作者：唐霜】

gulp-ruby-sass

安装sass的一些问题

【转载请注明来源】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

sass是基于ruby的，也就是说你的电【转载请注明来源】【版权所有】唐霜 www.tangshuang.net脑上得安装ruby。安装的时候还要在你的【转载请注明来源】【原创内容，转载请注明出处】系统环境变量中加入ruby的PATH。在著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】windows上安装node-sass也著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。是个经常被吐槽的事情。可以使用淘宝镜像安本文版权归作者所有，未经授权不得转载。【本文受版权保护】装，具体看这里。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

文件合并

写完js之后，想把他们合并为一个文件。

【原创内容，转载请注明出处】转载请注明出处：www.tangshua【转载请注明来源】转载请注明出处：www.tangshuang.netng.net

gulp-concat

npm install --save-dev gulp-concat

用法

concat([string],[object])

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

参数

string

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ng.net

object

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

{
  cwd: '', // 相对位置
  newLine: ';', // 换行的时候添加
  path: 'xxx.js', // 输出文件
  stat: {
    mode: 0666 // 文件的权限
  }
}

举个例子：

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat({ path: 'new.js', stat: { mode: 0666 }}))
    .pipe(gulp.dest('./dist'));
});

gulp-sourcemaps

这是一个生成Source maps的插件【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】，当我们把多个文件合并为一个文件的时候，原创内容，盗版必究。【本文首发于唐霜的博客】应该提供.map，这样浏览器可以找到原始【转载请注明来源】【本文受版权保护】的文件，有利于后期调试。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

css压缩

写完CSS，或者用Scss编译成css之【未经授权禁止转载】【本文受版权保护】后，想把css进行压缩。

gulp-clean-css

文档：https://github.com/s【转载请注明来源】【本文首发于唐霜的博客】cniro/gulp-clean-css

【本文首发于唐霜的博客】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ng.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

$ npm install gulp-clean-css --save-dev

用法

cleanCSS([options], [callback])

参数

options

要知道options怎么用，还要看CleanCSS的原始文档，原来npm的世界里都是依赖来本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。依赖去，一个包的核心功能，可能仅仅是对另【版权所有】唐霜 www.tangshuang.net【本文受版权保护】外一个包的演进，或者多个包的整合，实际上本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。gulp也是对多个包的整合，在给自己披上【本文受版权保护】本文版权归作者所有，未经授权不得转载。了一层壳而已。

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});

callback

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

回调函数。

转载请注明出处：www.tangshua【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netng.net本文作者：唐霜，转载请注明出处。

回调函数的参数是minify()的结果，【本文受版权保护】著作权归作者所有，禁止商业用途转载。它会包含minified的文件信息。举个【转载请注明来源】【本文首发于唐霜的博客】例子：

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({debug: true}, function(details) {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest('dist'));
});

而且Source Maps也能被gulp本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net-sourcemaps简单的生成：

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ng.net转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【转载请注明来源】ng.net

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('minify-css', function() {
  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
  });
});

图片压缩

原创内容，盗版必究。【本文首发于唐霜的博客】【原创不易，请尊重版权】

压缩PNG、JPEG、GIF和SVG图像本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。。

gulp-imagemin集成了 gif【作者：唐霜】【版权所有】唐霜 www.tangshuang.netsicle 、 jpegtran 、 o本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netptipng 、 svgo 这4个插件。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】而imagemin-pngquant是i本文作者：唐霜，转载请注明出处。【作者：唐霜】magemin插件的一个扩展插件，用于深著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。度压缩图片。

本文作者：唐霜，转载请注明出处。【本文受版权保护】

安装命令：

npm install gulp-imagemin imagemin-pngquant --save-dev

基础配置：

var gulp = require('gulp'); // 基础库
var imagemin = require('gulp-imagemin'); // 图片压缩
var pngquant = require('imagemin-pngquant'); // 深度压缩
gulp.task('images', function(){
  return gulp.src('src/images/**/*.{png,jpg,gif,svg}') // 指明源文件路径、并进行文件匹配
    .pipe(imagemin({
      progressive: true, // 无损压缩JPG图片
      svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(gulp.dest('dist/images')); // 输出路径
});

执行命令：

gulp images

注：一般我们所使用的图片压缩方法，都会对原创内容，盗版必究。本文作者：唐霜，转载请注明出处。图像造成一定的损失，这个和压缩比率有一定原创内容，盗版必究。转载请注明出处：www.tangshuang.net的关系。通常我们所说的无损压缩，也只是控【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】制在我们肉眼难以发现的范围内。换句话来说未经授权，禁止复制转载。【作者：唐霜】，在你保存切图的同时，其实已经对图像造成本文作者：唐霜，转载请注明出处。【作者：唐霜】了一定的损失，因为没什么人会选择100%本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net最佳质量导出图片。两者是差不多的概念。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【作者：唐霜】【本文受版权保护】et 获取更多精彩内容】

服务器、自动刷新

网页自动刷新（文件变动后即时刷新页面）(著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 gulp-livereload ) +本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。静态服务器：( gulp-webser【作者：唐霜】转载请注明出处：www.tangshuang.netver )：

【原创内容，转载请注明出处】未经授权，禁止复制转载。【原创不易，请尊重版权】转载请注明出处：www.tangshua未经授权，禁止复制转载。【作者：唐霜】ng.net

安装命令：

npm install gulp-livereload gulp-webserver --save-dev

var gulp = require('gulp'); // 基础库
var livereload = require('gulp-livereload'); // 网页自动刷新（文件变动后即时刷新页面）
var webserver = require('gulp-webserver'); // 本地服务器
// 注册任务
gulp.task('webserver', function() {
  gulp.src( '.' ) // 服务器目录（.代表根目录）
    .pipe(webserver({ // 运行gulp-webserver
      livereload: true, // 启用LiveReload
      open: true // 服务器启动时自动打开网页
    }));
});
// 监听任务
gulp.task('watch',function(){
  // 监听 html
  gulp.watch('src/**/*.html', ['html'])
  // 监听 scss
  gulp.watch('src/scss/*.scss', ['css']);
  // 监听 images
  gulp.watch('src/images/**/*.{png,jpg,gif,svg}', ['images']);
  // 监听 js
  gulp.watch('src/js/*.js', ['script']);
});
// 默认任务
gulp.task('default',['webserver','watch']);

执行命令：

gulp

清除文件

gulp-clean

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

del

文档：https://www.npmjs.co转载请注明出处：www.tangshuang.net【转载请注明来源】m/package/del
本文版权归作者所有，未经授权不得转载。 del不算是gulp插件，但是也可以用【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。来删除文件。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】原创内容，盗版必究。

$ npm install --save del

const del = require('del');
del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => {
  console.log('Deleted files and folders:', paths.join(''));
});

但是有一点需要注意，它是异步的。

webpack

webpack的主要目的是为了压缩文件，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。虽然gulp也有uglify，但是web未经授权，禁止复制转载。未经授权，禁止复制转载。pack的火热，让大家无论如何都想使用它转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。。

原创内容，盗版必究。【原创不易，请尊重版权】【转载请注明来源】【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】et 获取更多精彩内容】

gulp-webpack

var gulp = require('gulp');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

你可以给webpack传配置信息：

return gulp.src('src/entry.js')
  .pipe(webpack({
    watch: true,
    module: {
      loaders: [
        { test: /\.css$/, loader: 'style!css' },
      ],
    },
  }))
  .pipe(gulp.dest('dist/'));

上面有一个watch字段，这个是插件自带本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】的，不算webpack自带的。

你也可以把webpack的配置信息写在一转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。个文件里面：

return gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));

你甚至可以使用一个不同版本的webpac原创内容，盗版必究。原创内容，盗版必究。k作为引擎：

npm install --save-dev webpack

var gulp = require('gulp');
var webpack = require('webpack');
var gulpWebpack = require('gulp-webpack');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(gulpWebpack({}, webpack))
    .pipe(gulp.dest('dist/'));
});

插件还提供一个回调函数，用来使用webp未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ack的输出信息：

转载请注明出处：www.tangshua【本文受版权保护】本文作者：唐霜，转载请注明出处。ng.net【关注微信公众号：wwwtangshua【作者：唐霜】本文作者：唐霜，转载请注明出处。ngnet】【本文首发于唐霜的博客】

var gulp = require('gulp');
var webpack = require('gulp-webpack');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack({
      /* config */
    }, null, function(err, stats) {
      /* 用stats里面的信息可以做更多的操作 */
    }))
    .pipe(gulp.dest('dist/'));
});

原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshua未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ngnet】

karma

在gulp的体系里面使用karma进行单【本文受版权保护】【未经授权禁止转载】元测试。

【原创不易，请尊重版权】【本文受版权保护】【本文首发于唐霜的博客】

gulp已经拥有了karma需要的机制，【转载请注明来源】转载请注明出处：www.tangshuang.net就是注册任务的时候可以提供一个回调函数，【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net回调函数的参数是一个状态终结器。因此，不【本文受版权保护】【版权所有】唐霜 www.tangshuang.net需要额外安装karma插件来运行karm本文作者：唐霜，转载请注明出处。原创内容，盗版必究。a，直接使用karma就可以了。

var gulp = require('gulp');
var Server = require('karma').Server;
/** * Run test once and exit */
gulp.task('test', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  }, done).start();
});

原理也很简单，执行gulp test的时【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】候，调用karma进行测试，karma的【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】配置全部都放在karma.conf.js【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。里面，实际上这个过程可以看做是一个触发过【未经授权禁止转载】【本文受版权保护】程，跟在命令行执行karma命令一样。

唯一比较有趣的是，可以直接给karma 【转载请注明来源】【本文首发于唐霜的博客】service传done这个回调函数的参本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。数（实际上也是个函数），一旦done()转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。被执行，那么test任务就结束了，我们所未经授权，禁止复制转载。原创内容，盗版必究。感知到的，就是命令行里面这个task结束【转载请注明来源】著作权归作者所有，禁止商业用途转载。。

要了解更多的测试的信息，你还得去学习ka【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】rma，这里是官网。

著作权归作者所有，禁止商业用途转载。【作者：唐霜】【作者：唐霜】

【未经授权禁止转载】【未经授权禁止转载】【未经授权禁止转载】

插件开发

gulp插件总是返回一个object mode形式的stream来做这些事情：

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

接收vinyl File对象

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【本文受版权保护】

输出vinyl File对象

【本文首发于唐霜的博客】

这通常被叫做 transform streams (有时候也叫做 through str本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.neteams)。transform stre【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ams 是可读又可写的，它会对传给它的对著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】象做一些转换的操作。

修改文内容

原创内容，盗版必究。【本文受版权保护】

Vinyl文件可以通过三种不同形式来访问未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】文件内容：

Streams

著作权归作者所有，禁止商业用途转载。

【转载请注明来源】

本文版权归作者所有，未经授权不得转载。

Buffers

【作者：唐霜】

空 (null) – 对于删本文作者：唐霜，转载请注明出处。【转载请注明来源】除, 清理, 等操作来说，会很有用，因为本文作者：唐霜，转载请注明出处。【转载请注明来源】这时候内容是不需要处理的。

【原创内容，转载请注明出处】

有用的资源

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

File object

【转载请注明来源】

【本文首发于唐霜的博客】

PluginError

原创内容，盗版必究。

【访问 www.tangshuang.n【本文受版权保护】【本文首发于唐霜的博客】et 获取更多精彩内容】

event-stream

【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netngnet】

【本文受版权保护】

BufferStream

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

【原创不易，请尊重版权】

转载请注明出处：www.tangshua原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ng.net

gulp-util

【本文首发于唐霜的博客】

【作者：唐霜】

插件范例

sindresorhus’ 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】gulp plugins

著作权归作者所有，禁止商业用途转载。

转载请注明出处：www.tangshua未经授权，禁止复制转载。【原创不易，请尊重版权】ng.net

Fractal’s gulp本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。 plugins

【原创内容，转载请注明出处】

【作者：唐霜】

gulp-replace

本文作者：唐霜，转载请注明出处。

【本文首发于唐霜的博客】

原创内容，盗版必究。

【原创不易，请尊重版权】

关于 stream

如果你不熟悉 stream，你可以阅读这转载请注明出处：www.tangshuang.net原创内容，盗版必究。些来

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ng.net

本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【原创不易，请尊重版权】ngnet】

http://nodejs.org/ap【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。i/stream.html

原创内容，盗版必究。

【作者：唐霜】

基本规范

你在开发一个gulp插件的时候，最好遵守本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】下面的规范：

本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

你的插件不应该去做一些现有 node 模【转载请注明来源】原创内容，盗版必究。块已经能很容易做到的事情
【未经授权禁止转载】比如：删除一个文件夹并不需要做成一个著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】gulp 插件，在 task 里使用一个未经授权，禁止复制转载。原创内容，盗版必究。类似 del 这样的插件即可。
转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ng.net 只是为了封装而封装一些的东西进去，这只著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】会增加很多低质量的插件到生态中，这不符合【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。 gulp 的期望。
著作权归作者所有，禁止商业用途转载。 gulp 插件都是以文件为基础操作的，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】如果你发现你正在把一些很复杂的操作塞进未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。stream 中去，那么，请直接写一个本文作者：唐霜，转载请注明出处。原创内容，盗版必究。node 模块就好。
【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ngnet】一个好的 gulp 插件例子像是 gu【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。lp-coffee，coffee-scr【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netipt 模块并不能直接和 vinyl 做【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】很好的适配，因此，才去封装它来使用相应的【原创不易，请尊重版权】【本文受版权保护】功能，并且将一些比较痛苦的操作抽象出来，转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】做成更简单的 gulp 插件来使用。

【本文受版权保护】

【访问 www.tangshuang.n【本文受版权保护】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】

你的插件应该只做一件事，并且做好。
【原创不易，请尊重版权】避免使用配置选项，使得你的插件能胜任不本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】同场合的任务。
著作权归作者所有，禁止商业用途转载。比如：一个 JS 压缩插件不应该有一个转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】加头部的选项

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

你的插件不能去做一些其他插件做的事：
原创内容，盗版必究。不应该去拼接，用 gulp-conca本文作者：唐霜，转载请注明出处。原创内容，盗版必究。t 去做
【原创不易，请尊重版权】不应该去增加头部，用 gulp-hea本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。der 去做
著作权归作者所有，禁止商业用途转载。不应该去增加尾部，用 gulp-foo【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。ter 去做
【版权所有，侵权必究】如果是一个常用的可选的操作，那么，请在【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。文档中注明你的插件通常和其他某个插件一起【本文受版权保护】本文版权归作者所有，未经授权不得转载。使用
【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】在你的插件中使用其他的插件，这能大大减本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。少你的代码量，并保证生态系统的稳定。

【关注微信公众号：wwwtangshua【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

【未经授权禁止转载】

【转载请注明来源】

你的插件必须被测试过
未经授权，禁止复制转载。测试一个插件很简单，你甚至不需要 gu【关注微信公众号：wwwtangshuangnet】【转载请注明来源】lp 就能测试
【作者：唐霜】参考其他的插件是怎么做的

【未经授权禁止转载】

【本文受版权保护】

在 package.json 中增加一个【本文受版权保护】原创内容，盗版必究。名为 gulpplugin 的关键字，这著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。可以让它能在我们的搜索中出现

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】未经授权，禁止复制转载。ngnet】

【作者：唐霜】

不要再 stream 里面抛出错误
原创内容，盗版必究。你应该以触发 error 事件来代替
【原创不易，请尊重版权】如果你在 stream 外面遇到错误，【未经授权禁止转载】转载请注明出处：www.tangshuang.net比如在创建 stream 时候发现错误的转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。配置选项等，那么你应该抛出它。

【本文首发于唐霜的博客】

【作者：唐霜】

错误需要加上以你插件名字作为前缀
【转载请注明来源】比如： gulp-replace: C转载请注明出处：www.tangshuang.net原创内容，盗版必究。annot do regexp repl本文作者：唐霜，转载请注明出处。【作者：唐霜】ace on a stream
【本文首发于唐霜的博客】使用 gulp-util 的 Plug未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。inError 类来完成它

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

file.contents 的类型需要总本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是在输入输出中保持一致
本文作者：唐霜，转载请注明出处。如果 file.contents 为空【本文受版权保护】【未经授权禁止转载】 (不可读) 请将他忽略，并传过去
【版权所有，侵权必究】如果 file.contents 是一【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。个 stream，但是你不支持，那么请触本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net发一个错误
【转载请注明来源】不要把 stream 硬转成 buff【转载请注明来源】原创内容，盗版必究。er 来使你的插件支持 stream，这【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】会引发很严重的问题。

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

在你处理完成之前，不要将 file 传到【作者：唐霜】著作权归作者所有，禁止商业用途转载。下游去

【作者：唐霜】

未经授权，禁止复制转载。

【作者：唐霜】

【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。

不要把 gulp 作为一个依赖
【作者：唐霜】使用 gulp 来测试你的插件的工作流原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net这的确很酷，但请务必确保你将它放到 de转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】vDependency 中
【未经授权禁止转载】在你的插件中依赖 gulp，这意味着安转载请注明出处：www.tangshuang.net【未经授权禁止转载】装你的插件的用户将会重新安装一遍 gul【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。p 以及所有它所依赖的东西。
本文版权归作者所有，未经授权不得转载。没有任何理由说明你需要将 gulp 写【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】到你的插件代码中去，如果你发现你必须这么【未经授权禁止转载】本文作者：唐霜，转载请注明出处。做，那么请开一个 issue，我们会帮你【版权所有，侵权必究】【原创不易，请尊重版权】解决。

【本文受版权保护】

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

为什么这些指导这么严格？

转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【作者：唐霜】ng.net【本文受版权保护】

gulp 的目标是为了让用户觉得简单，通【本文受版权保护】【关注微信公众号：wwwtangshuangnet】过提供一些严格的指导，我们就能提供一致并【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。且高质量的生态系统给大家。不过，这确实给转载请注明出处：www.tangshuang.net【转载请注明来源】插件作者增加了一些需要考虑的东西，但是也【关注微信公众号：wwwtangshuangnet】【转载请注明来源】确保了后面的问题会更少。

【作者：唐霜】【本文受版权保护】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

如果我不遵守这些，会发生什么？

转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ng.net转载请注明出处：www.tangshua【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netng.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

npm 对每个人来说是免费的，你可以开发【作者：唐霜】著作权归作者所有，禁止商业用途转载。任何你想要开发的东西出来，并且不需要遵守本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。这个规定。我们承诺测试机制将会很快建立起本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net来，并且加入我们的插件搜索中。如果你坚持【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】不遵守插件导览，那么这会反应在我们的打分【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】/排名系统上，人们都会更加喜欢去使用一个【作者：唐霜】【版权所有】唐霜 www.tangshuang.net “更加 gulp̶【版权所有，侵权必究】转载请注明出处：www.tangshuang.net1; 的插件。

一个插件大概会是怎么样的？

【作者：唐霜】【作者：唐霜】

// through2 是一个对 node 的 transform streams 简单封装
var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
// 常量
const PLUGIN_NAME = 'gulp-prefixer';
function prefixStream(prefixText) {
  var stream = through();
  stream.write(prefixText);
  return stream;
}
// 插件级别函数 (处理文件)
function gulpPrefixer(prefixText) {
  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }
  prefixText = new Buffer(prefixText); // 预先分配
  // 创建一个让每个文件通过的 stream 通道
  return through.obj(function(file, enc, cb) {
    if (file.isNull()) {
      // 返回空文件
      cb(null, file);
    }
    if (file.isBuffer()) {
      file.contents = Buffer.concat([prefixText, file.contents]);
    }
    if (file.isStream()) {
      file.contents = file.contents.pipe(prefixStream(prefixText));
    }
    cb(null, file);
  });
};
// 暴露（export）插件主函数
module.exports = gulpPrefixer;

以上就是本节的内容。

未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

stream

极力推荐让你所写的插件支持 stream转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】。这里有一些关于让插件支持 stream【原创内容，转载请注明出处】【转载请注明来源】的一些有用信息。
【访问 www.tangshuang.n未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】原创内容，盗版必究。【访问 www.tangshuang.n【本文首发于唐霜的博客】【作者：唐霜】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
请确保使用处理错误的最佳实践，并且加入一原创内容，盗版必究。【本文首发于唐霜的博客】行代码，使得 gulp 能在转换内容的期【转载请注明来源】转载请注明出处：www.tangshuang.net间在捕获到第一个错误时候正确报出错误。
原创内容，盗版必究。【版权所有，侵权必究】

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【作者：唐霜】

什么是stream

那么什么是流式传输呢？就是一个文件不是一本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】次性传输，而是像流水一样，慢慢传，可以分【作者：唐霜】【关注微信公众号：wwwtangshuangnet】成一段一段的，而这一段一段的东西，我们就【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】可以成为buffer，但是buffer不【作者：唐霜】原创内容，盗版必究。是stream，buffer只是stre【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netam附带了一种东西。

【转载请注明来源】【本文受版权保护】【本文受版权保护】【原创内容，转载请注明出处】

比较典型的是视频，我们看网络视频的时候，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。不会等到整个视频都缓存到浏览器了才开始观【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net看，而是打开浏览器的时候，视频就已经流式【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】下载，下载到一定的量的时候就可以开始播放未经授权，禁止复制转载。【本文受版权保护】。

【转载请注明来源】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ng.net

而在node的体系里，读取文件可以以st未经授权，禁止复制转载。【转载请注明来源】ream的形式进行读取，读取过程中会产生【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netbuffer。除了读，stream还可以【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】被写入。但是stream不是文件本身，而【转载请注明来源】【本文受版权保护】是文件的内容的某种形式，所以只要文件的内未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net容还是以stream的形式存在，那这个文【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。件相当于只有灵魂没有肉体。

使用stream

让我们来实现一个用于在文件头部插入一些文【转载请注明来源】著作权归作者所有，禁止商业用途转载。本的插件，这个插件支持 file.con著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】tents 所有可能的形式。

原创内容，盗版必究。【本文受版权保护】

var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
// 常量const PLUGIN_NAME = 'gulp-prefixer';
function prefixStream(prefixText) {
  var stream = through();
  stream.write(prefixText);
  return stream;
}
// 插件级别函数 (处理文件)
function gulpPrefixer(prefixText) {
  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }
  prefixText = new Buffer(prefixText); // 预先分配
  // 创建一个让每个文件通过的 stream 通道
  var stream = through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Buffers not supported!'));
      return cb();
    }
    if (file.isStream()) {
      // 定义转换内容的 streamer
      var streamer = prefixStream(prefixText);
      // 从 streamer 中捕获错误，并发出一个 gulp的错误
      streamer.on('error', this.emit.bind(this, 'error'));
      // 开始转换
      file.contents = file.contents.pipe(streamer);
    }
    // 确保文件进去下一个插件
    this.push(file);
    // 告诉 stream 转换工作完成
    cb();
  });
  // 返回文件 stream
  return stream;
}
// 暴露（export）插件的主函数
module.exports = gulpPrefixer;

上面的插件可以像这样使用：

【作者：唐霜】【作者：唐霜】转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ng.net

var gulp = require('gulp');
var gulpPrefixer = require('gulp-prefixer');
gulp.src('files/**/*.js', { buffer: false })
  .pipe(gulpPrefixer('prepended string'))
  .pipe(gulp.dest('modified-files'));

一些使用 stream 的插件

gulp-svgicons2svgfon未经授权，禁止复制转载。原创内容，盗版必究。t

原创内容，盗版必究。

buffer

什么是buffer

在stream那一节已经提到了buffe原创内容，盗版必究。【版权所有，侵权必究】r，但是并不能全面的表达buffer的概本文版权归作者所有，未经授权不得转载。【转载请注明来源】念。从我个人的理解角度讲，buffer的【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】本质就是一个缓存区，这个缓存区用于交换数转载请注明出处：www.tangshuang.net【本文受版权保护】据。它不一定在stream中才使用，但是【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】是使用最常见的。

本文作者：唐霜，转载请注明出处。【作者：唐霜】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

大一个比方，有1000000000000转载请注明出处：www.tangshuang.net【本文受版权保护】00吨水要从海洋运往沙漠，现在这个运输的【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。过程中所有的水就是stream，水从大海【未经授权禁止转载】本文作者：唐霜，转载请注明出处。流向了沙漠，但是是怎么流的呢？可不是直接本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net整个砸进沙漠里，而是靠人们发明的一种神秘【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】盒子进行运输，这个盒子在大海和沙漠之间以【原创不易，请尊重版权】【原创不易，请尊重版权】光速来回运动，把大海里的水按照每次200【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】吨进行运输，但是由于一些情况，人们把盒子【转载请注明来源】未经授权，禁止复制转载。的容量调整到了1000吨，这个盒子就是b【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。uffer。
【原创不易，请尊重版权】在读取一个大文件的时候，node不会一本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。次性把所有的文件内容都读取到内存中，而是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。一点一点的读，读完的部分写入另外一个文件【本文受版权保护】原创内容，盗版必究。，这个过程就是stream的运动过程，那著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。么这个“一点一点”的东西在哪里呢？就在b【本文首发于唐霜的博客】【转载请注明来源】uffer里，每次读一点，就放到buff【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neter里，你可以对这个buffer进行改写【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】，这样最终的文件跟原始文件就有非常大的区原创内容，盗版必究。【本文首发于唐霜的博客】别。

使用buffer

如果你的插件依赖着一个基于 buffer【转载请注明来源】著作权归作者所有，禁止商业用途转载。处理的库，你可能会选择让你的插件以 b著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。uffer 的形式来处理 file.co【转载请注明来源】【原创不易，请尊重版权】ntents。让我们来实现一个在文件头部【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。插入额外文本的插件：

var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
// 常量
const PLUGIN_NAME = 'gulp-prefixer';
// 插件级别的函数（处理文件）
function gulpPrefixer(prefixText) {
  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }
  prefixText = new Buffer(prefixText); // 提前分配
  // 创建一个 stream 通道，以让每个文件通过
  var stream = through.obj(function(file, enc, cb) {
    if (file.isStream()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
      return cb();
    }
    if (file.isBuffer()) {
      file.contents = Buffer.concat([prefixText, file.contents]);
    }
    // 确保文件进入下一个 gulp 插件
    this.push(file);
    // 告诉 stream 引擎，我们已经处理完了这个文件
    cb();
  });
  // 返回文件 stream
  return stream;
};
// 导出插件主函数
module.exports = gulpPrefixer;

上述的插件可以这样使用：

var gulp = require('gulp');
var gulpPrefixer = require('gulp-prefixer');
gulp.src('files/**/*.js')
  .pipe(gulpPrefixer('prepended string'))
  .pipe(gulp.dest('modified-files'));

处理 stream

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【作者：唐霜】ng.net

不幸的是，当 gulp.src 如果是以【原创内容，转载请注明出处】【作者：唐霜】 stream 的形式，而不是 buff【原创内容，转载请注明出处】【版权所有，侵权必究】er，那么，上面的插件就会报错。如果可以【版权所有，侵权必究】转载请注明出处：www.tangshuang.net，你也应该让他支持 stream 形式。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。请查看使用 Stream 处理获取更多【本文受版权保护】【未经授权禁止转载】信息。

一些基于 buffer 的插件

gulp-coffee

未经授权，禁止复制转载。

gulp-svgmin

【本文受版权保护】

【作者：唐霜】

gulp-marked

本文作者：唐霜，转载请注明出处。

gulp-svg2ttf

原创内容，盗版必究。

转载请注明出处：www.tangshua未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netng.net

本文作者：唐霜，转载请注明出处。

测试

大多数的插件使用 mocha，shoul【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。d 以及 event-stream 来做【未经授权禁止转载】【原创不易，请尊重版权】测试。下面的例子也将会使用这些工具。测著作权归作者所有，禁止商业用途转载。【本文受版权保护】试插件的流处理（streaming）模式

转载请注明出处：www.tangshua【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ng.net原创内容，盗版必究。【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ngnet】【本文首发于唐霜的博客】

var assert = require('assert');
var es = require('event-stream');
var File = require('vinyl');
var prefixer = require('../');
describe('gulp-prefixer', function() {
  describe('in streaming mode', function() {
    it('should prepend text', function(done) {
      // 创建伪文件
      var fakeFile = new File({
        contents: es.readArray(['stream', 'with', 'those', 'contents'])
      });
      // 创建一个 prefixer 流（stream）
      var myPrefixer = prefixer('prependthis');
      // 将伪文件写入
      myPrefixer.write(fakeFile);
      // 等文件重新出来
      myPrefixer.once('data', function(file) {
        // 确保它以相同的方式出来
        assert(file.isStream());
        // 缓存内容来确保它已经被处理过（加前缀内容）
        file.contents.pipe(es.wait(function(err, data) {
          // 检查内容
          assert.equal(data, 'prependthisstreamwiththosecontents');
          done();
        }));
      });
    });
  });
});

测试插件的 buffer 模式

本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】本文版权归作者所有，未经授权不得转载。

var assert = require('assert');
var es = require('event-stream');
var File = require('vinyl');
var prefixer = require('../');
describe('gulp-prefixer', function() {
  describe('in buffer mode', function() {
    it('should prepend text', function(done) {
      // 创建伪文件
      var fakeFile = new File({
        contents: new Buffer('abufferwiththiscontent')
      });
      // 创建一个 prefixer 流（stream）
      var myPrefixer = prefixer('prependthis');
      // 将伪文件写入
      myPrefixer.write(fakeFile);
      // 等文件重新出来
      myPrefixer.once('data', function(file) {
        // 确保它以相同的方式出来
        assert(file.isBuffer());
        // 检查内容
        assert.equal(file.contents.toString('utf8'), 'prependthisabufferwiththiscontent');
        done();
      });
    });
  });
});

一些拥有高质量的测试用例的插件

gulp-cat

【作者：唐霜】

gulp-concat

本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshua未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netng.net

本文版权归作者所有，未经授权不得转载。

资源

官网：http://gulpjs.com/

【本文首发于唐霜的博客】

github: https://github.com/g本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ulpjs/gulp

本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.n【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。

中文网站：http://www.gulpjs.co【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】m.cn/

【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

原创内容，盗版必究。

【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】

一些使用技巧

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshua【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ngnet】

node api

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【作者：唐霜】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。

2017-02-03 | gulp