gulp使用小结(一)

这篇文章不会介绍 

gulp

 的起源、发展；不会去一个个讲解 

gulp
API

；也不想出现大段大段的 

gulpfile.js

 代码；更木有帮你分析 

gulp

 实现原理，只有一些我自己对 

gulp

 的使用理解和总结。

如何通过 

gulp

 让偶们的前端项目高大上的跑起来？

gulp

 能做什么，还能做什么？

gulp

套路能不能来几套？...
希望通过这篇文章你会找到答案

写作风格的原因，劳资写的文章都较详(啰)细(嗦)，请轻拍:)

当然，同样期待能得到伙伴们的讨论和支持。

目录

简单介绍
必备插件
常用插件
进阶插件
聊聊 gulpfile.js
套路
结语
推荐阅读

简单介绍

这篇文章的目的是：介绍些我知晓的 

gulp
plugins

，然后用少量的代码讲解，最终希望大家能用 

gulp

 让前端项目高大上的跑起来

默认读者知道点 

npm/cnpm

；明白 

package.json

 是作甚的；了解 

gulpfile.js

 是作甚的。

这篇文章起草于2014年下半年，那时 

gulp

 还算个较新潮的玩意。所以在项目实践的过程中，自己记录鸟不少使用收获，心里闷骚的想，等哪天有空再润色一把即可分享出去，但特么拖拖拉拉的就到2016年...

转眼 

gulp

 都已快被归类为过时的技术鸟(《我为何放弃Gulp与Grunt，转投npm scripts》，有关这篇文章下一篇偶再单独细聊)，于是趁着周末之余，火速整理下自己的 

gulp

 套路发布出来，也希望对其他小伙伴有点用。

本文最下方有一些 文章/文档 的阅读推荐:)

必备插件

【必备】不是指每次项目都得用，而是指最基础的。你可以不用，但是得知道的那些gulp插件

以下插件的方向都各自有不少相似的插件，所以不必过多纠结，用的开心就行

gulp-htmlmin 看到名字就能知道，这个插件是用来压缩 

HTML

。PS：注释啥的都可以去掉哦，看文档get更多技能哈
gulp-imagemin 除了能压缩常见的图片格式，还能压缩 

SVG

，叼叼的~
gulp-clean-css 压缩 CSS。我原本推荐的是 gulp-minify-css，结果其首页中已建议改用

gulp-clean-css

...
gulp-uglify 专业压缩 Javascript
gulp-concat 上面几个都是压缩，这插件是管合并的...恭喜，“减少网络请求”的成就达成:)
gulp-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用
gulp-rename 修改文件名称。比如有时我们需要把

app.js

改成

app.min.js

，瞬间高级了
gulp-util 最基础的工具，但俺只用来打日志...

常用插件

相对于必备插件，常用插件都是些【有用】但使用场景和频率没那么高的好插件

run-sequence 

gulp

 的 

task

 都是并行(异步)执行，如果遇见需要串行的场景，那么这个插件就是必备了。偶的使用场景是：处理(压缩、合并等等) 

CSS/JS

、再gulp-rev、再上传 

CDN

；然后使用 

CDN

的地址替换 

HTML

 中的 

CSS/JS

 地址，再压缩 

HTML

。那么替换 

HTML

 这步须在之前的工作处理完后再执行。
** 最后要说，gulp4.0发布后，不需要RS也可以搞定串行任务了 **
del / gulp-clean 删除。俺的使用场景是：

JS/CSS

 文件都会在压缩后使用gulp-rev，即文件名被

hash

，然后再上传到 

CDN

，最后俺再使用 删除插件 把本地压缩后的文件删除掉，不用多余保存。
gulp-rev 把静态文件名改成

hash

的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 

manifest。json

 后替换对应的文件名称。
gulp-rev-collector 到线上环境前，我会用来配合gulp-rev使用，替换 

HTML

 中的路径
gulp-rev-append 给页面引用的静态文件增加

hash

后缀，避免被浏览器缓存...当然，如果是使用 

CDN

，这个套路就不行了
gulp-connect / gulp-livereload 

LiveReload

 的俩款插件都值得拥有，不过都各稍有学习成本，看看文档就明白鸟
gulp-sourcemaps 处理 

JavaScript

 时生成 

