前言
Gulp是一个基于node的流程管理工具【转载请注明来源】【版权所有，侵权必究】，它可以实现将一系列有组织的任务，按照编原创内容，盗版必究。【作者：唐霜】程逻辑进行执行，实现开发甚至其他方面的任【作者：唐霜】【关注微信公众号：wwwtangshuangnet】务管理。
【转载请注明来源】【本文受版权保护】前端开发已经不再只是搞搞样式，处理处理交【作者：唐霜】【本文受版权保护】互那么简单，前后端分离，后端只为前端提供原创内容，盗版必究。未经授权，禁止复制转载。api数据接口，以前url路由、html著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】结构都需要后端来架构，如今这些全靠前端来【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。处理，前端也具备了工程性。
【转载请注明来源】【未经授权禁止转载】这几年，模块化开发已经成为web应用前端本文作者：唐霜，转载请注明出处。【未经授权禁止转载】开发的共识。以往套上jQuery走天下的原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】时代已经过去了，前端已经发展成为复杂的大【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。型应用开发工作。以SPA（Single 【未经授权禁止转载】【版权所有，侵权必究】Page Application）为代表【转载请注明来源】【原创内容，转载请注明出处】的单页应用成为现在很多大公司发布前端产品著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】的形式，以往以html+css+js的前【转载请注明来源】【作者：唐霜】端在这里已经不适用了，将所有资源进行打包本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】，正是解决这种需求的方案，webpack【作者：唐霜】【关注微信公众号：wwwtangshuangnet】等打包工具也孕育而生。
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】未经授权，禁止复制转载。一年多以前，我接触的前端和上面的“以往的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。前端”并无二致，直到我进入morning本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】star，才逐渐认识到自己在前端领域是多【作者：唐霜】【原创不易，请尊重版权】么肤浅。我在自己的博客中，多次把自己工作【作者：唐霜】本文版权归作者所有，未经授权不得转载。中认知的，morningstar的开发p【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】attern进行分享。同时，我现在所在的【原创不易，请尊重版权】【版权所有，侵权必究】项目也正是使用gulp+webpack进原创内容，盗版必究。【作者：唐霜】行开发的，因此，我希望通过撰写（翻译）这【作者：唐霜】转载请注明出处：www.tangshuang.net本手册，既让自己重新回顾一下gulp的使本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net用，以及希望在这个过程中有新的收获。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】转载请注明出处：www.tangshuang.net同时，我打算自己写中文手册，也是因为苦于【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net没有比较好的中文手册给刚入门的同学使用，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。所以希望趁工作回家后的时间，快速的写出一转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本针对中国开发者快速入门和理解的文档。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】你可以在gitbook上在线阅读，也可以在github上fork所有源文件，对文档的细节进行补【转载请注明来源】【未经授权禁止转载】充。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net- gulp官方文档 未经授权，禁止复制转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- gulp中文文档（翻译） 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
我以前都是以文章的形式分享技术内容，我觉【原创内容，转载请注明出处】原创内容，盗版必究。得技术的东西，用文章那种分散性的形式发表【本文首发于唐霜的博客】【作者：唐霜】，会让人知识体系比较混乱，仅仅适合解决一未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】些具体的细节性技术问题，而采用book的未经授权，禁止复制转载。【原创内容，转载请注明出处】形式分享，则更有利于形成完整的知识体系。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】这是我第一次写一份完整的文档，并且阅读了【关注微信公众号：wwwtangshuangnet】【转载请注明来源】不少英文材料，但是感觉还是不够详细，如果原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】你有什么意见或觉得不足的地方，可以通过g【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ithub、博客等各个渠道向我反馈。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。快速入门
这一节你不需要知道背后的原理，只需要按照【原创不易，请尊重版权】【原创不易，请尊重版权】文章中的提示一步一步进行操作。
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【转载请注明来源】我的所有开发都是在ubuntu上面完成的未经授权，禁止复制转载。【原创不易，请尊重版权】，所以本文档中可能会涉及一些ubuntu著作权归作者所有，禁止商业用途转载。【作者：唐霜】 linux下的一些命令，如果你不接触u未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】buntu，甚至不接触linux，都没有【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net任何关系，因为我们是要用gulp，而不是【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】在纠结命令，而且在后面的文档中，我会对大本文版权归作者所有，未经授权不得转载。【本文受版权保护】部分命令进行解释。
【原创内容，转载请注明出处】
gulp是node的一个模块（包），因【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net此大部分情况下，我们通过npm进行安装。【本文首发于唐霜的博客】未经授权，禁止复制转载。当然，高手而言，甚至可以下载包，手动进行本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。安装。熟悉npm的朋友，也推荐了解一下y著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】arn，它也是个包管理工具，但是效率上比【作者：唐霜】【未经授权禁止转载】npm高效（快）。
现在，我假设你手上有一台拥有开发环境的u【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netbuntu16.04LTS，但是还没有接转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net触node，我会手把手教你一步一步完成安【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】装。
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net1) 安装node
【版权所有，侵权必究】【转载请注明来源】转载请注明出处：www.tangshuang.net$ sudo apt install nodejs
假如你的ubuntu不支持apt，可以替【原创不易，请尊重版权】原创内容，盗版必究。换为apt-get。
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。2) 安装和升级npm
【本文首发于唐霜的博客】【版权所有，侵权必究】原创内容，盗版必究。$ sudo apt install npm$ npm update -g npm
3) 安装gulp-cli
【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【作者：唐霜】gulp-cli就是可以在命令行中使用g著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ulp default这样的命令的工具。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。也就是说你不安装gulp-cli，就无法本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】在命令行里运行gulp相关的命令。
【版权所有，侵权必究】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net$ npm install -g gulp-cli
为什么不是安装gulp呢？暂且按住不表。
【转载请注明来源】【本文受版权保护】4) 创建一个项目
【未经授权禁止转载】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】$ mkdir my_project$ cd my_project$ npm init
在出现的交互信息中，填写和你项目相关的信【原创不易，请尊重版权】【转载请注明来源】息。
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。5) 把gulp作为这个项目的一个依赖
【原创不易，请尊重版权】原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。$ npm install --save-dev gulp
上面我们留了一个问题，说为什么上面安装的【未经授权禁止转载】【版权所有，侵权必究】是gulp-cli，而不是gulp。这里著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。就有答案。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】我们npm install的gulp将会【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】被保存到my_project这个目录下的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netnode_mudules目录下去，pac【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】kage.json文件的dependen【本文受版权保护】原创内容，盗版必究。cesDev字段也会被增加一个gulp的本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】记录。
原创内容，盗版必究。【作者：唐霜】【原创内容，转载请注明出处】【转载请注明来源】这是因为npm install gulp【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。时安装的gulp是一个node模块，是一【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。个项目依赖的包，我们将会在自己的项目代码【原创不易，请尊重版权】【转载请注明来源】里面用var gulp = requir【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。e(‘gulp’【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。)的形式引用这个包，而这个包，才会是我们本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】下面API一章中的所有api的主人。而gulp-c【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netli，在这里没有半点关系，cli真的只是未经授权，禁止复制转载。【作者：唐霜】一个命令行工具，而不是我们用来requi原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netre的东西。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。6) 创建一个gulpfile.js文件
转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。var gulp = require('gulp');
gulp.task('my_task', function() {
setInterval(function(){
console.log('I am out!');
},5000);
});
7) 执行gulp任务
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】$ gulp my_task
这个时候，你就会发现，在你的命令行里面每本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net隔5秒出现一下’I am o【本文受版权保护】【未经授权禁止转载】ut!’这句话。使用Ctrl【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。+C退出来。
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】【版权所有，侵权必究】通过上面这些步骤，你可以轻松快速的创建自转载请注明出处：www.tangshuang.net【版权所有，侵权必究】己的gulp工具，在你的项目里面使用gu【关注微信公众号：wwwtangshuangnet】【作者：唐霜】lp工具帮你自动化的完成一些任务。比如举【转载请注明来源】转载请注明出处：www.tangshuang.net一个简单的例子，你可以在你的源代码里面写【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ES6的代码，通过gulp的一系列处理，【未经授权禁止转载】原创内容，盗版必究。自动生成一个编译成ES5的js文件。当然【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，大部分任务都需要使用插件，或额外编写n【作者：唐霜】【作者：唐霜】ode脚本来执行。这些，我们都将在这本手本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net册里一一提到。
【本文首发于唐霜的博客】【原创不易，请尊重版权】安装
这一章将让你学会如何安装gulp环境，以【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。及如何在项目中加入gulp，从而可以使用著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。gulp。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。你可能从来没有接触过node，不要紧，我【版权所有】唐霜 www.tangshuang.net【作者：唐霜】会教会一个完全不懂node的人如何来搭建原创内容，盗版必究。【未经授权禁止转载】。当然了，你必须得懂javascript转载请注明出处：www.tangshuang.net【本文受版权保护】，而且最好你对前端领域比较热门的东西都有未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。所了解，这样才不至于在提到一些东西的时候【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net不之所以。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。让我们开始吧！
本文作者：唐霜，转载请注明出处。【本文受版权保护】Node
这一节主要讲如何去配置一个node环境，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。除了安装node之外，我们还需要安装np本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netm。
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。node安装
因为我的大部分开发都是在ubuntu下面著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net进行的，所以这个文档默认会使用ubunt未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netu作为讲解。当然，也会提到windows【本文受版权保护】【本文首发于唐霜的博客】下面的处理方法，但是因为我很少在wind【作者：唐霜】未经授权，禁止复制转载。ows下面实践，所以windows里面的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。坑就不去挖了。
原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】1）采用apt安装
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】ubuntu可以使用apt快捷安装：
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】$ sudo apt install nodejs
2） 编译安装
【未经授权禁止转载】未经授权，禁止复制转载。【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】一般apt源中的node都不是最新的稳定【作者：唐霜】【作者：唐霜】版，而现在官方提供的最新稳定版是6.9.【作者：唐霜】【版权所有】唐霜 www.tangshuang.net1，所以我们可以通过下载官网的最新版本，【本文受版权保护】【本文首发于唐霜的博客】在本地进行编译安装。
【版权所有，侵权必究】未经授权，禁止复制转载。$ 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下面，都可以通过源码编译安装【原创不易，请尊重版权】【版权所有，侵权必究】。上面使用到了wget, tar, ma【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ke，如果这些软件在你的ubuntu上面【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net都没有安装，可以通过apt进行安装。
【作者：唐霜】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】wget有的时候并不支持https，这个【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net时候一般在wget后面加一个参数R本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。11;no-check-certific【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netate就可以解决。
【原创不易，请尊重版权】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】3） windows下面安装node
未经授权，禁止复制转载。【原创不易，请尊重版权】原创内容，盗版必究。到node的官网去下载稳定版的node exe/msi安本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。装文件，下载下来之后，像安装普通软件一样【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。安装好。
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。安装npm
什么是npm？它是Node Packag本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nete Manager的缩写，及一个包管理工【版权所有，侵权必究】原创内容，盗版必究。具。最近facebook发布了yarn，【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net也是和npm一样的包管理工具，而且性能上【原创不易，请尊重版权】【作者：唐霜】比npm更好，有兴趣的同学可以尝试一下。
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。为什么要管理node的包？在node中，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】javascript以模块的形式存在。虽本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】然我们可以像node test.js这样转载请注明出处：www.tangshuang.net【版权所有，侵权必究】去执行某个脚本，但是它天生具备modul【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。e功能。在node中通过require引【本文受版权保护】未经授权，禁止复制转载。入一个模块，在模块中使用module.e【转载请注明来源】转载请注明出处：www.tangshuang.netxports导出模块的接口。而模块，通常【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。情况下就是一个js文件，但是有些模块功能【未经授权禁止转载】原创内容，盗版必究。比较复杂，被切割到不同的js文件中，虽然本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net这些js文件都是模块，但是把这些为实现同著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net一个功能的js放在一个文件夹下面，用一个【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】js作为统一对外的接口，再在这个文件夹内未经授权，禁止复制转载。【原创不易，请尊重版权】放一个package.json，这样的放【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net在一个文件夹下面的一组文件，被成为“包”本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，也就是package，package.【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。json里面规定了包名，出口文件是哪一个本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。等信息。关于package，我们会在后面原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】的文档讲到。
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】在ubuntu里面，同样可以使用apt安【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】装和编译安装两种安装方式。
【作者：唐霜】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net$ sudo apt install npm
编译安装就不介绍了。因为我们可以通过np未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。m升级自身到最新的版本。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net$ npm install -g npm
这是一种奇怪的升级办法，npm本身也是n【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ode的一个模块，但是在我们通过apt安本文版权归作者所有，未经授权不得转载。【本文受版权保护】装npm之前，没法使用npm，但是安装了著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。npm之后，就可以用npm安装自身，甚至未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。可以在后面跟上@版本，这样可以随意在不同原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】版本的npm之间切换。
【原创内容，转载请注明出处】【未经授权禁止转载】注意：升级npm之后，应该先关掉你的te【本文受版权保护】本文作者：唐霜，转载请注明出处。rminal后重新打开，我不知道这是为什未经授权，禁止复制转载。【本文首发于唐霜的博客】么，但是实践上需要这样做，否则仍然还在使【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。用老版本的npm。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】windows版最新的node自带了np本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。m包管理工具，所以不需要另外在下载安装。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。但升级到最新版本的方法可以一样。
原创内容，盗版必究。【本文受版权保护】【未经授权禁止转载】安装git
git不算是node环境的东西，但是是安【转载请注明来源】原创内容，盗版必究。装一些特定的npm包需要的必备武器。
未经授权，禁止复制转载。【未经授权禁止转载】$ sudo apt install git
安装python2.7 （可选）
最好还是安装一下python，可能会在后【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。面的一些插件中需要。当然，你也可以暂时先【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。不安装，到需要的时候再安装。
未经授权，禁止复制转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。$ sudo apt install python
安装bower （可不安装，扩展阅读）
什么是bower？bower也是包，但是【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】它和npm不同，npm管理的是node的【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net模块包，而bower是独立的各种软件包，【未经授权禁止转载】本文作者：唐霜，转载请注明出处。比如jquery、bootstrap，它本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】们也可以通过npm来安装，也可以通过bo原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】wer来安装。bower和npm之间有很【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。多人进行对比，其实没有必要，我感觉bow本文版权归作者所有，未经授权不得转载。【转载请注明来源】er比较简单干净，不会将依赖打包到自己的转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】包里，而npm包会把自己依赖的包打包在自未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。己内部。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net所以我在实践中，大部分浏览器端要用的包都【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。用bower进行安装。
【作者：唐霜】【版权所有，侵权必究】你也可以不安装bower，等到要的时候再【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net安装。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】【作者：唐霜】$ npm install -g bower
注意，bower默认情况下不允许用roo【作者：唐霜】著作权归作者所有，禁止商业用途转载。t用户去执行。不过一般ubuntu默认都【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】不是root用户。但是比较坑的是，在ub本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】untu上面，有时候npm又得用root【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。去执行，这取决于文件的可写权限。所以你只未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net需要记住，npm需要sudo，bower原创内容，盗版必究。【作者：唐霜】不需要sudo就可以了。或许这也是我更喜【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。欢用bower的原因。
【原创不易，请尊重版权】原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】【未经授权禁止转载】【作者：唐霜】原创内容，盗版必究。现在，你已经搭建好了node环境，你的n本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ode环境里面还有npm和git，现在可著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】以随便写一个js文件，然后用node去执【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】行一下它试试。 要退出node执行状态，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netCtrl+C就可以了。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
package.json
每一个node模块包都有一个packag【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】e.json，而我们在node环境下开发【转载请注明来源】未经授权，禁止复制转载。项目，整个项目对于node而已，也是一个著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】包，所以也需要在我们的项目根目录下放一个【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netpackage.json文件。
原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.net这篇文章，主要是来讲解package.j【未经授权禁止转载】【原创不易，请尊重版权】son的结构、主要字段和于gulp相关的【作者：唐霜】本文版权归作者所有，未经授权不得转载。地方。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。我们看一个package.json文件的【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】内容，它总是会包含这么一些内容：
【原创内容，转载请注明出处】【版权所有】唐霜 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.net【转载请注明来源】lp，但是毕竟每个东西存在意义不一样。这【未经授权禁止转载】【作者：唐霜】里不深究，有兴趣自己去学习。
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。dependencies和devDepe【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ndencies有什么区别？前者是上线以【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】后的产品也需要依赖，比如你发布了一个包，【未经授权禁止转载】本文作者：唐霜，转载请注明出处。别人在npm install你的包的时候未经授权，禁止复制转载。【作者：唐霜】，dependencies里面的包也必须【作者：唐霜】【未经授权禁止转载】被安装才可以。devDependenci【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。es里面的包则不需要在使用这个包的时候安未经授权，禁止复制转载。原创内容，盗版必究。装。但是如果你是开发这个包的人，会把开发本文版权归作者所有，未经授权不得转载。【本文受版权保护】的时候需要用到的模块放在devDepen本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。dencies里面，这样你在开发的时候执未经授权，禁止复制转载。【本文首发于唐霜的博客】行npm install，所有的包都会安未经授权，禁止复制转载。【本文受版权保护】装好。
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【原创不易，请尊重版权】这个可能一时好理解，我就举个例子：假如你【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】是开发一个jquery插件，你开发的时候转载请注明出处：www.tangshuang.net【转载请注明来源】肯定需要像gulp、scss之类的辅助工【作者：唐霜】原创内容，盗版必究。具进行打包压缩，你把gulp和scss相【作者：唐霜】本文作者：唐霜，转载请注明出处。关的包放在devDependencies转载请注明出处：www.tangshuang.net【作者：唐霜】里，然后npm install，然后就可【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。以使用scss编译你写的scss文件。开本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。发完了，你打算发布这个插件，但是发现这个本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。插件发布后，用户必须先安装jquery才著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。行，否则插件不能使用，所以你把jquer【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】y放在dependencies。用户拿到原创内容，盗版必究。转载请注明出处：www.tangshuang.net你的包之后，不需要gulp、scss，只【转载请注明来源】原创内容，盗版必究。需要jquery就可以运行你的包。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】我们后面会不断的加入新的gulp插件，是【本文首发于唐霜的博客】【未经授权禁止转载】不是要写到devDependencies【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net里面去重新npm install呢？不需原创内容，盗版必究。【版权所有，侵权必究】要，我们可以通过命令还完成：
本文作者：唐霜，转载请注明出处。【作者：唐霜】$ npm install --save-dev gulp-minify
执行完之后再打开看package.jso转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。n文件，发现在devDependenci【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。es里面自动多了gulp-minify。【原创内容，转载请注明出处】原创内容，盗版必究。–save和–s【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ave-dev的区别是，安装的时候，&#【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net8211;save会把安装的新包加入到d本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ependencies，–s著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ave-dev则会加入devDepend【原创内容，转载请注明出处】【原创不易，请尊重版权】encies。
【本文首发于唐霜的博客】
另外，如果你打算npm uninsta【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ll，也要记得带上–save本文版权归作者所有，未经授权不得转载。【转载请注明来源】[-dev]参数。
现在你已经了解了package.json【转载请注明来源】著作权归作者所有，禁止商业用途转载。，马上在你的项目目录下创建一个packa【原创内容，转载请注明出处】【本文首发于唐霜的博客】ge.json吧。创建完之后直接运行np【原创不易，请尊重版权】未经授权，禁止复制转载。m install会安装所有依赖的包，快【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。试试看！
未经授权，禁止复制转载。【作者：唐霜】【作者：唐霜】本文作者：唐霜，转载请注明出处。gulp-cli
在快速入门一节已经讲了gulp和gulp著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】-cli的区别。在编程的世界里，大部分c【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】li都指代命令行的意思，gulp-cli【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】就是可以在命令行里面运行gulp命令，而未经授权，禁止复制转载。【版权所有，侵权必究】纯粹的gulp并没有这个功能，它只能被r本文作者：唐霜，转载请注明出处。【未经授权禁止转载】equire，然后执行你规定的任务，但是著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】你可能根本看不到，只有gulp-cli才【本文受版权保护】未经授权，禁止复制转载。能帮助你在命令行操作gulp，并且还能看原创内容，盗版必究。原创内容，盗版必究。到gulp的运行状况。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【本文首发于唐霜的博客】安装gulp-cli
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】很简单，直接用npm就可以安装：
【本文受版权保护】【作者：唐霜】转载请注明出处：www.tangshuang.net$ npm install gulp-cli
安装好gulp-cli之后，只是代表你的著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】电脑拥有了命令行执行gulp任务的能力，【作者：唐霜】本文版权归作者所有，未经授权不得转载。并不表示你可以马上运行gulp命令。要运著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。行命令还得你在自己的项目目录中，安装了g【原创不易，请尊重版权】【本文首发于唐霜的博客】ulp模块，通过gulpfile.js创【原创内容，转载请注明出处】【本文首发于唐霜的博客】建了gulp任务，才能在这个项目目录里运【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】行gulp命令，在其他目录里运行gulp未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net命令无效，会报错。
本文作者：唐霜，转载请注明出处。【转载请注明来源】【转载请注明来源】【本文受版权保护】至于gulp-cli具体的用法，在CLI【本文受版权保护】【未经授权禁止转载】一章详细讲。
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】转载请注明出处：www.tangshuang.netCLI命令行
什么是CLI？它是command-lin【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nete interface的缩写，中文翻译为【本文受版权保护】未经授权，禁止复制转载。“命令行界面”，我们一般就直接用命令行代本文版权归作者所有，未经授权不得转载。【本文受版权保护】替了。DOS就是典型的命令行操作系统，早本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】期的unix和linux也是，后来lin未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netux用上了开源的桌面引擎，也具备了桌面系本文作者：唐霜，转载请注明出处。【转载请注明来源】统，不过仍然保留着CLI，特别是作为远程【本文首发于唐霜的博客】【本文受版权保护】服务器，通过CLI对服务器进行操作可以节【本文受版权保护】【版权所有，侵权必究】省网络宽带，可以快速完成一些任务。
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】安装gulp-cli
Gulp CLI就是说可以在命令行里面运【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net行gulp相关的命令。这就依赖于gulp本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。-cli，因此，我们必须先安装gulp-【本文受版权保护】【未经授权禁止转载】cli。
原创内容，盗版必究。
如果我们不会在命令行下使用gulp，也【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。可以不用安装gulp-cli。但是如果我著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】们大部分情况下，还是在开发的时候通过gu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netlp自动完成
我们想要的一些任务，所以我们大部分情况下本文作者：唐霜，转载请注明出处。原创内容，盗版必究。都会在命令行中执行gulp任务。
转载请注明出处：www.tangshuang.net【作者：唐霜】$ npm install -g gulp-cli
gulp-cli使用
gulp cli使用非常简单，在命令行里转载请注明出处：www.tangshuang.net【转载请注明来源】可以这样输入：
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】$ gulp # 如果后面没有跟任务名称，就直接默认使用default这个任务 $ gulp my_task$ gulp one_task two_task
参数标记
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netgulp 只有你需要熟知的参数标记，其他转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。所有的参数标记只在一些任务需要的时候使用【作者：唐霜】转载请注明出处：www.tangshuang.net。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。- -v 或 –version 【转载请注明来源】本文版权归作者所有，未经授权不得转载。会显示全局和项目本地所安装的 gulp 【本文受版权保护】【转载请注明来源】版本号 【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有，侵权必究】
- –require modul【本文首发于唐霜的博客】原创内容，盗版必究。e_path 将会在执行之前 reqiu原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。re 一个模块。这对于一些语言编译器或者本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。需要其他应用的情况来说来说很有用。你可以原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。使用多个–require 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- –gulpfile gulp未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】file_path 手动指定一个 gul著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netpfile 的路径，这在你有很多个 gu本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】lpfile 的时候很有用。这也会将 C【本文首发于唐霜的博客】【未经授权禁止转载】WD 设置到该 gulpfile 所在目【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。录 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】
- –cwd dir_path 【版权所有，侵权必究】【版权所有，侵权必究】手动指定 CWD。定义gulpfile查【版权所有，侵权必究】【转载请注明来源】找的位置，此外，所有的相应的依赖（req本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】uire）会从这里开始计算相对路径 【原创不易，请尊重版权】【本文受版权保护】转载请注明出处：www.tangshuang.net【转载请注明来源】
- -T 或 –tasks 会显【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。示所指定 gulpfile 的 task【原创不易，请尊重版权】【原创内容，转载请注明出处】 依赖树 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】
- –tasks-simple 【未经授权禁止转载】【原创内容，转载请注明出处】会以纯文本的方式显示所载入的 gulpf【原创内容，转载请注明出处】【转载请注明来源】ile 中的 task 列表 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【本文受版权保护】
- –color 强制 gulp【未经授权禁止转载】转载请注明出处：www.tangshuang.net 和 gulp 插件显示颜色，即便没有颜【原创内容，转载请注明出处】未经授权，禁止复制转载。色支持 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。
- –no-color 强制不显本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。示颜色，即便检测到有颜色支持 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】
- –silent 禁止所有的 【本文受版权保护】本文版权归作者所有，未经授权不得转载。gulp 日志 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
举个栗子：
【本文首发于唐霜的博客】【本文首发于唐霜的博客】$ gulp --gulpfile gulpfile.es6.js $ gulp task $ gulp --gulpfile gulpfile.js $ gulp task
上面执行了两次gulp task任务，但【原创不易，请尊重版权】【原创内容，转载请注明出处】是因为第一次和第二次对应的gulpfil【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e不同，在两个gulpfile里面，可能原创内容，盗版必究。本文作者：唐霜，转载请注明出处。task任务的具体内容不同，所以两次任务著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net的执行结果也可能不一样。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【版权所有，侵权必究】使用自己的参数
【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】我知道你会想到一个问题，可不可以在执行g原创内容，盗版必究。【转载请注明来源】ulp任务的时候，传入参数？gulp默认原创内容，盗版必究。【作者：唐霜】并没有支持这项功能，但这并不代表我们不可【关注微信公众号：wwwtangshuangnet】【转载请注明来源】以做到，因为我们可以使用其他的包来得到命原创内容，盗版必究。原创内容，盗版必究。令行中的参数。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。在命令行中，一般短横线表示参数，但是不同本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。的软件不一样，比如下面这几种都经常看到：
【本文受版权保护】著作权归作者所有，禁止商业用途转载。-v --version-name my_name --name my_name-name=my_name --name=my_name
这些并没有统一的标准，但我个人而言，更倾【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。向于-v和–name=my_【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。name这两种，第一种是缩写，比如-v实本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。际上表示的是-version，但用-v可【本文受版权保护】著作权归作者所有，禁止商业用途转载。以更加简单，而且用一个短横线表示这个参数本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net不需要值。第二种是两个短横线加参数名加等著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。号加参数值，这种表达方法非常直观，普通人著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】大部分都看得懂。基于这种想法，我使用了自【本文首发于唐霜的博客】【版权所有，侵权必究】己写的process.args，你可以引用我写的这个模块，实现CLI参本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】数的风格。
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文受版权保护】下面具体讲一下process.args的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。使用方法：
【原创不易，请尊重版权】【转载请注明来源】【未经授权禁止转载】1）下载到本地
【原创内容，转载请注明出处】【作者：唐霜】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。$ git clone https://github.com/tangshuang/process.args.git
2）在gulpfile.js文件中引用它
【未经授权禁止转载】【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】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);
});
3）在命令行中按照process.arg本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。s的规范使用参数进行执行
转载请注明出处：www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】$ gulp my_task -d --name="Nicok"
赶紧自己尝试一下吧。关于gulpfile【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的东西，会在下一节详细介绍。
【本文受版权保护】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】gulpfile实例
gulpfile是什么呢？简单的说，它是【原创内容，转载请注明出处】【作者：唐霜】gulp命令的入口文件，当你在命令行里面未经授权，禁止复制转载。【未经授权禁止转载】执行glup my_task的时候，实际【转载请注明来源】【关注微信公众号：wwwtangshuangnet】上可以理解为执行node gulpfil【版权所有，侵权必究】【原创内容，转载请注明出处】e.js my_task，当然，这只是有原创内容，盗版必究。未经授权，禁止复制转载。利于你理解，实际上比这复杂一些。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【转载请注明来源】我们把这个gulpfile.js创建在项【原创内容，转载请注明出处】【本文首发于唐霜的博客】目的根目录下，这样就可以在项目中规定一些【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】我们自己的gulp任务，这些任务在gul【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。pfile.js里面进行注册，即gulp未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net.task，这会在下一章API里面讲到。
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】使用ES6
我们可以用gulpfile.babel.【版权所有】唐霜 www.tangshuang.net【转载请注明来源】js代替gulpfile.js（直接重命【版权所有，侵权必究】【版权所有，侵权必究】名即可），这样可以借助babel使用ES【原创不易，请尊重版权】原创内容，盗版必究。6新特性，不过我们也需要在项目中安装ba【本文受版权保护】转载请注明出处：www.tangshuang.netbel：
【转载请注明来源】转载请注明出处：www.tangshuang.net$ npm install --save-dev babel-core $ npm install --save-dev babel-register $ npm install --save-dev babel-preset-latest
在项目根目录下创建.babelrc文件，转载请注明出处：www.tangshuang.net原创内容，盗版必究。内容如下：
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。{
"presets": ["latest"]
}
这样，就可以在gulpfile中使用ES原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。6代码。
本文版权归作者所有，未经授权不得转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。部署项目任务
有的时候，我们的项目任务比较复杂，不可能【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net通过一个gulpfile.js实现全部我【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】们想要的任务功能，否则会让这个文件超级大本文作者：唐霜，转载请注明出处。【作者：唐霜】。
转载请注明出处：www.tangshuang.net
这个时候，我们可能需要将不同的任务分到著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】不同的文件模块中去。我的做法是创建一个g【转载请注明来源】未经授权，禁止复制转载。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中进行任务注册：
原创内容，盗版必究。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。var gulp = require('gulp');
gulp.task('add',require('./gulp/task/add'));
这样就可以将gulp任务进行分解，当你的原创内容，盗版必究。【本文首发于唐霜的博客】gulp任务特别多的时候，可以有效的进行未经授权，禁止复制转载。【原创内容，转载请注明出处】管理。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】是不是已经有点感觉了，赶紧手动尝试一下吧【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。
下一章，就将进入正式的gulp编程，你会【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。了解怎么样创建自己的gulp任务，以及怎未经授权，禁止复制转载。【本文首发于唐霜的博客】样部署代码。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。任务
这一章将讲解如何创建gulp任务，如何执【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。行它，如何撰写一个具有实际功能和处理流程【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。的任务。
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】转载请注明出处：www.tangshuang.net创建任务
上一章已经讲到，单凭一个gulpfile转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。是无法完成整个gulp流程管理的，大多数著作权归作者所有，禁止商业用途转载。【作者：唐霜】时候，我们都通过创建一堆有联系的、以gu【版权所有，侵权必究】【转载请注明来源】lpfile为入口的js代码，以此构建复【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net杂的gulp管理体系。
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】转载请注明出处：www.tangshuang.net原创内容，盗版必究。上一章已经介绍了如何在gulpfile中【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net引入其他js文件作为具体任务的执行模块，转载请注明出处：www.tangshuang.net【转载请注明来源】所以这里就不介绍了，我将直接具体的代码块【转载请注明来源】【关注微信公众号：wwwtangshuangnet】来讲清楚如何创建任务。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。在gulp任务体系代码中这样进行任务的注【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。册：
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。gulp.task('my_task',require('./tasks/my_task.js'));
这样就创建好了一个gulp任务，在命令行【版权所有，侵权必究】【本文首发于唐霜的博客】中，执行
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】$ gulp my_task
require的那个脚本中的模块就会被执【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】行。
【本文受版权保护】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net我们来具体看下my_task.js的结构【未经授权禁止转载】【版权所有，侵权必究】：
【原创不易，请尊重版权】【本文首发于唐霜的博客】未经授权，禁止复制转载。var gulp = require('glup');module.exports = function() {
// do your task};
主体结构就这么简单，所有要执行的东西都写未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。在这个function里面。
未经授权，禁止复制转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。未经授权，禁止复制转载。如何和你的项目结合
但是讲了这么多，你可能还没搞清楚，你用g【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ulp到底为什么。实际上，gulp根本不本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是你的目标，你只是在开发你自己的项目的时未经授权，禁止复制转载。【本文首发于唐霜的博客】候，把gulp作为一个工具，而不是为了写【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一大堆gulp任务，你的项目才是主，gu【转载请注明来源】著作权归作者所有，禁止商业用途转载。lp只是辅助。举个栗子吧，你的项目里面会【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。不断的用一个模板去生成新的文件，但是每一原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】次生成的时候，都因为传入的参数不同而不同原创内容，盗版必究。【原创不易，请尊重版权】。利用gulp就可以实现这个目的，在上面【版权所有，侵权必究】【未经授权禁止转载】的function里面写上读取模板、构建【关注微信公众号：wwwtangshuangnet】【作者：唐霜】参数替换、输出到具体的文件等流程，这样就未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】实现了这个目的，但是最终，gulp这些东【本文首发于唐霜的博客】【作者：唐霜】西跟用户没关系，只有那些重复生成的文件才【版权所有，侵权必究】【本文受版权保护】是用户最后要用的。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netgulp比较厉害的，是可以自动去执行一些著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】代码，后面一章我们会具体将gulp的ap【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】i，这一章我们主要讲你应该怎么使用api【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】，知道怎么使用了，下一章再知道都有哪些a【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netpi，将快速掌握gulp。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。比如，我们现在得到一个gulp的api：未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netgulp.dest，这个api的功能是用转载请注明出处：www.tangshuang.net【未经授权禁止转载】来输出内容到某个文件的。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。pipe（管道）这个概念
gulp里面有一个非常有名的概念，叫“管未经授权，禁止复制转载。【本文首发于唐霜的博客】道”，也就是pipe，但它不直接作用于g【原创内容，转载请注明出处】【转载请注明来源】ulp，而是要作用于其他结果上。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。pipe是node中的一个概念，可以处理转载请注明出处：www.tangshuang.net【版权所有，侵权必究】Stream，而gulp.src这个ap著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。i恰巧输出的是vinyl files的s本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】tream，因此可以用pipe来进行处理著作权归作者所有，禁止商业用途转载。【本文受版权保护】。
原创内容，盗版必究。
pipe是gulp和grunt的一个重【未经授权禁止转载】【转载请注明来源】大区别，关于两则的区别，会在专门的章节讲【版权所有，侵权必究】【未经授权禁止转载】到。它就像一根一根的管道，东西从这个口进【原创内容，转载请注明出处】【本文首发于唐霜的博客】去，下个口出来，样子就变了，再进入下一个【访问 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【本文受版权保护】转载请注明出处：www.tangshuang.net.dest(‘./build未经授权，禁止复制转载。【原创不易，请尊重版权】/xxx’))这一节管道来讲【转载请注明来源】本文作者：唐霜，转载请注明出处。一下：
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】原创内容，盗版必究。gulp.dest是一个api，但是它只未经授权，禁止复制转载。【作者：唐霜】有一个参数，告诉程序处理结果将输出到&#【版权所有，侵权必究】【作者：唐霜】8217;./build/xxxR【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net17;这个文件，但是要输出什么内容呢？要【原创不易，请尊重版权】【版权所有，侵权必究】输出的内容来自上一个pipe。
本文作者：唐霜，转载请注明出处。【作者：唐霜】【版权所有，侵权必究】再来说下pipe(minify())这个转载请注明出处：www.tangshuang.net【转载请注明来源】管道，minify来自一个gulp插件，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。需要在项目中执行npm install 【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】gulp-minify-css R【转载请注明来源】著作权归作者所有，禁止商业用途转载。11;save-dev。这根管道都干了什【转载请注明来源】【作者：唐霜】么呢？将上一个pipe的结果（被放在了内【作者：唐霜】【本文受版权保护】存中）交给minify这个插件，插件处理【版权所有，侵权必究】【本文首发于唐霜的博客】完之后，就进入下一个管道。
【转载请注明来源】【作者：唐霜】【转载请注明来源】本文作者：唐霜，转载请注明出处。逻辑处理
当然了，gulp不是只能用管道来进行处理【原创不易，请尊重版权】原创内容，盗版必究。的，你也可以自己处理，比如：
【作者：唐霜】【本文受版权保护】转载请注明出处：www.tangshuang.netmodule.exports = function() {
copy(from,to);
minify(from,to);
};
上面的copy, minify是我自己乱原创内容，盗版必究。【原创内容，转载请注明出处】写的两个函数，只是为了说明，你可以不用g【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ulp的api也可以使用简单的js逻辑代【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net码完成任务，只不过后面你学到watch的本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】时候，就会考虑使用gulp。
【原创内容，转载请注明出处】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net现在动手写一个操作文件的gulp任务吧。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。
下一章介绍gulp的api。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。API
这一章介绍gulp的所有api，现在来看原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，gulp的api一共就4个：gulp.【作者：唐霜】原创内容，盗版必究。src, gulp.dest, gulp未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。.task, gulp.watch. 之原创内容，盗版必究。【原创不易，请尊重版权】前还有gulp.run等api，可以用来【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】在一个task中去触发另外一个task，【作者：唐霜】著作权归作者所有，禁止商业用途转载。但是现在这个api被去掉了，因为有了新的【转载请注明来源】转载请注明出处：www.tangshuang.net依赖替代方案，在讲gulp.task这一【本文受版权保护】未经授权，禁止复制转载。节的时候会详细去说。
未经授权，禁止复制转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】- gulp.src 获得所有符合条件的文件本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net信息 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【转载请注明来源】
- gulp.dest 将信息输出到某个文件 未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】
- gulp.task 注册一个gulp任务 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。
- gulp.watch 监听文件变化 【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。
gulp.src
输出（Emits）符合所提供的匹配模式（【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】glob）或者匹配模式的数组（array【未经授权禁止转载】原创内容，盗版必究。 of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。
【转载请注明来源】未经授权，禁止复制转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】用法
gulp.src(globs[, options])
gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));
参数
globs
描述：所要读取的 glob 或者包含 g【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。lobs 的数组。
【版权所有】唐霜 www.tangshuang.net
类型： String 或 Array
【未经授权禁止转载】
glob 请参考 node-glob 语法 或者，你也可以直接写文件的路径。
options
描述：通过 glob-stream 所传【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。递给 node-glob 的参数。
【访问 www.tangshuang.net 获取更多精彩内容】
类型： Object
除了 node-glob 和 glob-stream 所支持的参数外，gulp 增加了一些额外本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的选项参数：
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】options.buffer
【原创内容，转载请注明出处】【原创不易，请尊重版权】【转载请注明来源】描述：是否返回buffer，或者说是返回转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】buffer（true）还是返回file本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】_contents（false）。
【版权所有，侵权必究】
类型： Boolean
【版权所有】唐霜 www.tangshuang.net
默认值： true
如果该项被设置为 false，那么将会以【本文受版权保护】原创内容，盗版必究。 stream 方式返回 file.co本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ntents 而不是文件 buffer 原创内容，盗版必究。原创内容，盗版必究。的形式。这在处理一些大文件的时候将会很有【未经授权禁止转载】未经授权，禁止复制转载。用。注意：插件可能并不会实现对 stre【本文受版权保护】【原创不易，请尊重版权】am 的支持。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netoptions.read
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。描述：是否去读取文件的内容。
未经授权，禁止复制转载。
类型： Boolean
原创内容，盗版必究。
默认值： true
如果该项被设置为 false， 那么 f著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ile.contents 会返回空值（n原创内容，盗版必究。未经授权，禁止复制转载。ull），也就是并不会去读取文件。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文受版权保护】本文作者：唐霜，转载请注明出处。options.base
未经授权，禁止复制转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net描述：重新指定src的base，不好理解【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，具体看下面的解释。
【未经授权禁止转载】
类型： String
【作者：唐霜】
默认值： 将会加在 glob 之前 (原创内容，盗版必究。【原创不易，请尊重版权】请看 glob2base)
请想像一下在一个路径为 client/j未经授权，禁止复制转载。【原创不易，请尊重版权】s/somedir 的目录中，有两个文件【作者：唐霜】未经授权，禁止复制转载。：1.js，2.js ，现在我们这样：
原创内容，盗版必究。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】gulp.src('client/js/**/*.js')
上面匹配的结果是什么呢？会得到两个文件的【原创不易，请尊重版权】【作者：唐霜】路径和内容，路径是client/js/s【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。omedir/1.js和client/j【本文受版权保护】【版权所有，侵权必究】s/somedir/2.js，但对于gu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。lp而言，这个时候的base是clien本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net/js/，也就是glob开始匹配之前的字原创内容，盗版必究。【原创内容，转载请注明出处】符串。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】如果不规定options.base，那么【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】在后面的pipe中，就会以options【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。.base=’client/【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。js/’进行处理，比如我们在【转载请注明来源】未经授权，禁止复制转载。末尾执行.pipe(gulp.dest(【转载请注明来源】【本文首发于唐霜的博客】‘dist/name/【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】217;))，那么会得到两个文件：dis【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nett/name/somedir/1.js和转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。dist/name/somedir/2.【作者：唐霜】本文版权归作者所有，未经授权不得转载。js。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。但是有的时候我们想要的是dist/nam转载请注明出处：www.tangshuang.net【作者：唐霜】e/js/somedir/1.js，而不【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是上面的文件路径。这个时候options未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。.base就可以派上用场。
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【作者：唐霜】gulp.src('client/js/**/*.js',{
base: 'client'
}).pipe(gulp.dest('dist/name'))
这样就可以得到想要的结果。
【本文受版权保护】【未经授权禁止转载】它这里面就有一个相对路径的感觉，比如它找原创内容，盗版必究。转载请注明出处：www.tangshuang.net到了client/js/somedir/【作者：唐霜】【版权所有，侵权必究】1.js，但是你设置了base字段为cl【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ient，所以它就会把client这个目【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】录层级从client/js/somedi本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】r/1.js中移除，剩下的部分就是js/【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netsomedir/1.js，把这个部分放到【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】dest规定的目录中去。
【原创内容，转载请注明出处】【本文受版权保护】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】这就是gulp.src，赶紧动手去自己试【作者：唐霜】【本文受版权保护】试吧。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】gulp.dest
能被 pipe 进来（实际上，只能在pi转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。pe中使用，因为它没有参数用于传入文件来【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】源），并且将会写文件。并且重新输出（em【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。its）所有数据，因此你可以将它 pip【版权所有，侵权必究】【转载请注明来源】e 到多个文件夹。如果某文件夹不存在，将转载请注明出处：www.tangshuang.net【本文受版权保护】会自动创建它。
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。用法
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
文件将被写入的路径（输出目录）。也可以传【原创不易，请尊重版权】【本文受版权保护】入一个函数，在函数中返回相应路径，这个函【本文受版权保护】【原创内容，转载请注明出处】数也可以由 vinyl 文件实例 来提供原创内容，盗版必究。【未经授权禁止转载】。
【访问 www.tangshuang.net 获取更多精彩内容】
文件被写入的路径是以所给的相对路径根据【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。所给的目标目录计算而来。类似的，相对路径【本文受版权保护】【版权所有，侵权必究】也可以根据所给的 base 来计算。 请转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net查看上述的 gulp.src 来了解更多本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】信息。
options
描述：传入一些附加参数
【版权所有，侵权必究】
类型： Object
options.cwd
原创内容，盗版必究。【作者：唐霜】【原创内容，转载请注明出处】描述：以哪个目录作为输出的当前目录。
【转载请注明来源】
类型： String
本文版权归作者所有，未经授权不得转载。
默认值： process.cwd() 【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】（命令执行时所在的目录，一般而言，是gu转载请注明出处：www.tangshuang.net【本文受版权保护】lpfile所在的目录）
输出目录的 cwd 参数，只在所给的输出著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。目录是相对路径时候有效。 什么意思呢？举未经授权，禁止复制转载。【未经授权禁止转载】个栗子：
【原创内容，转载请注明出处】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】.pipe(gulp.dest('dist',{
cwd: 'components/'
}))
如果没有cwd的话，dist目录会和gu【本文受版权保护】著作权归作者所有，禁止商业用途转载。lpfile同级，但现在dist目录会在原创内容，盗版必究。【本文受版权保护】components目录下面，compo【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。nents目录如果不存在的话会被自动创建【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】options.mode
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【原创内容，转载请注明出处】未经授权，禁止复制转载。描述：八进制权限字符，用以定义所有在输出未经授权，禁止复制转载。【版权所有，侵权必究】目录中新创建的目录的权限。
【本文首发于唐霜的博客】
类型： String
【本文受版权保护】
默认值： 0777
gulp.task
定义一个使用 Orchestrator 实现的任务（task）。
【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【转载请注明来源】我看了一下Orchestrator，感觉著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net它就是一个专门处理任务的模块，gulp应【作者：唐霜】【原创内容，转载请注明出处】该是用了它的部分功能。它在task的功能原创内容，盗版必究。转载请注明出处：www.tangshuang.net上，比gulp.task齐全，可以add【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。, start, stop, hasTa原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】sk, on, onAll这些api。玩【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。儿过jquery的对on的机制应该都不陌【版权所有，侵权必究】【原创不易，请尊重版权】生。但是gulp.task感觉只是它的a转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】dd功能。
【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】用法
gulp.task(name[, deps], fn)
gulp.task('somename', function() {
// 做一些事
});
参数
name
描述：任务的名字，如果你需要在命令行中运著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。行你的某些任务，那么，请不要在名字中使用【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】空格。
【访问 www.tangshuang.net 获取更多精彩内容】
类型：String
deps
描述：一个包含任务列表的数组，这些任务会著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】在你当前任务运行之前完成。
【本文首发于唐霜的博客】
类型： Array
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});
注意： 你的任务是否在这些前置依赖的任务【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net完成之前运行了？请一定要确保你所依赖的任【未经授权禁止转载】未经授权，禁止复制转载。务列表中的任务都使用了正确的异步执行方式【未经授权禁止转载】【原创不易，请尊重版权】：使用一个 callback，或者返回一【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。个 promise 或 stream。
【未经授权禁止转载】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】fn
描述：该函数定义任务所要执行的一些操作。
【访问 www.tangshuang.net 获取更多精彩内容】
类型：Function
通常来说，它的内部会是这种形式：gulp本文作者：唐霜，转载请注明出处。【本文受版权保护】.src().pipe(someplug原创内容，盗版必究。本文作者：唐霜，转载请注明出处。in())。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net异步任务支持
【原创不易，请尊重版权】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。任务可以异步执行，如果 fn 能做到以下【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】其中一点：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。- 接受一个 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
});
});
注意上面的cb（callback）是一个转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】函数，它被作为参数传给了gulp.tas【原创不易，请尊重版权】【未经授权禁止转载】k的第二个参数（是个函数）。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】- 返回一个 stream 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
- 返回一个 promise 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
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【版权所有】唐霜 www.tangshuang.net数执行，也就是说，gulp 会一次性运行【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。所有的 task 并且不做任何等待。如果【作者：唐霜】本文版权归作者所有，未经授权不得转载。你想要创建一个序列化的 task 队列，【转载请注明来源】【原创不易，请尊重版权】并以特定的顺序执行，你需要做两件事：
【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。- 给出一个提示，来告知 task 什么时候【转载请注明来源】【本文首发于唐霜的博客】执行完毕， 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net
- 并且再给出一个提示，来告知一个 task著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 依赖另一个 task 的完成。 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。
对于这个例子，让我们先假定你有两个 ta【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。sk，”one”著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net 和 “two”本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，并且你希望它们按照这个顺序执行：
【作者：唐霜】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。- 在 “one” 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net中，你加入一个提示，来告知什么时候它会完著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net成：可以再完成时候返回一个 callba【转载请注明来源】本文版权归作者所有，未经授权不得转载。ck，或者返回一个 promise 或 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netstream，这样系统会去等待它完成。 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【作者：唐霜】
- 在 “two” 本文作者：唐霜，转载请注明出处。【转载请注明来源】中，你需要添加一个提示来告诉系统它需要依【转载请注明来源】转载请注明出处：www.tangshuang.net赖第一个 task 完成。 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【作者：唐霜】
因此，这个例子的实际代码将会是这样：
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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是不分顺序的，但【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。是在two这个任务中，需要依赖one这个【转载请注明来源】【关注微信公众号：wwwtangshuangnet】任务，所以实际上，当default中的o著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ne和two同时开始执行的时候，two并【本文首发于唐霜的博客】【原创不易，请尊重版权】不会马上执行，而是要等到one执行的ok【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】的时候再执行。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。回调函数
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】上面的例子中，多次出现了cb这个回调函数未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net，它是用来干嘛的，代表什么？
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。其实这个回调函数并不做任何操作意义上的事【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，而是用来通知gulp这个task完成了原创内容，盗版必究。【作者：唐霜】，不管完成的怎么样，任务已经可以被忽略了【转载请注明来源】【转载请注明来源】。我更愿意把它称为done(fail)，【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】其中的参数如果是null或undefin转载请注明出处：www.tangshuang.net原创内容，盗版必究。ed，则表示成功了，否则表示失败了，里面原创内容，盗版必究。原创内容，盗版必究。的内容就是告诉gulp失败的信息。
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。gulp.task('my_task',function(done){
var data = request();
if(data.error) {
done(data.msg)
}
else {
done();
}
// .. other code ..
});
在done()后面其实还可以执行其他的代本文版权归作者所有，未经授权不得转载。【作者：唐霜】码，因为done不是return，程序不【转载请注明来源】【关注微信公众号：wwwtangshuangnet】会停止执行。但是对于gulp.task而【作者：唐霜】【原创内容，转载请注明出处】言，它已经接收到任务执行情况的信息了，后转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。面的执行对它来说没什么意义，随便你怎么做未经授权，禁止复制转载。原创内容，盗版必究。都可以。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net这也就是为什么上面说如果要让b任务依赖a【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。任务，要给ａ任务传一个done作为回调函未经授权，禁止复制转载。【本文首发于唐霜的博客】数的原因。因为当b任务开始被执行时，其实【转载请注明来源】原创内容，盗版必究。先是等待状态，要让a先执行，但是等待归等本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。待，你总得告诉我什么时候开始执行吧，这个【作者：唐霜】【版权所有，侵权必究】“告诉”动作就是done函数，只要在任务【作者：唐霜】本文作者：唐霜，转载请注明出处。执行过程中执行了done函数，就相当于告【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】诉b可以开始执行了。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【作者：唐霜】未经授权，禁止复制转载。ok，关于gulp的task这个api就【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。介绍完了，赶紧去自己实践一下。
【本文受版权保护】【作者：唐霜】未经授权，禁止复制转载。原创内容，盗版必究。gulp.watch
监视文件，并且可以在文件发生改动时候做一本文作者：唐霜，转载请注明出处。【作者：唐霜】些事情。 它总会返回一个 EventEm【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】itter 来发射（emit） chan本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ge 事件。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。用法
gulp.watch(glob [, opts], tasks)gulp.watch(glob [, opts, cb])
它有两种用法，下面分开讲解。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】gulp.watch(glob[, opts], tasks)
监听（单个或多个）文件的变动，一旦有变，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。就执行规定的task，这些task是通过著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。gulp.task注册的。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。glob
描述：要监听的文件。
本文作者：唐霜，转载请注明出处。
类型： String or Array
本文版权归作者所有，未经授权不得转载。
一个 glob 字符串，或者一个包含多【原创不易，请尊重版权】【作者：唐霜】个 glob 字符串的数组，用来指定具体【转载请注明来源】著作权归作者所有，禁止商业用途转载。监控哪些文件的变动。
opts
类型： Object
【本文受版权保护】未经授权，禁止复制转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。传给gaze的参数。 什么是gaze呢？这个项目已经【转载请注明来源】本文版权归作者所有，未经授权不得转载。被原作者删掉了，我通过其他的一些资料了解【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。到，它其实是一个监听文件变动的模块，gu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】lp应该也是使用了这个包。
【本文受版权保护】【转载请注明来源】从使用上看，我还没有看到怎么用opts这著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。个参数，好像大部分情况都不会用到。我感觉本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】应该是指在什么情况下才执行tasks，比【本文受版权保护】【转载请注明来源】如只有在文件被删除的情况下执行task，本文作者：唐霜，转载请注明出处。【作者：唐霜】或者在文件被修改或删除的时候执行。总之我原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】感觉这个opts是用来填写下面的even未经授权，禁止复制转载。【版权所有，侵权必究】t.type的。
【版权所有，侵权必究】【原创不易，请尊重版权】tasks
描述：要执行的任务列表
本文版权归作者所有，未经授权不得转载。
类型： Array
【未经授权禁止转载】
需要在文件变动后执行的一个或者多个通过本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 gulp.task() 创建的 tas【本文受版权保护】【关注微信公众号：wwwtangshuangnet】k 的名字，
gulp.watch('js/**/*.js', ['uglify','reload']);
上面这个动作会监听js目录下的js脚本的【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】变动，一旦变动了，就会执行uglify,未经授权，禁止复制转载。【转载请注明来源】 reload这两个任务。
【作者：唐霜】【本文受版权保护】【本文受版权保护】【原创不易，请尊重版权】gulp.watch(glob[, opts, callback])
监听（单个或多个）文件的变动，一旦有变，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】就执行callback这个回调函数。
【作者：唐霜】【未经授权禁止转载】转载请注明出处：www.tangshuang.netglob
描述：要监听的文件。
【访问 www.tangshuang.net 获取更多精彩内容】
类型： String or Array
【转载请注明来源】
一个 glob 字符串，或者一个包含多本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】个 glob 字符串的数组，用来指定具体【作者：唐霜】【原创内容，转载请注明出处】监控哪些文件的变动。
opts
类型： Object
未经授权，禁止复制转载。
传给 gaze 的参数。
callback(event)
描述：文件变动时要执行的回调函数。
【本文首发于唐霜的博客】
类型： Function
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
callback 会被传入一个名为 ev【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ent 的对象。这个对象描述了所监控到的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。变动：
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】event.type
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】类型： String
【未经授权禁止转载】
发生的变动的类型：added, cha原创内容，盗版必究。转载请注明出处：www.tangshuang.netnged 或者 deleted。
event.path
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】原创内容，盗版必究。类型： String
【版权所有】唐霜 www.tangshuang.net
触发了该事件的文件的路径。
gulp.watch的返回值
gulp.watch的返回值是一个可以被转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。监听的发射器，什么叫“可以被监听”，就是【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。可以用on去挂载监听事件的回调函数，例如原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。：
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【本文受版权保护】var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
回调函数会在change事件的末尾执行。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。回调函数的event和上面的event是【本文受版权保护】【版权所有，侵权必究】一样的。实际上，我们采用gulp.wat未经授权，禁止复制转载。【版权所有，侵权必究】ch(files,function(e)【原创内容，转载请注明出处】【转载请注明来源】{})和用on再去挂载是差不多的。
本文版权归作者所有，未经授权不得转载。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】gulp.watch是作为一个自动化控制原创内容，盗版必究。【版权所有，侵权必究】的最主要的特性，也是提高我们工作效率的重转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net要助手，应该多写一些例子来锻炼一下。
本文版权归作者所有，未经授权不得转载。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。插件的使用
本章主要讲解在gulp的体系里，插件是个本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】什么概念，可以怎么使用，都有哪些常用的有未经授权，禁止复制转载。【本文首发于唐霜的博客】必要介绍的插件。以及会在这些具体的插件介【本文受版权保护】【原创内容，转载请注明出处】绍里，简单的介绍插件如何使用。
【本文受版权保护】【本文受版权保护】【本文首发于唐霜的博客】由于篇幅的限制，本章不会对每一个插件最非著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。常详细的介绍，作为开发者，最好的办法就是【未经授权禁止转载】【本文受版权保护】去插件的主页或github查看原始文档，【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。甚至通过阅读源码来了解插件原理，从而更好【原创不易，请尊重版权】未经授权，禁止复制转载。的使用插件。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】概念
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。gulp插件，其实还是一个npm包，只不未经授权，禁止复制转载。【原创内容，转载请注明出处】过这个npm包是提供给gulp用的，但不【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。一定要依赖gulp。gulp比grunt著作权归作者所有，禁止商业用途转载。【本文受版权保护】有一点好处就是，gulp是干净的，本身只【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】有几个并不强大的api，借助管道机制，不【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。需要繁琐的配置。插件是决定gulp功能强未经授权，禁止复制转载。原创内容，盗版必究。大的机制。
【本文首发于唐霜的博客】
插件从功能上讲，就是对原始体系的补充。
但是从npm包的角度而言，并不是只有gu【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】lp插件可以用到gulp中，所有的包都可【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。以用进来，只要它可以在node环境中运行转载请注明出处：www.tangshuang.net【未经授权禁止转载】，你都可以require到gulpfil本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.nete的体系里面使用。
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net到哪里去找插件
【作者：唐霜】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。直接在npm官网搜索既可以了。https://www.npmjs.co【转载请注明来源】原创内容，盗版必究。m/browse/keyword/gul【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。p
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。继续往下读，我会带你一点点了解怎么使用插【原创内容，转载请注明出处】【作者：唐霜】件，大部分情况下都是熟能生巧，多用用，插本文作者：唐霜，转载请注明出处。【转载请注明来源】件的东西就心领神会了。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。
使用插件通用性方法
大部分插件是以管道内的处理方法使用的。什【版权所有】唐霜 www.tangshuang.net【转载请注明来源】么叫“管道内”？就是作为参数传给.pip【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】e。
【版权所有，侵权必究】【版权所有，侵权必究】【本文受版权保护】著作权归作者所有，禁止商业用途转载。gulp.src(xxx).pipe(plugin)...
我们来举例子：gulp-uglify
【作者：唐霜】原创内容，盗版必究。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netgulp-uglify是最常用的js压缩转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】插件，怎么使用它呢？首先要让项目安装这个【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net包：
【未经授权禁止转载】转载请注明出处：www.tangshuang.net$ npm install --save-dev gulp-uglify
然后在gulpfile体系的js中这样使著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】用：
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】var gulp = require('gulp');var uglify = require('gulp-uglify');
gulp.task('my_task',function(){
gulp.src('js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('build'));
});
一般一个插件都先通过require返回一原创内容，盗版必究。未经授权，禁止复制转载。个函数，这个函数主要用在pipe中，也就【原创不易，请尊重版权】【未经授权禁止转载】是说不需要传入要处理什么东西，而是会传入【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。一些options。
原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。在使用的时候，大部分情况都是直接把这个函【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。数作为pipe()的参数传入即可。
本文作者：唐霜，转载请注明出处。【本文受版权保护】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。知道怎么用，实际上也就知道了一般插件应该原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】怎么去开发，无非就是接收pipe传入的内【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】容，把结果返回给pipe输出。
【原创内容，转载请注明出处】未经授权，禁止复制转载。原创内容，盗版必究。js预编译
我们通常写js都是写符合ES标准的Jav本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】aScript代码，但是就像其他语言一样原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，我们可以用其他语言来写代码，再通过编译【作者：唐霜】【本文受版权保护】得到可以被执行的js代码，借助一些解释器著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，可以不用编译为js就可以直接执行。目前著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。比较知名的有CoffeeScript和T未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netypeScript，Coffee比较成熟著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，而且借鉴了声明式和ruby的很多风格，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。TypeScript是微软开发的，这两年原创内容，盗版必究。原创内容，盗版必究。刚热，不够成熟，但是据说谷歌用TypeS转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】cript写了angular2.0，这可【作者：唐霜】转载请注明出处：www.tangshuang.net能将推动TypeScript超越Coff转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ee。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】不过从目前公认的情况看，Coffee还是【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net比TypeScript的用户多，得到的认本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。可度也高，只不过这两年人气稍有下降。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。gulpfile.coffee
如果你想在编写gulpfile体系时使用转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。coffee，可以这样做：
【原创不易，请尊重版权】【未经授权禁止转载】【转载请注明来源】$ npm install coffee-script --save-dev
然后将gulpfile.js改为gulp【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】file.coffee，这样在gulpf【作者：唐霜】原创内容，盗版必究。ile体系里面，就使用coffee进行编【原创内容，转载请注明出处】【本文首发于唐霜的博客】写。
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】gulp-coffee
这是gulp的一个插件，它是用来把你项目【作者：唐霜】【转载请注明来源】里面的.coffee文件编译为.js文件【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。的。
原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netnpm install gulp-coffee --save-dev
文档：https://github.com/c【本文受版权保护】著作权归作者所有，禁止商业用途转载。ontra/gulp-coffee
【原创内容，转载请注明出处】
使用：
var coffee = require('gulp-coffee');
gulp.src('./coffee/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('./js/'))
看上去非常好用。如果你不使用coffee【本文受版权保护】本文版权归作者所有，未经授权不得转载。写代码，可能也用不上。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】js压缩
我们写完js代码之后，希望把代码进行压缩【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】，最后提供一个.min.js文件。
【本文首发于唐霜的博客】原创内容，盗版必究。gulp-uglify
文档：https://www.npmjs.co转载请注明出处：www.tangshuang.net【未经授权禁止转载】m/package/gulp-uglif【本文受版权保护】【本文受版权保护】y
【转载请注明来源】【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这个插件是gulp里面最常用来压缩js文【版权所有，侵权必究】【作者：唐霜】件的
本文作者：唐霜，转载请注明出处。【本文受版权保护】著作权归作者所有，禁止商业用途转载。$ npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify');
glup.src('...')
.pipe(uglify())
.pipe(gulp.dest(...))
这样就可以把你写的代码压缩到目录中去了。
本文作者：唐霜，转载请注明出处。【作者：唐霜】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】gulp-rename
文档：https://www.npmjs.co【未经授权禁止转载】【作者：唐霜】m/package/gulp-renam著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】e
未经授权，禁止复制转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。这个插件可以重命名文件
【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net$ 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。
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【本文首发于唐霜的博客】【未经授权禁止转载】后面我们还会讲到将多个文件合并为一个文件【版权所有】唐霜 www.tangshuang.net【本文受版权保护】。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。css预编译
前面讲了js的预编译，情况差不多，我们也【未经授权禁止转载】未经授权，禁止复制转载。可以通过其他语言先写出一种程序，在编译成本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】css提供给浏览器使用。
【未经授权禁止转载】【本文首发于唐霜的博客】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】目前最流行的也有两种less和sass(【原创内容，转载请注明出处】【版权所有，侵权必究】scss)。scss是sass的3.0版【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本，但是写法完全不同，scss更接近cs著作权归作者所有，禁止商业用途转载。【转载请注明来源】s的风格，推荐使用。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】gulp-less
文档：https://www.npmjs.co【作者：唐霜】【原创不易，请尊重版权】m/package/gulp-less
【未经授权禁止转载】【版权所有，侵权必究】把.less编译成.css，如果你在自己【原创不易，请尊重版权】【本文受版权保护】的项目里面是使用.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.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。把.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【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】的，其实.sass和.scss是一个东西【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net，可以被同一个编译器编译，所以实际上上面【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的是gulp-sass也应该是可以编译.本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】scss的。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net而且这个插件的作者不再推荐大家使用这个插【未经授权禁止转载】转载请注明出处：www.tangshuang.net件。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】gulp-ruby-sass
这个插件也是和gulp-sass差不多功【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】能，你可以看下文档：https://www.npmjs.co【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】m/package/gulp-ruby-【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】sass
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】安装sass的一些问题
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。sass是基于ruby的，也就是说你的电【原创内容，转载请注明出处】【转载请注明来源】脑上得安装ruby。安装的时候还要在你的【作者：唐霜】【本文受版权保护】系统环境变量中加入ruby的PATH。在转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】windows上安装node-sass也著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】是个经常被吐槽的事情。可以使用淘宝镜像安原创内容，盗版必究。【版权所有，侵权必究】装，具体看这里。
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【本文受版权保护】【未经授权禁止转载】文件合并
写完js之后，想把他们合并为一个文件。
原创内容，盗版必究。未经授权，禁止复制转载。gulp-concat
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。这个插件的作用是将多个js文件合并为一个【本文受版权保护】转载请注明出处：www.tangshuang.netjs文件。
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。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.tangshuang.net如果它的第一个参数是string类型，那【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】么直接把这个string作为合并生成的文【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net件名。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】object
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】{
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，当我们把多个文件合并为一个文件的时候，【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】应该提供.map，这样浏览器可以找到原始【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net的文件，有利于后期调试。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。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进行压缩。
未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】gulp-clean-css
文档：https://github.com/s未经授权，禁止复制转载。原创内容，盗版必究。cniro/gulp-clean-css
【原创内容，转载请注明出处】原创内容，盗版必究。$ npm install gulp-clean-css --save-dev
用法
cleanCSS([options], [callback])
参数
options
著作权归作者所有，禁止商业用途转载。【转载请注明来源】要知道options怎么用，还要看CleanCSS的原始文档，原来npm的世界里都是依赖来【原创不易，请尊重版权】【转载请注明来源】依赖去，一个包的核心功能，可能仅仅是对另原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】外一个包的演进，或者多个包的整合，实际上本文版权归作者所有，未经授权不得转载。【本文受版权保护】gulp也是对多个包的整合，在给自己披上原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net了一层壳而已。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。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.tangshuang.net回调函数。
【本文首发于唐霜的博客】未经授权，禁止复制转载。回调函数的参数是minify()的结果，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。它会包含minified的文件信息。举个【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。例子：
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netvar 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【本文首发于唐霜的博客】未经授权，禁止复制转载。-sourcemaps简单的生成：
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。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'));
});
});
图片压缩
图片压缩( gulp-imagemin 【原创内容，转载请注明出处】【本文首发于唐霜的博客】) + 深度压缩( imagemin-p【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ngquant )
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】压缩PNG、JPEG、GIF和SVG图像【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】gulp-imagemin集成了 gif著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。sicle 、 jpegtran 、 o【未经授权禁止转载】【原创内容，转载请注明出处】ptipng 、 svgo 这4个插件。【原创不易，请尊重版权】原创内容，盗版必究。而imagemin-pngquant是i本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netmagemin插件的一个扩展插件，用于深【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。度压缩图片。
【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。安装命令：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】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')); // 输出路径
});
执行命令：
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netgulp images
注：一般我们所使用的图片压缩方法，都会对【未经授权禁止转载】转载请注明出处：www.tangshuang.net图像造成一定的损失，这个和压缩比率有一定【原创内容，转载请注明出处】【版权所有，侵权必究】的关系。通常我们所说的无损压缩，也只是控【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net制在我们肉眼难以发现的范围内。换句话来说【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，在你保存切图的同时，其实已经对图像造成【本文首发于唐霜的博客】【转载请注明来源】了一定的损失，因为没什么人会选择100%【本文受版权保护】【未经授权禁止转载】最佳质量导出图片。两者是差不多的概念。
未经授权，禁止复制转载。【原创不易，请尊重版权】服务器、自动刷新
网页自动刷新（文件变动后即时刷新页面）(【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 gulp-livereload ) +未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。 静态服务器：( gulp-webser原创内容，盗版必究。原创内容，盗版必究。ver )：
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net安装命令：
原创内容，盗版必究。转载请注明出处：www.tangshuang.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']);
执行命令：
本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】gulp
清除文件
gulp-clean
文档：https://www.npmjs.co【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。m/package/gulp-clean
【本文首发于唐霜的博客】
这个插件的作者已经放弃插件了。
del
文档：https://www.npmjs.co【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netm/package/del
【本文受版权保护】
del不算是gulp插件，但是也可以用【原创内容，转载请注明出处】原创内容，盗版必究。来删除文件。
$ npm install --save del
const del = require('del');
del(['tmp/*.js', '!tmp/unicorn.js']).then(paths => {
console.log('Deleted files and folders:', paths.join(''));
});
但是有一点需要注意，它是异步的。
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】webpack
webpack的主要目的是为了压缩文件，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。虽然gulp也有uglify，但是web转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。pack的火热，让大家无论如何都想使用它【原创不易，请尊重版权】【本文首发于唐霜的博客】。
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】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传配置信息：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。return gulp.src('src/entry.js')
.pipe(webpack({
watch: true,
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
],
},
}))
.pipe(gulp.dest('dist/'));
上面有一个watch字段，这个是插件自带【本文首发于唐霜的博客】【原创不易，请尊重版权】的，不算webpack自带的。
【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net你也可以把webpack的配置信息写在一【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。个文件里面：
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netreturn gulp.src('src/entry.js')
.pipe(webpack( require('./webpack.config.js') ))
.pipe(gulp.dest('dist/'));
你甚至可以使用一个不同版本的webpac【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】k作为引擎：
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netnpm 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/'));
});
你可以看到，通过安装一个完整版本的web本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netpack，并且把它作为参数传给gulp-未经授权，禁止复制转载。【原创不易，请尊重版权】webpack，也是一种尝试。
【作者：唐霜】未经授权，禁止复制转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。插件还提供一个回调函数，用来使用webp【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netack的输出信息：
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】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/'));
});
当然，如果想要了解更多，还得去了解web著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。pack本身，这里是官网。
【原创内容，转载请注明出处】【本文首发于唐霜的博客】karma
在gulp的体系里面使用karma进行单【作者：唐霜】【未经授权禁止转载】元测试。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。gulp已经拥有了karma需要的机制，著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。就是注册任务的时候可以提供一个回调函数，著作权归作者所有，禁止商业用途转载。【本文受版权保护】回调函数的参数是一个状态终结器。因此，不【版权所有，侵权必究】【版权所有，侵权必究】需要额外安装karma插件来运行karm转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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的时原创内容，盗版必究。【未经授权禁止转载】候，调用karma进行测试，karma的【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net配置全部都放在karma.conf.js【本文受版权保护】【原创内容，转载请注明出处】里面，实际上这个过程可以看做是一个触发过【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。程，跟在命令行执行karma命令一样。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。唯一比较有趣的是，可以直接给karma 【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。service传done这个回调函数的参【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。数（实际上也是个函数），一旦done()【版权所有，侵权必究】未经授权，禁止复制转载。被执行，那么test任务就结束了，我们所【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】感知到的，就是命令行里面这个task结束【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net。
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net要了解更多的测试的信息，你还得去学习ka本文版权归作者所有，未经授权不得转载。【转载请注明来源】rma，这里是官网。
著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。而且前端的单元测试比较复杂，因为前端还要本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】涉及到浏览器等问题，希望你能够为这个问题【未经授权禁止转载】【本文受版权保护】贡献内容。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】插件开发
gulp插件总是返回一个object mode形式的stream来做这些事情：
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。- 接收vinyl File对象 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。
- 输出vinyl File对象 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
这通常被叫做 transform streams (有时候也叫做 through str【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.neteams)。transform stre本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ams 是可读又可写的，它会对传给它的对【作者：唐霜】【本文受版权保护】象做一些转换的操作。
【原创内容，转载请注明出处】【本文受版权保护】修改文内容
【作者：唐霜】本文版权归作者所有，未经授权不得转载。Vinyl文件可以通过三种不同形式来访问转载请注明出处：www.tangshuang.net【本文受版权保护】文件内容：
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】原创内容，盗版必究。- Streams 【转载请注明来源】本文作者：唐霜，转载请注明出处。
- Buffers 【本文首发于唐霜的博客】【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- 空 (null) – 对于删本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。除, 清理, 等操作来说，会很有用，因为【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。这时候内容是不需要处理的。 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。
有用的资源
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。- File object 【作者：唐霜】【原创内容，转载请注明出处】【转载请注明来源】本文作者：唐霜，转载请注明出处。
- PluginError 【转载请注明来源】本文版权归作者所有，未经授权不得转载。
- event-stream 【未经授权禁止转载】转载请注明出处：www.tangshuang.net
- BufferStream 【转载请注明来源】【转载请注明来源】【本文受版权保护】
- gulp-util 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。
插件范例
【作者：唐霜】未经授权，禁止复制转载。- sindresorhus’ 【原创内容，转载请注明出处】原创内容，盗版必究。gulp plugins 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】未经授权，禁止复制转载。
- Fractal’s gulp未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 plugins 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
- gulp-replace 著作权归作者所有，禁止商业用途转载。【本文受版权保护】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。
关于 stream
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net如果你不熟悉 stream，你可以阅读这【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。些来
【未经授权禁止转载】【未经授权禁止转载】- https://github.com/s【原创不易，请尊重版权】【本文受版权保护】ubstack/stream-handb【作者：唐霜】【版权所有】唐霜 www.tangshuang.netook 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】
- http://nodejs.org/ap【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。i/stream.html 【版权所有，侵权必究】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】
其他的一些为 gulp 创建的和使用的，【作者：唐霜】【原创内容，转载请注明出处】但又并非通过 stream 去处理的库，原创内容，盗版必究。转载请注明出处：www.tangshuang.net在 npm 上都会被打上 gulpfri【作者：唐霜】转载请注明出处：www.tangshuang.netendly 标签。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】基本规范
你在开发一个gulp插件的时候，最好遵守本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】下面的规范：
【原创内容，转载请注明出处】未经授权，禁止复制转载。- 你的插件不应该去做一些现有 node 模【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】块已经能很容易做到的事情
【转载请注明来源】 比如：删除一个文件夹并不需要做成一个 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。gulp 插件，在 task 里使用一个【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net类似 del 这样的插件即可。
【转载请注明来源】 只是为了封装而封装一些的东西进去，这只【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】会增加很多低质量的插件到生态中，这不符合【作者：唐霜】【本文受版权保护】 gulp 的期望。
原创内容，盗版必究。 gulp 插件都是以文件为基础操作的，【原创内容，转载请注明出处】【作者：唐霜】如果你发现你正在把一些很复杂的操作塞进 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】stream 中去，那么，请直接写一个 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】node 模块就好。
本文作者：唐霜，转载请注明出处。 一个好的 gulp 插件例子像是 gu【未经授权禁止转载】未经授权，禁止复制转载。lp-coffee，coffee-scr【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netipt 模块并不能直接和 vinyl 做著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】很好的适配，因此，才去封装它来使用相应的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。功能，并且将一些比较痛苦的操作抽象出来，未经授权，禁止复制转载。原创内容，盗版必究。做成更简单的 gulp 插件来使用。 本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。
- 你的插件应该只做一件事，并且做好。
未经授权，禁止复制转载。 避免使用配置选项，使得你的插件能胜任不原创内容，盗版必究。【原创内容，转载请注明出处】同场合的任务。
【未经授权禁止转载】 比如：一个 JS 压缩插件不应该有一个【版权所有，侵权必究】【未经授权禁止转载】加头部的选项 【未经授权禁止转载】原创内容，盗版必究。
- 你的插件不能去做一些其他插件做的事：
转载请注明出处：www.tangshuang.net 不应该去拼接，用 gulp-conca【原创不易，请尊重版权】【作者：唐霜】t 去做
【访问 www.tangshuang.net 获取更多精彩内容】 不应该去增加头部，用 gulp-hea本文作者：唐霜，转载请注明出处。【未经授权禁止转载】der 去做
【作者：唐霜】 不应该去增加尾部，用 gulp-foo【本文受版权保护】【版权所有，侵权必究】ter 去做
【关注微信公众号：wwwtangshuangnet】 如果是一个常用的可选的操作，那么，请在【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net文档中注明你的插件通常和其他某个插件一起未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】使用
【未经授权禁止转载】 在你的插件中使用其他的插件，这能大大减【版权所有，侵权必究】【转载请注明来源】少你的代码量，并保证生态系统的稳定。 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
- 你的插件必须被测试过
【本文首发于唐霜的博客】 测试一个插件很简单，你甚至不需要 gu本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】lp 就能测试
【版权所有，侵权必究】 参考其他的插件是怎么做的 未经授权，禁止复制转载。未经授权，禁止复制转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net
- 在 package.json 中增加一个本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】名为 gulpplugin 的关键字，这【作者：唐霜】未经授权，禁止复制转载。可以让它能在我们的搜索中出现 【转载请注明来源】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。转载请注明出处：www.tangshuang.net
- 不要再 stream 里面抛出错误
转载请注明出处：www.tangshuang.net 你应该以触发 error 事件来代替
本文作者：唐霜，转载请注明出处。 如果你在 stream 外面遇到错误，未经授权，禁止复制转载。原创内容，盗版必究。比如在创建 stream 时候发现错误的【原创不易，请尊重版权】【本文受版权保护】配置选项等，那么你应该抛出它。 【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】
- 错误需要加上以你插件名字作为前缀
【作者：唐霜】 比如： gulp-replace: C本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】annot do regexp repl【版权所有，侵权必究】转载请注明出处：www.tangshuang.netace on a stream
本文作者：唐霜，转载请注明出处。 使用 gulp-util 的 Plug本文版权归作者所有，未经授权不得转载。【转载请注明来源】inError 类来完成它 【作者：唐霜】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
- file.contents 的类型需要总著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。是在输入输出中保持一致
原创内容，盗版必究。 如果 file.contents 为空本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】 (不可读) 请将他忽略，并传过去
本文版权归作者所有，未经授权不得转载。 如果 file.contents 是一本文作者：唐霜，转载请注明出处。【转载请注明来源】个 stream，但是你不支持，那么请触【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net发一个错误
本文版权归作者所有，未经授权不得转载。 不要把 stream 硬转成 buff转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。er 来使你的插件支持 stream，这本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】会引发很严重的问题。 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【转载请注明来源】
- 在你处理完成之前，不要将 file 传到未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net下游去 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。
- 使用 file.clone() 来复制一【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】个文件或者创建另一个以此为基础的文件 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
- 使用我们 模块推荐页 上列举的模块来让你未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的开发更加轻松 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】
- 不要把 gulp 作为一个依赖
【未经授权禁止转载】 使用 gulp 来测试你的插件的工作流【关注微信公众号：wwwtangshuangnet】【转载请注明来源】这的确很酷，但请务必确保你将它放到 de原创内容，盗版必究。【原创不易，请尊重版权】vDependency 中
本文版权归作者所有，未经授权不得转载。 在你的插件中依赖 gulp，这意味着安未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net装你的插件的用户将会重新安装一遍 gul转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】p 以及所有它所依赖的东西。
【转载请注明来源】 没有任何理由说明你需要将 gulp 写【本文首发于唐霜的博客】原创内容，盗版必究。到你的插件代码中去，如果你发现你必须这么【作者：唐霜】【转载请注明来源】做，那么请开一个 issue，我们会帮你原创内容，盗版必究。【未经授权禁止转载】解决。 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】
为什么这些指导这么严格？
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】gulp 的目标是为了让用户觉得简单，通【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。过提供一些严格的指导，我们就能提供一致并著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。且高质量的生态系统给大家。不过，这确实给本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】插件作者增加了一些需要考虑的东西，但是也【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】确保了后面的问题会更少。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。如果我不遵守这些，会发生什么？
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。npm 对每个人来说是免费的，你可以开发【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】任何你想要开发的东西出来，并且不需要遵守转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。这个规定。我们承诺测试机制将会很快建立起【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net来，并且加入我们的插件搜索中。如果你坚持未经授权，禁止复制转载。【原创内容，转载请注明出处】不遵守插件导览，那么这会反应在我们的打分本文版权归作者所有，未经授权不得转载。【本文受版权保护】/排名系统上，人们都会更加喜欢去使用一个【转载请注明来源】原创内容，盗版必究。 “更加 gulp̶【作者：唐霜】未经授权，禁止复制转载。1; 的插件。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】一个插件大概会是怎么样的？
【转载请注明来源】【原创不易，请尊重版权】原创内容，盗版必究。【原创内容，转载请注明出处】// 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
【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net极力推荐让你所写的插件支持 stream【原创内容，转载请注明出处】【原创不易，请尊重版权】。这里有一些关于让插件支持 stream著作权归作者所有，禁止商业用途转载。【作者：唐霜】 的一些有用信息。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。请确保使用处理错误的最佳实践，并且加入一未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net行代码，使得 gulp 能在转换内容的期本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net间在捕获到第一个错误时候正确报出错误。
原创内容，盗版必究。【转载请注明来源】转载请注明出处：www.tangshuang.net
什么是stream
概念比较复杂，简单的说，它就是我们经常说【转载请注明来源】【原创内容，转载请注明出处】的“流”，比如“流媒体”“流式文件”。这本文版权归作者所有，未经授权不得转载。【转载请注明来源】种文件的特征就是可以“流”式传输，这里用转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】双引号引起来的“流”，就是stream。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】未经授权，禁止复制转载。那么什么是流式传输呢？就是一个文件不是一著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】次性传输，而是像流水一样，慢慢传，可以分本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net成一段一段的，而这一段一段的东西，我们就【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net可以成为buffer，但是buffer不【原创内容，转载请注明出处】未经授权，禁止复制转载。是stream，buffer只是stre转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netam附带了一种东西。
【版权所有，侵权必究】【转载请注明来源】比较典型的是视频，我们看网络视频的时候，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net不会等到整个视频都缓存到浏览器了才开始观【原创不易，请尊重版权】【作者：唐霜】看，而是打开浏览器的时候，视频就已经流式著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】下载，下载到一定的量的时候就可以开始播放【转载请注明来源】【版权所有，侵权必究】。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】而在node的体系里，读取文件可以以st本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netream的形式进行读取，读取过程中会产生著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】buffer。除了读，stream还可以【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】被写入。但是stream不是文件本身，而【版权所有，侵权必究】转载请注明出处：www.tangshuang.net是文件的内容的某种形式，所以只要文件的内【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。容还是以stream的形式存在，那这个文著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。件相当于只有灵魂没有肉体。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。使用stream
让我们来实现一个用于在文件头部插入一些文著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本的插件，这个插件支持 file.con著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】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;
上面的插件可以像这样使用：
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。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的概【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。念。从我个人的理解角度讲，buffer的【作者：唐霜】本文作者：唐霜，转载请注明出处。本质就是一个缓存区，这个缓存区用于交换数著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】据。它不一定在stream中才使用，但是【转载请注明来源】本文作者：唐霜，转载请注明出处。是使用最常见的。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net大一个比方，有1000000000000【原创内容，转载请注明出处】【版权所有，侵权必究】00吨水要从海洋运往沙漠，现在这个运输的著作权归作者所有，禁止商业用途转载。【作者：唐霜】过程中所有的水就是stream，水从大海原创内容，盗版必究。未经授权，禁止复制转载。流向了沙漠，但是是怎么流的呢？可不是直接【本文首发于唐霜的博客】【原创不易，请尊重版权】整个砸进沙漠里，而是靠人们发明的一种神秘原创内容，盗版必究。【原创内容，转载请注明出处】盒子进行运输，这个盒子在大海和沙漠之间以【版权所有】唐霜 www.tangshuang.net【转载请注明来源】光速来回运动，把大海里的水按照每次200原创内容，盗版必究。转载请注明出处：www.tangshuang.net吨进行运输，但是由于一些情况，人们把盒子著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的容量调整到了1000吨，这个盒子就是b著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netuffer。
【原创内容，转载请注明出处】
在读取一个大文件的时候，node不会一著作权归作者所有，禁止商业用途转载。【转载请注明来源】次性把所有的文件内容都读取到内存中，而是【未经授权禁止转载】【原创不易，请尊重版权】一点一点的读，读完的部分写入另外一个文件本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，这个过程就是stream的运动过程，那【版权所有，侵权必究】【转载请注明来源】么这个“一点一点”的东西在哪里呢？就在b未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netuffer里，每次读一点，就放到buff【作者：唐霜】本文作者：唐霜，转载请注明出处。er里，你可以对这个buffer进行改写【本文首发于唐霜的博客】未经授权，禁止复制转载。，这样最终的文件跟原始文件就有非常大的区【未经授权禁止转载】【未经授权禁止转载】别。
使用buffer
如果你的插件依赖着一个基于 buffer【版权所有，侵权必究】【本文首发于唐霜的博客】 处理的库，你可能会选择让你的插件以 b【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netuffer 的形式来处理 file.co【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ntents。让我们来实现一个在文件头部【转载请注明来源】【版权所有】唐霜 www.tangshuang.net插入额外文本的插件：
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。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;
上述的插件可以这样使用：
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netvar gulp = require('gulp');
var gulpPrefixer = require('gulp-prefixer');
gulp.src('files/**/*.js')
.pipe(gulpPrefixer('prepended string'))
.pipe(gulp.dest('modified-files'));
处理 stream
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】不幸的是，当 gulp.src 如果是以【作者：唐霜】【原创内容，转载请注明出处】 stream 的形式，而不是 buff【版权所有，侵权必究】【原创不易，请尊重版权】er，那么，上面的插件就会报错。如果可以本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，你也应该让他支持 stream 形式。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】请查看使用 Stream 处理 获取更多转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】信息。
本文作者：唐霜，转载请注明出处。【转载请注明来源】【原创不易，请尊重版权】【原创内容，转载请注明出处】一些基于 buffer 的插件
- gulp-coffee 【本文受版权保护】转载请注明出处：www.tangshuang.net
- gulp-svgmin 转载请注明出处：www.tangshuang.net【本文受版权保护】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
- gulp-marked 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
- gulp-svg2ttf 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
测试
大多数的插件使用 mocha，shoul本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。d 以及 event-stream 来做【未经授权禁止转载】【版权所有，侵权必究】测试。下面的例子也将会使用这些工具。 测【转载请注明来源】【版权所有】唐霜 www.tangshuang.net试插件的流处理（streaming）模式
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netvar 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 模式
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】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();
});
});
});
});
一些拥有高质量的测试用例的插件
未经授权，禁止复制转载。【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】- gulp-cat 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】
- gulp-concat 【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
相关产品对比
grunt
grunt也是一个任务流程管理工具，跟g【未经授权禁止转载】【版权所有，侵权必究】ulp非常像。但就我个人的使用感觉而言，【转载请注明来源】【版权所有，侵权必究】grunt比gulp要重，会grunt的【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】人学习gulp会比较快，只要快速了解st【作者：唐霜】本文版权归作者所有，未经授权不得转载。ream、pipe就可以马上上手gulp【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，但是了解gulp的人去看grunt会一【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。头雾水，都是什么跟什么。
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】其实grunt和gulp相比，没有str【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】eam、pipe这两个东西，但是多了很多未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net配置。gulp的插件完全就是一个基于st著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ream或buffer的包，脱离gulp著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】也完全没有问题。但是grunt的插件必须【版权所有，侵权必究】【版权所有，侵权必究】是为grunt准备的，因为需要在grun本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】tfile的体系里对插件进行配置。
【原创不易，请尊重版权】【本文首发于唐霜的博客】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】比如说使用grunt-compress这【版权所有，侵权必究】【原创不易，请尊重版权】个插件，你一定要在grunt的confi【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】g中对它进行配置，否则这个插件根本不知道原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net自己要干什么，但是gulp-uglify本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】就不一样，这个插件非常明确知道自己要干什未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。么，无非就是处理stream或者buff【本文受版权保护】著作权归作者所有，禁止商业用途转载。er。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】原创内容，盗版必究。所以，这也是很多人喜欢gulp的原因。
【转载请注明来源】原创内容，盗版必究。FIS（百度产品）
最近百度的FIS3也火起来了，FIS是一原创内容，盗版必究。【版权所有，侵权必究】个全套方案，比grunt、gulp体系大【原创内容，转载请注明出处】未经授权，禁止复制转载。很多，它希望一次性解决前端开发的所有流程【转载请注明来源】【原创不易，请尊重版权】控制问题，从风格到开发过程到测试到发布，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net全部靠FIS解决。
【本文受版权保护】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【作者：唐霜】不过由于是国内团队开发，FIS的社区不如【未经授权禁止转载】【转载请注明来源】grunt、gulp，github说明了【作者：唐霜】【本文受版权保护】一切。我觉得更重要的一个原因在于，FIS【作者：唐霜】【本文首发于唐霜的博客】是百度内部的符属性产品，而gulp是由一本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】个团队专门为解决这个问题打造的。FIS可【本文受版权保护】本文版权归作者所有，未经授权不得转载。以随时停止，但gulp团队一定会长时间维原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net护下去。
【作者：唐霜】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】webpack
webpack最早的概念也是pack，就【版权所有，侵权必究】未经授权，禁止复制转载。是打包。但是到了后来也逐渐涉及流程管理，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】试图把整个开发过程都囊括进来。
原创内容，盗版必究。【本文受版权保护】资源
- 官网：http://gulpjs.com/ 【本文首发于唐霜的博客】【转载请注明来源】未经授权，禁止复制转载。【转载请注明来源】
- github: https://github.com/g本文版权归作者所有，未经授权不得转载。【作者：唐霜】ulpjs/gulp 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 中文网站：http://www.gulpjs.co【关注微信公众号：wwwtangshuangnet】【本文受版权保护】m.cn/ 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】
- stackoverfollow：http://stackoverflow【未经授权禁止转载】原创内容，盗版必究。.com/questions/tagge【版权所有，侵权必究】未经授权，禁止复制转载。d/gulp 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】
- 一些使用技巧 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- node api 转载请注明出处：www.tangshuang.net原创内容，盗版必究。
