返回：唐霜｜书

gulp中文入门教程

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

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

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

Gulp是一个基于node的流程管理工具【转载请注明来源】转载请注明出处：www.tangshuang.net，它可以实现将一系列有组织的任务，按照编本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。程逻辑进行执行，实现开发甚至其他方面的任转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】务管理。

前端开发已经不再只是搞搞样式，处理处理交转载请注明出处：www.tangshuang.net【转载请注明来源】互那么简单，前后端分离，后端只为前端提供【转载请注明来源】著作权归作者所有，禁止商业用途转载。api数据接口，以前url路由、html未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。结构都需要后端来架构，如今这些全靠前端来未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net处理，前端也具备了工程性。

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

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

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

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

gulp官方文档原创内容，盗版必究。

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

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

gulp中文文档（翻译）【访问 www.tangshuang.net 获取更多精彩内容】

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

原创内容，盗版必究。

【未经授权禁止转载】

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

快速入门【本文受版权保护】

【未经授权禁止转载】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

这一节你不需要知道背后的原理，只需要按照转载请注明出处：www.tangshuang.net原创内容，盗版必究。文章中的提示一步一步进行操作。

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

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

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

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

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

$ sudo apt install nodejs

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

$ sudo apt install npm$ npm update -g npm

3) 安装gulp-cli【原创内容，转载请注明出处】

gulp-cli就是可以在命令行中使用g【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ulp default这样的命令的工具。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。也就是说你不安装gulp-cli，就无法【作者：唐霜】【本文受版权保护】在命令行里运行gulp相关的命令。

$ npm install -g gulp-cli

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

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

4) 创建一个项目【关注微信公众号：wwwtangshuangnet】

$ mkdir my_project$ cd my_project$ npm init

在出现的交互信息中，填写和你项目相关的信转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。息。

5) 把gulp作为这个项目的一个依赖未经授权，禁止复制转载。

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

$ npm install --save-dev gulp

上面我们留了一个问题，说为什么上面安装的【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】是gulp-cli，而不是gulp。这里本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net就有答案。

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

我们npm install的gulp将会【版权所有，侵权必究】【未经授权禁止转载】被保存到my_project这个目录下的【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。node_mudules目录下去，pac【未经授权禁止转载】【原创内容，转载请注明出处】kage.json文件的dependen转载请注明出处：www.tangshuang.net【转载请注明来源】cesDev字段也会被增加一个gulp的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。记录。

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

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

6) 创建一个gulpfile.js文件

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

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

7) 执行gulp任务【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

$ gulp my_task

这个时候，你就会发现，在你的命令行里面每【本文受版权保护】转载请注明出处：www.tangshuang.net隔5秒出现一下’I am o【转载请注明来源】【未经授权禁止转载】ut!’这句话。使用Ctrl著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】+C退出来。

【本文受版权保护】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

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

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】未经授权，禁止复制转载。

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

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

这一章将让你学会如何安装gulp环境，以著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。及如何在项目中加入gulp，从而可以使用著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】gulp。

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

你可能从来没有接触过node，不要紧，我【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】会教会一个完全不懂node的人如何来搭建转载请注明出处：www.tangshuang.net原创内容，盗版必究。。当然了，你必须得懂javascript原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，而且最好你对前端领域比较热门的东西都有本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。所了解，这样才不至于在提到一些东西的时候【版权所有，侵权必究】【本文受版权保护】不之所以。

让我们开始吧！【转载请注明来源】

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

Node【访问 www.tangshuang.net 获取更多精彩内容】

这一节主要讲如何去配置一个node环境，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net除了安装node之外，我们还需要安装np【作者：唐霜】【关注微信公众号：wwwtangshuangnet】m。

node安装【未经授权禁止转载】

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

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

1）采用apt安装【访问 www.tangshuang.net 获取更多精彩内容】

ubuntu可以使用apt快捷安装：原创内容，盗版必究。

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

$ sudo apt install nodejs

2）编译安装未经授权，禁止复制转载。

【原创内容，转载请注明出处】【作者：唐霜】转载请注明出处：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

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

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

3） windows下面安装node原创内容，盗版必究。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

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

安装npm原创内容，盗版必究。

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

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

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

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

$ sudo apt install npm

$ npm install -g npm

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

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

注意：升级npm之后，应该先关掉你的te【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】rminal后重新打开，我不知道这是为什未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】么，但是实践上需要这样做，否则仍然还在使【本文受版权保护】本文版权归作者所有，未经授权不得转载。用老版本的npm。

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

安装git原创内容，盗版必究。

git不算是node环境的东西，但是是安著作权归作者所有，禁止商业用途转载。【本文受版权保护】装一些特定的npm包需要的必备武器。

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

$ sudo apt install git

安装python2.7 （可选）【版权所有】唐霜 www.tangshuang.net

最好还是安装一下python，可能会在后本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】面的一些插件中需要。当然，你也可以暂时先【转载请注明来源】著作权归作者所有，禁止商业用途转载。不安装，到需要的时候再安装。

$ sudo apt install python

安装bower （可不安装，扩展阅读）【未经授权禁止转载】

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

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

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

所以我在实践中，大部分浏览器端要用的包都【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net用bower进行安装。

你也可以不安装bower，等到要的时候再【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。安装。

$ npm install -g bower

注意，bower默认情况下不允许用roo原创内容，盗版必究。未经授权，禁止复制转载。t用户去执行。不过一般ubuntu默认都【转载请注明来源】【作者：唐霜】不是root用户。但是比较坑的是，在ub原创内容，盗版必究。【本文首发于唐霜的博客】untu上面，有时候npm又得用root本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】去执行，这取决于文件的可写权限。所以你只著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】需要记住，npm需要sudo，bower【未经授权禁止转载】未经授权，禁止复制转载。不需要sudo就可以了。或许这也是我更喜未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。欢用bower的原因。

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

现在，你已经搭建好了node环境，你的n著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ode环境里面还有npm和git，现在可【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net以随便写一个js文件，然后用node去执本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。行一下它试试。要退出node执行状态，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netCtrl+C就可以了。
【原创内容，转载请注明出处】未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net【本文受版权保护】原创内容，盗版必究。【转载请注明来源】

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

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