SourceMap

；如果你不了解 

SourceMap

，可以看看这篇阮一峰大神的《Source
Map 详解》
gulp-load-plugins 帮忙偷懒用的，可以帮我们加载插件，不用

require

或者

import

...当然，俺个人感觉用了这个插件后，阅读

gulpfile.js

的可读性差了，鱼和熊掌不可兼得:(
gulp-jshint 

JavaScript

 代码校验
gulp-sass / gulp-less 写 

CSS

 的同学都懂哈

进阶插件

必备插件和常用插件都有一个特点，就是下载数都不小。虽然有少部分插件下载数相对不多，但同样值得拥有或了解

babel 

JS

 语法新特性用起来。这个插件可以让我们用新的 标准/特性/提案 写 

JavaScript

 代码，然后再向下 转换编译，最终生成随处可用的 

JavaScript

 代码。更通俗的说话就是：可以用新的规范写代码，经过 

babel

 编译后生成没有兼容问题的代码。
gulp-flatten 移动指定文件，不想压缩或者合并的时候，直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上，图方便:)
gulp-coffee 

CoffeeScript

 值得去了解
gulp-markdown-pdf 把 

Markdown

 编译为 

PDF

gulp-markdown 写手的福音，可以把 

Markdown

 转成 

HTML

gulp-html2md 把 

HTML

 编译为 

Markdown

gulp-tinypng 超屌的图片压缩工具，使用 

Tinypng

 引擎。PS：因为 

Tinypng

 免费帐号有月限制，所以使用使需注意。
sprity 生成雪碧图。稍有点学习成本，仔细阅读文档即可。
gulp-if 可以在 

pipe

 里面写点逻辑了，屌不屌。举例：比如处理 