每一个node模块包都有一个packag未经授权，禁止复制转载。【未经授权禁止转载】e.json，而我们在node环境下开发【作者：唐霜】原创内容，盗版必究。项目，整个项目对于node而已，也是一个未经授权，禁止复制转载。【转载请注明来源】包，所以也需要在我们的项目根目录下放一个著作权归作者所有，禁止商业用途转载。【转载请注明来源】package.json文件。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

这篇文章，主要是来讲解package.j未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netson的结构、主要字段和于gulp相关的【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】地方。

我们看一个package.json文件的【转载请注明来源】著作权归作者所有，禁止商业用途转载。内容，它总是会包含这么一些内容：

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【本文受版权保护】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

{
  "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 包的开发依赖

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

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

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

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

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

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

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

$ npm install --save-dev gulp-minify

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

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

现在你已经了解了package.json【本文受版权保护】【原创不易，请尊重版权】，马上在你的项目目录下创建一个packa本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ge.json吧。创建完之后直接运行np【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】m install会安装所有依赖的包，快本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】试试看！

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

gulp-cli【访问 www.tangshuang.net 获取更多精彩内容】

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

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

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

安装gulp-cli本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

很简单，直接用npm就可以安装：【本文受版权保护】

【作者：唐霜】未经授权，禁止复制转载。【原创内容，转载请注明出处】

$ npm install gulp-cli

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

至于gulp-cli具体的用法，在CLI著作权归作者所有，禁止商业用途转载。【转载请注明来源】一章详细讲。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

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

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

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

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

安装gulp-cli著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。【本文受版权保护】转载请注明出处：www.tangshuang.net

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

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

我们想要的一些任务，所以我们大部分情况下【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】都会在命令行中执行gulp任务。

$ npm install -g gulp-cli

gulp-cli使用转载请注明出处：www.tangshuang.net

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

gulp cli使用非常简单，在命令行里【转载请注明来源】【原创内容，转载请注明出处】可以这样输入：

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

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

参数标记【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

-v 或 –version 转载请注明出处：www.tangshuang.net【版权所有，侵权必究】会显示全局和项目本地所安装的 gulp 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net版本号

【关注微信公众号：wwwtangshuangnet】

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

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

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

–require modul本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。e_path 将会在执行之前 reqiu【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。re 一个模块。这对于一些语言编译器或者【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】需要其他应用的情况来说来说很有用。你可以著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】使用多个–require

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

【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net

【未经授权禁止转载】

–gulpfile gulp【本文受版权保护】本文作者：唐霜，转载请注明出处。file_path 手动指定一个 gul本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】pfile 的路径，这在你有很多个 gu【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】lpfile 的时候很有用。这也会将 C【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】WD 设置到该 gulpfile 所在目著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。录

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

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

【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net

–cwd dir_path 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。手动指定 CWD。定义gulpfile查【未经授权禁止转载】【作者：唐霜】找的位置，此外，所有的相应的依赖（req【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。uire）会从这里开始计算相对路径

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

【作者：唐霜】

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

-T 或 –tasks 会显本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】示所指定 gulpfile 的 task【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。依赖树

【作者：唐霜】

原创内容，盗版必究。

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

【关注微信公众号：wwwtangshuangnet】

–tasks-simple 未经授权，禁止复制转载。未经授权，禁止复制转载。会以纯文本的方式显示所载入的 gulpf【作者：唐霜】本文版权归作者所有，未经授权不得转载。ile 中的 task 列表

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

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

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

–color 强制 gulp【作者：唐霜】著作权归作者所有，禁止商业用途转载。和 gulp 插件显示颜色，即便没有颜未经授权，禁止复制转载。【版权所有，侵权必究】色支持

【访问 www.tangshuang.net 获取更多精彩内容】

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

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

转载请注明出处：www.tangshuang.net

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

–no-color 强制不显原创内容，盗版必究。未经授权，禁止复制转载。示颜色，即便检测到有颜色支持

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】

–silent 禁止所有的未经授权，禁止复制转载。【原创不易，请尊重版权】gulp 日志

【作者：唐霜】

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

【转载请注明来源】

【本文受版权保护】

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

举个栗子：【关注微信公众号：wwwtangshuangnet】

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

上面执行了两次gulp task任务，但著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】是因为第一次和第二次对应的gulpfil本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。e不同，在两个gulpfile里面，可能【未经授权禁止转载】【本文受版权保护】task任务的具体内容不同，所以两次任务著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】的执行结果也可能不一样。

使用自己的参数转载请注明出处：www.tangshuang.net

我知道你会想到一个问题，可不可以在执行g【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netulp任务的时候，传入参数？gulp默认【作者：唐霜】【原创内容，转载请注明出处】并没有支持这项功能，但这并不代表我们不可原创内容，盗版必究。原创内容，盗版必究。以做到，因为我们可以使用其他的包来得到命未经授权，禁止复制转载。原创内容，盗版必究。令行中的参数。

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

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

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

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

下面具体讲一下process.args的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。使用方法：

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

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

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

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

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】转载请注明出处：www.tangshuang.net转载请注明出处：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转载请注明出处：www.tangshuang.net

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

赶紧自己尝试一下吧。关于gulpfile【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的东西，会在下一节详细介绍。

转载请注明出处：www.tangshuang.net【作者：唐霜】【原创内容，转载请注明出处】

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

gulpfile是什么呢？简单的说，它是【本文首发于唐霜的博客】未经授权，禁止复制转载。gulp命令的入口文件，当你在命令行里面本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。执行glup my_task的时候，实际【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net上可以理解为执行node gulpfil转载请注明出处：www.tangshuang.net【作者：唐霜】e.js my_task，当然，这只是有原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net利于你理解，实际上比这复杂一些。

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

我们把这个gulpfile.js创建在项【作者：唐霜】转载请注明出处：www.tangshuang.net目的根目录下，这样就可以在项目中规定一些未经授权，禁止复制转载。【原创不易，请尊重版权】我们自己的gulp任务，这些任务在gul【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。pfile.js里面进行注册，即gulp原创内容，盗版必究。原创内容，盗版必究。.task，这会在下一章API里面讲到。

使用ES6原创内容，盗版必究。

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

$ 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未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net6代码。

部署项目任务【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】【原创内容，转载请注明出处】【未经授权禁止转载】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

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

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

$ mkdir gulp/task$ vi gulp/task/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'));

这样就可以将gulp任务进行分解，当你的未经授权，禁止复制转载。【作者：唐霜】gulp任务特别多的时候，可以有效的进行本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net管理。

是不是已经有点感觉了，赶紧手动尝试一下吧【本文受版权保护】著作权归作者所有，禁止商业用途转载。。
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

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

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

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

创建任务转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

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

【原创内容，转载请注明出处】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

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

在gulp任务体系代码中这样进行任务的注【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】册：

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

这样就创建好了一个gulp任务，在命令行转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。中，执行

$ gulp my_task

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

我们来具体看下my_task.js的结构【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。：

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【作者：唐霜】

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

如何和你的项目结合著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

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

未经授权，禁止复制转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。【原创内容，转载请注明出处】

gulp比较厉害的，是可以自动去执行一些【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net代码，后面一章我们会具体将gulp的ap【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】i，这一章我们主要讲你应该怎么使用api【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，知道怎么使用了，下一章再知道都有哪些a【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】pi，将快速掌握gulp。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【本文首发于唐霜的博客】

比如，我们现在得到一个gulp的api：原创内容，盗版必究。原创内容，盗版必究。gulp.dest，这个api的功能是用【未经授权禁止转载】未经授权，禁止复制转载。来输出内容到某个文件的。

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

pipe（管道）这个概念【访问 www.tangshuang.net 获取更多精彩内容】

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

gulp里面有一个非常有名的概念，叫“管【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。道”，也就是pipe，但它不直接作用于g【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ulp，而是要作用于其他结果上。

【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【本文首发于唐霜的博客】【作者：唐霜】

pipe是node中的一个概念，可以处理【未经授权禁止转载】【本文受版权保护】Stream，而gulp.src这个ap原创内容，盗版必究。【版权所有，侵权必究】i恰巧输出的是vinyl files的s未经授权，禁止复制转载。【未经授权禁止转载】tream，因此可以用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可以连续不断的使用，前面一个本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】pipe处理之后的结果，将作为下一个pi【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。pe处理的开端。取出.pipe(gulp原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。.dest(‘./build本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】/xxx’))这一节管道来讲【原创内容，转载请注明出处】【转载请注明来源】一下：

gulp.dest是一个api，但是它只原创内容，盗版必究。【原创不易，请尊重版权】有一个参数，告诉程序处理结果将输出到&#【作者：唐霜】原创内容，盗版必究。8217;./build/xxxR【原创内容，转载请注明出处】未经授权，禁止复制转载。17;这个文件，但是要输出什么内容呢？要原创内容，盗版必究。转载请注明出处：www.tangshuang.net输出的内容来自上一个pipe。

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

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

当然了，gulp不是只能用管道来进行处理【原创不易，请尊重版权】【转载请注明来源】的，你也可以自己处理，比如：

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

上面的copy, minify是我自己乱【原创不易，请尊重版权】【作者：唐霜】写的两个函数，只是为了说明，你可以不用g未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ulp的api也可以使用简单的js逻辑代著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。码完成任务，只不过后面你学到watch的【转载请注明来源】【作者：唐霜】时候，就会考虑使用gulp。

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

现在动手写一个操作文件的gulp任务吧。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net

下一章介绍gulp的api。【本文首发于唐霜的博客】

【作者：唐霜】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

API【本文受版权保护】

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

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创不易，请尊重版权】

gulp.src 获得所有符合条件的文件【本文受版权保护】原创内容，盗版必究。信息

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

【未经授权禁止转载】

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

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

转载请注明出处：www.tangshuang.net

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

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

原创内容，盗版必究。

gulp.task 注册一个gulp任务

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

【未经授权禁止转载】

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

gulp.watch 监听文件变化本文作者：唐霜，转载请注明出处。

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

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

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

gulp.src【版权所有】唐霜 www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

输出（Emits）符合所提供的匹配模式（【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。glob）或者匹配模式的数组（array【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。 of globs）的文件。将返回一个转载请注明出处：www.tangshuang.net原创内容，盗版必究。 Vinyl files【版权所有】唐霜 www.tangshuang.net 的著作权归作者所有，禁止商业用途转载。stream【原创内容，转载请注明出处】它可以被本文作者：唐霜，转载请注明出处。piped转载请注明出处：www.tangshuang.net 到别的插件中。本文版权归作者所有，未经授权不得转载。

【未经授权禁止转载】原创内容，盗版必究。转载请注明出处：www.tangshuang.net

用法【转载请注明来源】

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

gulp.src(globs[, options])

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

参数原创内容，盗版必究。

globs【版权所有，侵权必究】

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

描述：所要读取的 glob 或者包含 g【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】lobs 的数组。
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。类型： String 或 Array【本文受版权保护】
【版权所有，侵权必究】【转载请注明来源】 glob 请参考【版权所有】唐霜 www.tangshuang.netnode-glob本文版权归作者所有，未经授权不得转载。语法或者，你也可以直接写文件的路径。

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

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

描述：通过 glob-stream 所传【未经授权禁止转载】本文作者：唐霜，转载请注明出处。递给 node-glob 的参数。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】类型： Object【转载请注明来源】

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

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

描述：是否返回buffer，或者说是返回原创内容，盗版必究。【版权所有，侵权必究】buffer（true）还是返回file【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】_contents（false）。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。类型： Boolean【本文受版权保护】
本文版权归作者所有，未经授权不得转载。【转载请注明来源】默认值： true著作权归作者所有，禁止商业用途转载。

如果该项被设置为 false，那么将会以未经授权，禁止复制转载。未经授权，禁止复制转载。 stream 方式返回 file.co【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ntents 而不是文件 buffer 【未经授权禁止转载】原创内容，盗版必究。的形式。这在处理一些大文件的时候将会很有本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】用。注意：插件可能并不会实现对 stre【转载请注明来源】【本文首发于唐霜的博客】am 的支持。

options.read【本文受版权保护】

描述：是否去读取文件的内容。著作权归作者所有，禁止商业用途转载。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】类型： Boolean【版权所有】唐霜 www.tangshuang.net
【原创不易，请尊重版权】【本文首发于唐霜的博客】默认值： true本文作者：唐霜，转载请注明出处。

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

原创内容，盗版必究。未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。【转载请注明来源】

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

描述：重新指定src的base，不好理解转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，具体看下面的解释。
本文作者：唐霜，转载请注明出处。【转载请注明来源】类型： String转载请注明出处：www.tangshuang.net
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】默认值：将会加在 glob 之前 (【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】请看 glob2base【本文受版权保护】)著作权归作者所有，禁止商业用途转载。

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

请想像一下在一个路径为 client/j本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。s/somedir 的目录中，有两个文件【本文受版权保护】转载请注明出处：www.tangshuang.net：1.js，2.js ，现在我们这样：

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

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

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

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

但是有的时候我们想要的是dist/nam【原创不易，请尊重版权】【本文首发于唐霜的博客】e/js/somedir/1.js，而不【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。是上面的文件路径。这个时候options未经授权，禁止复制转载。未经授权，禁止复制转载。.base就可以派上用场。

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

这样就可以得到想要的结果。【本文受版权保护】

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

它这里面就有一个相对路径的感觉，比如它找【版权所有】唐霜 www.tangshuang.net【作者：唐霜】到了client/js/somedir/本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。1.js，但是你设置了base字段为cl本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ient，所以它就会把client这个目【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net录层级从client/js/somedi【版权所有，侵权必究】【作者：唐霜】r/1.js中移除，剩下的部分就是js/【关注微信公众号：wwwtangshuangnet】【作者：唐霜】somedir/1.js，把这个部分放到【本文受版权保护】未经授权，禁止复制转载。dest规定的目录中去。

原创内容，盗版必究。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【转载请注明来源】

gulp.dest【版权所有】唐霜 www.tangshuang.net

能被 pipe 进来（实际上，只能在pi【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。pe中使用，因为它没有参数用于传入文件来【版权所有，侵权必究】转载请注明出处：www.tangshuang.net源），并且将会写文件。并且重新输出（em本文版权归作者所有，未经授权不得转载。【作者：唐霜】its）所有数据，因此你可以将它 pip转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e 到多个文件夹。如果某文件夹不存在，将【版权所有】唐霜 www.tangshuang.net【访问 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'));

参数【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

path【本文受版权保护】

描述：要输出到哪个目录中。【关注微信公众号：wwwtangshuangnet】
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】类型： String or Funct【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ion

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

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

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。原创内容，盗版必究。

描述：传入一些附加参数【访问 www.tangshuang.net 获取更多精彩内容】
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。类型： Object【未经授权禁止转载】

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

【原创不易，请尊重版权】【本文受版权保护】原创内容，盗版必究。【原创不易，请尊重版权】

描述：以哪个目录作为输出的当前目录。著作权归作者所有，禁止商业用途转载。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】类型： String【原创不易，请尊重版权】
【版权所有，侵权必究】【转载请注明来源】默认值： process.cwd() 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。（命令执行时所在的目录，一般而言，是gu本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。lpfile所在的目录）

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

如果没有cwd的话，dist目录会和gu【未经授权禁止转载】转载请注明出处：www.tangshuang.netlpfile同级，但现在dist目录会在本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】components目录下面，compo【原创不易，请尊重版权】【转载请注明来源】nents目录如果不存在的话会被自动创建【本文受版权保护】【版权所有】唐霜 www.tangshuang.net。

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

描述：八进制权限字符，用以定义所有在输出著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。目录中新创建的目录的权限。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。类型： String【未经授权禁止转载】
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。默认值： 0777【版权所有】唐霜 www.tangshuang.net

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

【本文首发于唐霜的博客】【原创内容，转载请注明出处】未经授权，禁止复制转载。

定义一个使用著作权归作者所有，禁止商业用途转载。Orchestrator未经授权，禁止复制转载。实现的任务（task）。【转载请注明来源】

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

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

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

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

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

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

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

原创内容，盗版必究。【作者：唐霜】【作者：唐霜】

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

描述：任务的名字，如果你需要在命令行中运【原创内容，转载请注明出处】【原创不易，请尊重版权】行你的某些任务，那么，请不要在名字中使用【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。空格。
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】类型：String【未经授权禁止转载】

【本文首发于唐霜的博客】【原创不易，请尊重版权】【本文受版权保护】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

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

描述：一个包含任务列表的数组，这些任务会【转载请注明来源】本文作者：唐霜，转载请注明出处。在你当前任务运行之前完成。
未经授权，禁止复制转载。【原创不易，请尊重版权】类型： Array【未经授权禁止转载】

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

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

注意：你的任务是否在这些前置依赖的任务原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net完成之前运行了？请一定要确保你所依赖的任【转载请注明来源】著作权归作者所有，禁止商业用途转载。务列表中的任务都使用了正确的异步执行方式【转载请注明来源】【本文受版权保护】：使用一个 callback，或者返回一【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。个 promise 或 stream。

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

fn【版权所有】唐霜 www.tangshuang.net

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

描述：该函数定义任务所要执行的一些操作。
原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】类型：Function【本文首发于唐霜的博客】

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

通常来说，它的内部会是这种形式：gulp【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。.src().pipe(someplug本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。in())。

异步任务支持未经授权，禁止复制转载。

任务可以异步执行，如果 fn 能做到以下【转载请注明来源】【转载请注明来源】其中一点：

接受一个 callback转载请注明出处：www.tangshuang.net

【作者：唐霜】

原创内容，盗版必究。

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

// 在 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）是一个本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。函数，它被作为参数传给了gulp.tas未经授权，禁止复制转载。【作者：唐霜】k的第二个参数（是个函数）。

【本文首发于唐霜的博客】【作者：唐霜】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

返回一个 stream【版权所有，侵权必究】

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

原创内容，盗版必究。

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

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

返回一个 promise【作者：唐霜】

转载请注明出处：www.tangshuang.net

【作者：唐霜】

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

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

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

注意：默认的，task 将以最大的并发本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net数执行，也就是说，gulp 会一次性运行【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net所有的 task 并且不做任何等待。如果【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】你想要创建一个序列化的 task 队列，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net并以特定的顺序执行，你需要做两件事：

给出一个提示，来告知 task 什么时候未经授权，禁止复制转载。【本文受版权保护】执行完毕，

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

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

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

并且再给出一个提示，来告知一个 task【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。依赖另一个 task 的完成。

【转载请注明来源】

转载请注明出处：www.tangshuang.net

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

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshuang.net

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

【作者：唐霜】

转载请注明出处：www.tangshuang.net

【转载请注明来源】

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

在 “two” 【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】中，你需要添加一个提示来告诉系统它需要依转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。赖第一个 task 完成。

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

【关注微信公众号：wwwtangshuangnet】

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

因此，这个例子的实际代码将会是这样：转载请注明出处：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是不分顺序的，但【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。是在two这个任务中，需要依赖one这个【未经授权禁止转载】【原创内容，转载请注明出处】任务，所以实际上，当default中的o本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ne和two同时开始执行的时候，two并【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。不会马上执行，而是要等到one执行的ok【本文受版权保护】【原创内容，转载请注明出处】的时候再执行。

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

回调函数【作者：唐霜】

【原创内容，转载请注明出处】【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】

上面的例子中，多次出现了cb这个回调函数【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】，它是用来干嘛的，代表什么？

转载请注明出处：www.tangshuang.net【转载请注明来源】【原创不易，请尊重版权】

其实这个回调函数并不做任何操作意义上的事原创内容，盗版必究。【转载请注明来源】，而是用来通知gulp这个task完成了【未经授权禁止转载】【本文首发于唐霜的博客】，不管完成的怎么样，任务已经可以被忽略了【版权所有】唐霜 www.tangshuang.net【转载请注明来源】。我更愿意把它称为done(fail)，著作权归作者所有，禁止商业用途转载。【作者：唐霜】其中的参数如果是null或undefin【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ed，则表示成功了，否则表示失败了，里面转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】的内容就是告诉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而转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。言，它已经接收到任务执行情况的信息了，后【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】面的执行对它来说没什么意义，随便你怎么做【转载请注明来源】转载请注明出处：www.tangshuang.net都可以。

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

这也就是为什么上面说如果要让b任务依赖a【未经授权禁止转载】【原创不易，请尊重版权】任务，要给ａ任务传一个done作为回调函【原创不易，请尊重版权】【本文受版权保护】数的原因。因为当b任务开始被执行时，其实本文作者：唐霜，转载请注明出处。原创内容，盗版必究。先是等待状态，要让a先执行，但是等待归等本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net待，你总得告诉我什么时候开始执行吧，这个【本文受版权保护】转载请注明出处：www.tangshuang.net“告诉”动作就是done函数，只要在任务未经授权，禁止复制转载。【原创不易，请尊重版权】执行过程中执行了done函数，就相当于告【版权所有，侵权必究】【作者：唐霜】诉b可以开始执行了。

ok，关于gulp的task这个api就【本文受版权保护】本文作者：唐霜，转载请注明出处。介绍完了，赶紧去自己实践一下。

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

gulp.watch【本文受版权保护】

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

原创内容，盗版必究。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

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

它有两种用法，下面分开讲解。【原创不易，请尊重版权】

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文受版权保护】

gulp.watch(glob[, op【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ts], tasks)

监听（单个或多个）文件的变动，一旦有变，著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】就执行规定的task，这些task是通过本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。gulp.task注册的。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【转载请注明来源】

glob原创内容，盗版必究。

描述：要监听的文件。【关注微信公众号：wwwtangshuangnet】
未经授权，禁止复制转载。【原创不易，请尊重版权】类型： String or Array
【作者：唐霜】【未经授权禁止转载】一个 glob 字符串，或者一个包含多著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net个 glob 字符串的数组，用来指定具体【本文首发于唐霜的博客】【转载请注明来源】监控哪些文件的变动。

未经授权，禁止复制转载。【作者：唐霜】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

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

类型： Object【本文首发于唐霜的博客】

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

传给转载请注明出处：www.tangshuang.netgaze【原创不易，请尊重版权】的参数。什么是gaze呢？这个项目已经本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。被原作者删掉了，我通过其他的一些资料了解原创内容，盗版必究。未经授权，禁止复制转载。到，它其实是一个监听文件变动的模块，gu【本文受版权保护】转载请注明出处：www.tangshuang.netlp应该也是使用了这个包。

【本文首发于唐霜的博客】原创内容，盗版必究。【本文受版权保护】未经授权，禁止复制转载。

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

tasks【版权所有】唐霜 www.tangshuang.net

【转载请注明来源】【原创内容，转载请注明出处】【转载请注明来源】未经授权，禁止复制转载。原创内容，盗版必究。

描述：要执行的任务列表原创内容，盗版必究。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。类型： Array本文版权归作者所有，未经授权不得转载。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。需要在文件变动后执行的一个或者多个通过本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net gulp.task() 创建的 tas【未经授权禁止转载】【本文受版权保护】k 的名字，

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

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

上面这个动作会监听js目录下的js脚本的【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。变动，一旦变动了，就会执行uglify,【原创内容，转载请注明出处】【原创内容，转载请注明出处】 reload这两个任务。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

gulp.watch(glob[, op【作者：唐霜】转载请注明出处：www.tangshuang.netts, callback])

【作者：唐霜】【未经授权禁止转载】未经授权，禁止复制转载。【原创内容，转载请注明出处】

监听（单个或多个）文件的变动，一旦有变，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。就执行callback这个回调函数。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

glob【未经授权禁止转载】

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

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

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

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

描述：文件变动时要执行的回调函数。【未经授权禁止转载】
【原创内容，转载请注明出处】【版权所有，侵权必究】类型： Function未经授权，禁止复制转载。

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

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

callback 会被传入一个名为 ev转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ent 的对象。这个对象描述了所监控到的转载请注明出处：www.tangshuang.net原创内容，盗版必究。变动：

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

【原创内容，转载请注明出处】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

类型： String【转载请注明来源】
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】发生的变动的类型：added, cha【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netnged 或者 deleted。

event.path【转载请注明来源】

类型： String著作权归作者所有，禁止商业用途转载。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net 触发了该事件的文件的路径。【未经授权禁止转载】

【作者：唐霜】原创内容，盗版必究。【原创不易，请尊重版权】

gulp.watch的返回值【本文首发于唐霜的博客】

gulp.watch的返回值是一个可以被【本文受版权保护】著作权归作者所有，禁止商业用途转载。监听的发射器，什么叫“可以被监听”，就是著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】可以用on去挂载监听事件的回调函数，例如【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。：

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

回调函数会在change事件的末尾执行。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net回调函数的event和上面的event是未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net一样的。实际上，我们采用gulp.wat【本文首发于唐霜的博客】未经授权，禁止复制转载。ch(files,function(e)本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。{})和用on再去挂载是差不多的。

插件的使用未经授权，禁止复制转载。

本章主要讲解在gulp的体系里，插件是个【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。什么概念，可以怎么使用，都有哪些常用的有未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net必要介绍的插件。以及会在这些具体的插件介【关注微信公众号：wwwtangshuangnet】【转载请注明来源】绍里，简单的介绍插件如何使用。

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

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

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

到哪里去找插件著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

直接在npm官网搜索既可以了。【未经授权禁止转载】https://www.npmjs.co【转载请注明来源】原创内容，盗版必究。m/browse/keyword/gul转载请注明出处：www.tangshuang.net【未经授权禁止转载】p

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

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

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

使用插件通用性方法本文版权归作者所有，未经授权不得转载。

大部分插件是以管道内的处理方法使用的。什本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】么叫“管道内”？就是作为参数传给.pip本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】e。

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

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

gulp-uglify是最常用的js压缩【本文首发于唐霜的博客】原创内容，盗版必究。插件，怎么使用它呢？首先要让项目安装这个本文版权归作者所有，未经授权不得转载。【本文受版权保护】包：

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

$ npm install --save-dev gulp-uglify

然后在gulpfile体系的js中这样使本文作者：唐霜，转载请注明出处。转载请注明出处：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返回一【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net个函数，这个函数主要用在pipe中，也就【转载请注明来源】本文版权归作者所有，未经授权不得转载。是说不需要传入要处理什么东西，而是会传入转载请注明出处：www.tangshuang.net【本文受版权保护】一些options。

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

在使用的时候，大部分情况都是直接把这个函【作者：唐霜】【本文受版权保护】数作为pipe()的参数传入即可。

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

js预编译未经授权，禁止复制转载。

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

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

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

不过从目前公认的情况看，Coffee还是【原创不易，请尊重版权】原创内容，盗版必究。比TypeScript的用户多，得到的认【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net可度也高，只不过这两年人气稍有下降。

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【原创内容，转载请注明出处】【本文受版权保护】原创内容，盗版必究。

gulpfile.coffee转载请注明出处：www.tangshuang.net

$ npm install coffee-script --save-dev

然后将gulpfile.js改为gulp著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。file.coffee，这样在gulpf【本文受版权保护】【本文受版权保护】ile体系里面，就使用coffee进行编原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】写。

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

gulp-coffee【版权所有】唐霜 www.tangshuang.net

这是gulp的一个插件，它是用来把你项目【转载请注明来源】未经授权，禁止复制转载。里面的.coffee文件编译为.js文件【未经授权禁止转载】未经授权，禁止复制转载。的。

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

npm install gulp-coffee --save-dev

文档：【转载请注明来源】https://github.com/c【本文首发于唐霜的博客】原创内容，盗版必究。ontra/gulp-coffee
【本文受版权保护】转载请注明出处：www.tangshuang.net 使用：【本文受版权保护】

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

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

看上去非常好用。如果你不使用coffee本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net写代码，可能也用不上。

【原创内容，转载请注明出处】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

js压缩【本文受版权保护】

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

我们写完js代码之后，希望把代码进行压缩【作者：唐霜】转载请注明出处：www.tangshuang.net，最后提供一个.min.js文件。

gulp-uglify【版权所有，侵权必究】

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

文档：原创内容，盗版必究。https://www.npmjs.co转载请注明出处：www.tangshuang.net【转载请注明来源】m/package/gulp-uglif本文作者：唐霜，转载请注明出处。【作者：唐霜】y

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

这个插件是gulp里面最常用来压缩js文本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】件的

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

$ npm install gulp-uglify --save-dev

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

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

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

gulp-rename【访问 www.tangshuang.net 获取更多精彩内容】

这个插件可以重命名文件【本文首发于唐霜的博客】

【访问 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。

【转载请注明来源】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

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

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

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

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【本文受版权保护】【未经授权禁止转载】

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【转载请注明来源】

【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

把.sass编译成.css转载请注明出处：www.tangshuang.net

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转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

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

而且这个插件的作者不再推荐大家使用这个插转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

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

原创内容，盗版必究。【原创不易，请尊重版权】原创内容，盗版必究。

这个插件也是和gulp-sass差不多功著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。能，你可以看下文档：https://www.npmjs.co【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】m/package/gulp-ruby-转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】sass

安装sass的一些问题转载请注明出处：www.tangshuang.net

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

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

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

【未经授权禁止转载】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

写完js之后，想把他们合并为一个文件。【关注微信公众号：wwwtangshuangnet】

gulp-concat【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】【未经授权禁止转载】【原创内容，转载请注明出处】未经授权，禁止复制转载。

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

这个插件的作用是将多个js文件合并为一个本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。js文件。

npm install --save-dev gulp-concat

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

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

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/'));
});

参数【本文受版权保护】

原创内容，盗版必究。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

string转载请注明出处：www.tangshuang.net

如果它的第一个参数是string类型，那【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。么直接把这个string作为合并生成的文转载请注明出处：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未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【转载请注明来源】

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压缩【版权所有，侵权必究】

【本文首发于唐霜的博客】【原创内容，转载请注明出处】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

写完CSS，或者用Scss编译成css之【关注微信公众号：wwwtangshuangnet】【转载请注明来源】后，想把css进行压缩。

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

gulp-clean-css【作者：唐霜】

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

文档：【原创不易，请尊重版权】https://github.com/s【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】cniro/gulp-clean-css

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

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

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

cleanCSS([options], [callback])

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

options原创内容，盗版必究。

【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

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

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未经授权，禁止复制转载。原创内容，盗版必究。【访问 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({debug: true}, function(details) {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest('dist'));
});

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未经授权，禁止复制转载。【本文受版权保护】sicle 、 jpegtran 、 o【原创内容，转载请注明出处】原创内容，盗版必究。ptipng 、 svgo 这4个插件。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。而imagemin-pngquant是i【本文受版权保护】【作者：唐霜】magemin插件的一个扩展插件，用于深【原创内容，转载请注明出处】【版权所有】唐霜 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')); // 输出路径
});