./pub/*.js

，如果文件名称是 

xxx.js

，那么不处理；更可以用来区分当前是开发环境还是生产环境。
gulp-file-include 俺搞内部项目的时候会用到，让 

HTML

 组件化的第一小步
gulp-git 直接在 

Build

 时把代码都提交到 

git

上了...特么劳资懒起来连我自己都害怕
gulp-qiniu 用于把指定文件上传至七牛的指定路径下(PS:首先，你得有自己的七牛账号和空间)
gulp-notify 在控制台中加入文字描述，

build

 的时候更高级有木有。当然，当需要的时候把错误信息也展示出来会很有帮助。更高级的功能就需要你查看其文档了~
gulp-plumber 

gulp

 的错误处理有点坑，假如发生错误进程就挂了。相对的解决办法不少，但是这个是我个人比较推荐的，比特么在容易出错的地方写错误监听靠谱。所以这个插件可以阻止 

gulp

 插件发生错误导致进程退出并输出错误日志。

聊聊 gulpfile.js

gulp
API

 真没啥好说的，所以也从没打算花时间介绍，那这一节劳资要说说啥呢...干货！

已经枯燥的balabala一通插件，所以偶用自己的方式聊聊这个 

gulpfile.js

。PS：默认读者了解，所以不堆代码了哈

一个较简单的前端项目，

gulpfile.js

 可以轻松上百行，稍复杂点儿的此文件会更大，肯定会不方便阅读和维护。

下面这套目录结构，是适合较复杂前端项目的 

gulpfile.js

 套路，仅供参考：

{% highlight Delphi linenos %}

gulpfile.js

gulp-conf/

├── env.js // 环境相关

├── global.js

└── qiniu.js // CDN

gulp-tasks/

├── xxx.js

├── xxxx.js

├── ...

├── image.js

├── log.js

├── release.js

└── watch.js

{% endhighlight %}
第一行中的 

gulpfile.js

 也可换成 

gulpfile.babel.js

。如果想看 

gulpfile.babel.js

 的示例可以去 https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js

gulp-conf

 路径、公共参数等等，把有必要都变成配置文件，代码优雅多了。当然，如果没有必要就别麻烦了，视情况来

gulp-tasks

 内的各个文件都是些分类型的子任务，这样一拆分 

gulpfile.js

 必定清爽很多，关键是之后维护各种 

task

 也简单很多

不贴代码的原因是因为我只想提供个 文件夹套路，其实怎么用着爽、怎么分类、甚至怎么取名这些都见仁见智，反正目的是让代码组织的够清晰、好维护，那么偶们的目标就达到鸟

套路

这节会基于这些插件的相互配合和清晰的 

gulp

 目录结构，让偶们的前端项目快速且高大上的 

build

 起来！

偶这粗暴的把套路分成三类：一种是相对简单点的；一种是稍稍复杂点的；一种是“玩”的比较复杂的。区分的原则是这仨套路的目标会有稍许不同，而且项目需求也不同。搞清楚我们(项目)到底想要得到什么，那么剩下的就是去实现它了！

附加组合 这类在这篇就不说了，比如 

gulp+webpack

 这种 

CP

，针对 

React

 项目可以面面俱到。。。这如果要分析起来，比特么 

gulp

 复杂多了去了。

如果你问我，有木有最简单的套路，答曰：有！

如果你问我，最简单的方法是神马，答曰：不要用这些 

build

 工具...

哇哈哈哈哈哈哈~

简单套路

项目/人群 目标：要求较高的个人项目、公司内部项目、小商业项目

主要需求：

HTML

 也得 

组件化(这词我有点反感，真听得烂大街了)

。该 

common

 的拎出来；该 

widget

 的拎出来
图片压缩、合并

JS/CSS/HTML

 压缩、合并

sass/less

 必须得用起来，要不 

CSS

 怎么显得高大上
额...差不多够了吧，毕竟我们只是入门的简体套路，再复杂点儿 

gulpfile.js

 的体积就不小了:)

一般套路

项目/人群 目标：喜爱尝试的个人项目、一般商业项目、要求较高的开源项目

主要需求：
简单套路里面的都包括

JavaScript

 部分用 

ES6

 来编写... PS：技术红利不用白不用嘛

JavaScript

 代码校验用起来

CSS

 方面根据设置项目所需的浏览器版本，从而自动处理浏览器前缀
所有静态文件全部上 

CDN

把 

task

 进行拆分，使其更好维护

复杂套路

项目/人群 目标：商业项目、代码洁癖者...额，再加一箱：程序员中的单身狗:)

主要需求：
一般套路里面的都包括
增加对 

gulp

 进程出错的优雅处理
更多 

task

 信息的相关展示
在 

task

 中有逻辑处理，比如执行某 

task

 会判断是否是开发环境，然后可以有相应的处理
自动清理掉那些不需要的 

tmp

 文件(临时文件)，只留下真正有用的代码
LiveReload
代码自动同步 

git

劳资实在编不下去了...

结语

你的插件应该只做一件事，并且做好

写插件原本是我想好好写的地方，发现中文文档已经非常丰富了，那就不费那个劲了，直接贴官方地址：http://www.gulpjs.com.cn/docs/writing-a-plugin/

最后聊聊我眼中的 

gulp

：

gulp

 目前有相关插件2266个

gulp

 是基于 

Node

 的，95%的代码都是 

JavaScript

，5%的代码是 

Shell

，npmjs.com显示上个月的下载超过210W，当前(2016/04/30)release
的版本是3.9.1
神马？安装各种插件还是用 

npm

？赶紧 cnpm 用起来，安装速度噌噌的

gulp

 VS 

grunt

 这话题已经被说烂，但我还是想说说。个人觉得玩

grunt

是种写配置的感觉；玩

gulp

就是写脚本(task)，且

gulp

更容易上手、更高效。
推荐读者看看这篇文章Gulp vs Grunt，写的着实深入浅出
编译 

CoffeeScript

编译 

less
/ sass

把 

HTML

 编译为 

Markdown

把 

Markdown

 编译为 

HTML/pdf

把 

Excel

 编译为 

HTML/JSON

开发 

React

 项目时和好基友 

webpack

 配合，酸爽到爆，推荐同事的一篇文章，我司目前的

React

 项目基本就是这个套路：《基于gulp和webpack的前端工程化》
...

最近在InfoQ上有读到一个系列的文章，是讨论 

gulp

 和 

npm
script

 优劣，地址 - 《我为何放弃Gulp与Grunt，转投npm scripts》。篇幅有限，下周末的文章我再拿出来讨论，不过推荐大家阅读，还是值得我们思考的。

下一篇会把这篇文章所介绍的套路，用代码体现出来，文章发布时git会同步更新，地址：gulp-demos