执行命令：本文版权归作者所有，未经授权不得转载。

gulp images

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

服务器、自动刷新本文作者：唐霜，转载请注明出处。

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

【原创不易，请尊重版权】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

安装命令：【本文首发于唐霜的博客】

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

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转载请注明出处：www.tangshuang.net

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

文档：本文作者：唐霜，转载请注明出处。https://www.npmjs.co转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netm/package/del
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 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(''));
});

【本文受版权保护】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

webpack【作者：唐霜】

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

webpack的主要目的是为了压缩文件，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net虽然gulp也有uglify，但是web转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】pack的火热，让大家无论如何都想使用它【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】。

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字段，这个是插件自带转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的，不算webpack自带的。

你也可以把webpack的配置信息写在一【本文受版权保护】【本文首发于唐霜的博客】个文件里面：

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

你甚至可以使用一个不同版本的webpac【本文首发于唐霜的博客】【本文受版权保护】k作为引擎：

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

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/'));
});

你可以看到，通过安装一个完整版本的web本文作者：唐霜，转载请注明出处。【作者：唐霜】pack，并且把它作为参数传给gulp-未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】webpack，也是一种尝试。

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

插件还提供一个回调函数，用来使用webp本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ack的输出信息：

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

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本身，这里是官网【关注微信公众号：wwwtangshuangnet】。未经授权，禁止复制转载。

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

karma【转载请注明来源】

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。

在gulp的体系里面使用karma进行单转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net元测试。

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

gulp已经拥有了karma需要的机制，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】就是注册任务的时候可以提供一个回调函数，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】回调函数的参数是一个状态终结器。因此，不转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。需要额外安装karma插件来运行karm【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.neta，直接使用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的原创内容，盗版必究。【未经授权禁止转载】配置全部都放在karma.conf.js【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。里面，实际上这个过程可以看做是一个触发过未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net程，跟在命令行执行karma命令一样。

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

原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

而且前端的单元测试比较复杂，因为前端还要本文作者：唐霜，转载请注明出处。【转载请注明来源】涉及到浏览器等问题，希望你能够为这个问题本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net贡献内容。

插件开发【访问 www.tangshuang.net 获取更多精彩内容】

gulp插件总是返回一个【原创内容，转载请注明出处】object mode【原创不易，请尊重版权】形式的stream来做这些事情：本文作者：唐霜，转载请注明出处。

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

转载请注明出处：www.tangshuang.net

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

输出vinyl File对象著作权归作者所有，禁止商业用途转载。

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

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

转载请注明出处：www.tangshuang.net

这通常被叫做【版权所有】唐霜 www.tangshuang.nettransform streams【作者：唐霜】 (有时候也叫做 through str本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】eams)。transform stre【本文受版权保护】【转载请注明来源】ams 是可读又可写的，它会对传给它的对本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。象做一些转换的操作。

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

修改文内容【关注微信公众号：wwwtangshuangnet】

Vinyl文件可以通过三种不同形式来访问转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】文件内容：

Streams【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

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

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

【未经授权禁止转载】

原创内容，盗版必究。

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

原创内容，盗版必究。

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

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

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本文作者：唐霜，转载请注明出处。【作者：唐霜】

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

【未经授权禁止转载】

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

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

原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】

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

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

event-stream【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

转载请注明出处：www.tangshuang.net

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

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

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

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

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

gulp-util【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

【作者：唐霜】

【未经授权禁止转载】

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

插件范例【转载请注明来源】

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

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

Fractal’s gulp未经授权，禁止复制转载。未经授权，禁止复制转载。 plugins

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

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

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

转载请注明出处：www.tangshuang.net

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

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

原创内容，盗版必究。

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

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

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

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

如果你不熟悉 stream，你可以阅读这【未经授权禁止转载】【未经授权禁止转载】些来

https://github.com/s本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ubstack/stream-handb【作者：唐霜】未经授权，禁止复制转载。ook

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

【转载请注明来源】

【本文受版权保护】

http://nodejs.org/ap【作者：唐霜】【本文受版权保护】i/stream.html

【未经授权禁止转载】

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

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

原创内容，盗版必究。

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

基本规范【本文受版权保护】

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

你在开发一个gulp插件的时候，最好遵守【本文首发于唐霜的博客】原创内容，盗版必究。下面的规范：

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

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

原创内容，盗版必究。

【作者：唐霜】

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

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

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

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

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

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

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

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

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

原创内容，盗版必究。

【作者：唐霜】

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

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

在 package.json 中增加一个【本文受版权保护】【本文首发于唐霜的博客】名为 gulpplugin 的关键字，这【转载请注明来源】【原创不易，请尊重版权】可以让它能在我们的搜索中出现

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

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

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

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

【访问 www.tangshuang.net 获取更多精彩内容】

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

【本文受版权保护】

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

转载请注明出处：www.tangshuang.net

【本文受版权保护】

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

【作者：唐霜】

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

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

【本文受版权保护】

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

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

【转载请注明来源】

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

使用我们模块推荐页上列举的模块来让你【原创内容，转载请注明出处】【原创不易，请尊重版权】的开发更加轻松

原创内容，盗版必究。

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

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

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

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

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

为什么这些指导这么严格？【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】【转载请注明来源】【原创不易，请尊重版权】

【作者：唐霜】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

如果我不遵守这些，会发生什么？原创内容，盗版必究。

npm 对每个人来说是免费的，你可以开发【转载请注明来源】【关注微信公众号：wwwtangshuangnet】任何你想要开发的东西出来，并且不需要遵守原创内容，盗版必究。【版权所有】唐霜 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【本文受版权保护】

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

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

什么是stream转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

概念比较复杂，简单的说，它就是我们经常说本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。的“流”，比如“流媒体”“流式文件”。这本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net种文件的特征就是可以“流”式传输，这里用【本文受版权保护】本文版权归作者所有，未经授权不得转载。双引号引起来的“流”，就是stream。

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

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

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

而在node的体系里，读取文件可以以st【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。ream的形式进行读取，读取过程中会产生【转载请注明来源】【转载请注明来源】buffer。除了读，stream还可以本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net被写入。但是stream不是文件本身，而【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。是文件的内容的某种形式，所以只要文件的内【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。容还是以stream的形式存在，那这个文【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。件相当于只有灵魂没有肉体。

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

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

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

让我们来实现一个用于在文件头部插入一些文【转载请注明来源】原创内容，盗版必究。本的插件，这个插件支持 file.con【本文受版权保护】【本文受版权保护】tents 所有可能的形式。

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

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转载请注明出处：www.tangshuang.net【作者：唐霜】t

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

转载请注明出处：www.tangshuang.net

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

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

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

在stream那一节已经提到了buffe【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。r，但是并不能全面的表达buffer的概转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。念。从我个人的理解角度讲，buffer的转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本质就是一个缓存区，这个缓存区用于交换数本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】据。它不一定在stream中才使用，但是原创内容，盗版必究。【本文首发于唐霜的博客】是使用最常见的。

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

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

使用buffer【作者：唐霜】

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

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

【访问 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.net转载请注明出处：www.tangshuang.net

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

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

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

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

一些基于 buffer 的插件本文版权归作者所有，未经授权不得转载。

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

gulp-coffee【未经授权禁止转载】

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

【访问 www.tangshuang.net 获取更多精彩内容】

【作者：唐霜】

gulp-svgmin原创内容，盗版必究。

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

原创内容，盗版必究。

【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】

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

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

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

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

原创内容，盗版必究。

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

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

【作者：唐霜】

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

原创内容，盗版必究。

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

测试【作者：唐霜】

【原创内容，转载请注明出处】【转载请注明来源】转载请注明出处：www.tangshuang.net【未经授权禁止转载】未经授权，禁止复制转载。

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

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转载请注明出处：www.tangshuang.net

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

【关注微信公众号：wwwtangshuangnet】

gulp-concat原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

【转载请注明来源】

资源【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

原创内容，盗版必究。

【作者：唐霜】

github: 【本文首发于唐霜的博客】https://github.com/g原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ulpjs/gulp

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

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

转载请注明出处：www.tangshuang.net

中文网站：【关注微信公众号：wwwtangshuangnet】http://www.gulpjs.co转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netm.cn/

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

【本文受版权保护】

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

【作者：唐霜】

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

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

【作者：唐霜】

一些使用技巧【原创不易，请尊重版权】

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

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

【本文受版权保护】

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

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

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

原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】

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

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

2017-02-03 | gulp

gulp中文入门教程

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

快速入门【本文受版权保护】

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

Node【访问 www.tangshuang.net 获取更多精彩内容】

node安装【未经授权禁止转载】

安装npm原创内容，盗版必究。

安装git原创内容，盗版必究。

安装python2.7 （可选）【版权所有】唐霜 www.tangshuang.net

安装bower （可不安装，扩展阅读）【未经授权禁止转载】

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

gulp-cli【访问 www.tangshuang.net 获取更多精彩内容】

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

安装gulp-cli著作权归作者所有，禁止商业用途转载。

gulp-cli使用转载请注明出处：www.tangshuang.net

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

使用ES6原创内容，盗版必究。

部署项目任务【关注微信公众号：wwwtangshuangnet】

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

创建任务转载请注明出处：www.tangshuang.net

如何和你的项目结合著作权归作者所有，禁止商业用途转载。

pipe（管道）这个概念【访问 www.tangshuang.net 获取更多精彩内容】

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

API【本文受版权保护】

gulp.src【版权所有】唐霜 www.tangshuang.net

用法【转载请注明来源】

参数原创内容，盗版必究。

globs【版权所有，侵权必究】

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

gulp.dest【版权所有】唐霜 www.tangshuang.net

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

参数【访问 www.tangshuang.net 获取更多精彩内容】

path【本文受版权保护】

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

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

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

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

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

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

fn【版权所有】唐霜 www.tangshuang.net

gulp.watch【本文受版权保护】

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

gulp.watch(glob[, op【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ts], tasks)

glob原创内容，盗版必究。

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

tasks【版权所有】唐霜 www.tangshuang.net

gulp.watch(glob[, op【作者：唐霜】转载请注明出处：www.tangshuang.netts, callback])

glob【未经授权禁止转载】

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

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

gulp.watch的返回值【本文首发于唐霜的博客】

插件的使用未经授权，禁止复制转载。

使用插件通用性方法本文版权归作者所有，未经授权不得转载。

js预编译未经授权，禁止复制转载。

gulpfile.coffee转载请注明出处：www.tangshuang.net

gulp-coffee【版权所有】唐霜 www.tangshuang.net

js压缩【本文受版权保护】

gulp-uglify【版权所有，侵权必究】

gulp-rename【访问 www.tangshuang.net 获取更多精彩内容】

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

gulp-less【转载请注明来源】

gulp-sass【转载请注明来源】

gulp-scss转载请注明出处：www.tangshuang.net

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

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

gulp-concat【版权所有】唐霜 www.tangshuang.net

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

参数【本文受版权保护】

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

css压缩【版权所有，侵权必究】

gulp-clean-css【作者：唐霜】

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

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

图片压缩【版权所有，侵权必究】

服务器、自动刷新本文作者：唐霜，转载请注明出处。

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

gulp-clean原创内容，盗版必究。

del转载请注明出处：www.tangshuang.net

webpack【作者：唐霜】

gulp-webpack【版权所有，侵权必究】