一枚Web技术领域的手艺人.

Gulp使用小结(上)

2016/04/30 Share

这篇文章不会介绍

的起源、发展;不会去一个个讲解 ```Gulp API```;也不想出现大段大段的 ```gulpfile.js``` 代码;更木有帮你分析 ```Gulp``` 实现原理,只有一些我自己对 ```Gulp``` 的使用理解和总结。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

> 如何通过 ```Gulp``` 让偶们的前端项目高大上的跑起来?```Gulp``` 能做什么,还能做什么?```Gulp```套路能不能来几套?... 希望通过这篇文章你会找到答案

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

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

## 目录

- [简单介绍](#intro)
- [必备插件](#must)
- [常用插件](#common)
- [进阶插件](#minority)
- [聊聊 gulpfile.js](#gulpfile)
- [套路](#write)
- [结语](#over)
- [推荐阅读](#rec)

---

<h3 id="intro">简单介绍</h3>

> 这篇文章的目的是:介绍些我知晓的 ```Gulp plugins ```,然后用少量的代码讲解,最终希望大家能用 ```Gulp``` 让前端项目高大上的跑起来

> 默认读者知道点 ```npm/cnpm```;明白 ```package.json``` 是作甚的;了解 ```gulpfile.js``` 是作甚的。

这篇文章起草于2014年下半年,那时 ```Gulp``` 还算个较新潮的玩意。所以在项目实践的过程中,自己记录鸟不少使用收获,心里闷骚的想,等哪天有空再润色一把即可分享出去,但特么拖拖拉拉的就到2016年...

转眼 ```Gulp``` 都已快被归类为过时的技术鸟([《我为何放弃Gulp与Grunt,转投npm scripts》](http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1),有关这篇文章下一篇偶再单独细聊),于是趁着周末之余,火速整理下自己的 ```gulp``` 套路发布出来,也希望对其他小伙伴有点用。

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


<h3 id="must">必备插件</h3>

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

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

- [gulp-htmlmin](https://www.npmjs.com/package/gulp-htmlmin) 看到名字就能知道,这个插件是用来压缩 ```HTML```。PS:注释啥的都可以去掉哦,看文档get更多技能哈
- [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) 除了能压缩常见的图片格式,还能压缩 ```SVG```,叼叼的~
- [gulp-clean-css](https://www.npmjs.com/package/gulp-minify-css) 压缩 CSS。我原本推荐的是 [gulp-minify-css](https://www.npmjs.com/package/gulp-minify-css),结果其首页中已建议改用```gulp-clean-css```...
- [gulp-uglify](https://www.npmjs.com/package/gulp-uglify) 专业压缩 Javascript
- [gulp-concat](https://www.npmjs.com/package/gulp-concat) 上面几个都是压缩,这插件是管合并的...恭喜,“减少网络请求”的成就达成:)
- [gulp-autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) 给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
- [gulp-rename](https://www.npmjs.com/package/gulp-rename) 修改文件名称。比如有时我们需要把```app.js```改成```app.min.js```,瞬间高级了
- [gulp-util](https://www.npmjs.com/package/gulp-util) 最基础的工具,但俺只用来打日志...


<h3 id="common">常用插件</h3>

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

- [run-sequence](https://www.npmjs.com/package/run-sequence) ```Gulp``` 的 ```task``` 都是并行(异步)执行,如果遇见需要串行的场景,那么这个插件就是必备了。偶的使用场景是:处理(压缩、合并等等) ```CSS/JS```、再[gulp-rev](https://www.npmjs.com/package/gulp-rev)、再上传 ```CDN```;然后使用 ```CDN```的地址替换 ```HTML``` 中的 ```CSS/JS``` 地址,再压缩 ```HTML```。那么替换 ```HTML``` 这步须在之前的工作处理完后再执行。 ** 最后要说,```Gulp4.0``` 发布后,不需要 [RS](https://www.npmjs.com/package/run-sequence) 也可以搞定串行任务了 **
- [del](https://www.npmjs.com/package/del) / [gulp-clean](https://www.npmjs.com/package/gulp-clean) 删除。俺的使用场景是:```JS/CSS``` 文件都会在压缩后使用[gulp-rev](https://www.npmjs.com/package/gulp-rev),即文件名被```hash```,然后再上传到 ```CDN```,最后俺再使用 **删除插件** 把本地压缩后的文件删除掉,不用多余保存。
- [gulp-rev](https://www.npmjs.com/package/gulp-rev) 把静态文件名改成```hash```的形式。
- [gulp-rev-replace](https://www.npmjs.com/package/gulp-rev-replace) 配合 [gulp-rev](https://www.npmjs.com/package/gulp-rev) 使用,拿到生成的 ```manifest。json``` 后替换对应的文件名称。
- [gulp-rev-collector](https://www.npmjs.com/package/gulp-rev-collector) 到线上环境前,俺会用来配合[gulp-rev](https://www.npmjs.com/package/gulp-rev)使用,替换 ```HTML``` 中的路径
- [gulp-rev-append](https://www.npmjs.com/package/gulp-rev-append) 给页面引用的静态文件增加```hash```后缀,避免被浏览器缓存...当然,如果是使用 ```CDN```,这个套路就不行了
- [gulp-connect](https://www.npmjs.com/package/gulp-connect) / [gulp-livereload](https://www.npmjs.com/package/gulp-livereload) ```LiveReload``` 的俩款插件都值得拥有,不过都各稍有学习成本,看看文档就明白鸟
- [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) 处理 ```JavaScript``` 时生成 ```SourceMap```;如果你不了解 ```SourceMap```,可以看看这篇阮一峰大神的[《Source Map 详解》](http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html)
- [gulp-load-plugins](https://www.npmjs.com/package/gulp-load-plugins) 帮忙偷懒用的,可以帮我们加载插件,不用```require```或者```import```...当然,俺个人感觉用了这个插件后,阅读```gulpfile.js```的可读性差了,鱼和熊掌不可兼得:(
- [gulp-jshint](https://www.npmjs.com/package/gulp-jshint) ```JavaScript``` 代码校验
- [gulp-sass](https://www.npmjs.com/package/gulp-sass) / [gulp-less](https://www.npmjs.com/package/gulp-less) 写 ```CSS``` 的同学都懂哈


<h3 id="minority">进阶插件</h3>

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

- [babel](https://babeljs.io/) ```JS``` 语法新特性用起来。这个插件可以让我们用新的 **标准/特性/提案** 写 ```JavaScript``` 代码,然后再向下 **转换编译**,最终生成随处可用的 ```JavaScript``` 代码。更通俗的说话就是:可以用新的规范写代码,经过 ```babel``` 编译后生成没有兼容问题的代码。
- [gulp-flatten](https://www.npmjs.com/package/gulp-flatten) 移动指定文件,不想压缩或者合并的时候,直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上,图方便:)
- [gulp-coffee](https://www.npmjs.com/package/gulp-coffee) ```CoffeeScript``` 值得去了解
- [gulp-markdown-pdf](https://www.npmjs.com/package/gulp-markdown-pdf) 把 ```Markdown``` 编译为 ```PDF

  • gulp-markdown 写手的福音,可以把

    转成 ```HTML```
    1
    - [gulp-html2md](https://www.npmjs.com/package/gulp-html2md) 把 ```HTML``` 编译为 ```Markdown

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

    引擎。PS:因为 ```Tinypng``` 免费帐号有月限制,所以使用使需注意。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    - [sprity](https://www.npmjs.com/package/sprity) 生成雪碧图。稍有点学习成本,仔细阅读文档即可。
    - [gulp-if](https://www.npmjs.com/package/gulp-if) 可以在 ```pipe``` 里面写点逻辑了,屌不屌。举例:比如处理 ```./pub/*.js```,如果文件名称是 ```xxx.js```,那么不处理;更可以用来区分当前是开发环境还是生产环境。
    - [gulp-file-include](https://www.npmjs.com/package/gulp-file-include) 俺搞内部项目的时候会用到,让 ```HTML``` 组件化的第一小步
    - [gulp-git](https://www.npmjs.com/package/gulp-git) 直接在 ```Build``` 时把代码都提交到 ```git```上了...特么劳资懒起来连我自己都害怕
    - [gulp-qiniu](https://www.npmjs.com/package/gulp-qiniu) 用于把指定文件上传至七牛的指定路径下(PS:首先,你得有自己的七牛账号和空间)
    - [gulp-notify](https://www.npmjs.com/package/gulp-notify) 在控制台中加入文字描述,```build``` 的时候更高级有木有。当然,当需要的时候把错误信息也展示出来会很有帮助。更高级的功能就需要你查看其文档了~
    - [gulp-plumber](https://www.npmjs.com/package/gulp-plumber) ```Gulp``` 的错误处理有点坑,假如发生错误进程就挂了。相对的解决办法不少,但是这个是我个人比较推荐的,比特么在容易出错的地方写错误监听靠谱。所以这个插件可以阻止 ```Gulp``` 插件发生错误导致进程退出并输出错误日志。


    <h3 id="gulpfile">聊聊 gulpfile.js</h3>

    > ```Gulp API``` 真没啥好说的,所以也从没打算花时间介绍,那这一节劳资要说说啥呢...干货!

    已经枯燥的balabala一通插件,所以偶用自己的方式聊聊这个 ```gulpfile.js```。PS:默认读者了解,所以不堆代码了哈

    一个较简单的前端项目,```gulpfile.js``` 可以轻松上百行,稍复杂点儿的此文件会更大,肯定会不方便阅读和维护。

    下面这套目录结构,是适合较复杂前端项目的 ```gulpfile.js``` 套路,仅供参考:

    {% blockquote %}
    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
    {% endblockquote %}

    - 第一行中的 ```gulpfile.js``` 也可换成 ```gulpfile.babel.js```。如果想看 ```gulpfile.babel.js``` 的示例可以去 [https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js](https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js)
    - ```gulp-conf``` 路径、公共参数等等,把有必要都变成配置文件,代码优雅多了。当然,如果没有必要就别麻烦了,视情况来
    - ```gulp-tasks``` 内的各个文件都是些分类型的子任务,这样一拆分 ```gulpfile.js``` 必定清爽很多,关键是之后维护各种 ```task``` 也简单很多

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

    <h3 id="write">套路</h3>

    > 这节会基于这些插件的相互配合和清晰的 ```Gulp``` 目录结构,让偶们的前端项目快速且高大上的 ```build``` 起来!

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

    > **附加组合** 这类在这篇就不说了,比如 ```gulp+webpack``` 这种 ```CP```,针对 ```React``` 项目可以面面俱到。。。这如果要分析起来,比特么 ```Gulp``` 复杂多了去了。

    如果你问我,有木有最简单的套路,答曰:有!

    如果你问我,最简单的方法是神马,答曰:**不要用这些 ```build``` 工具...**

    哇哈哈哈哈哈哈~

    <h4>简单套路</h4>

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

    主要需求:

    1. ```HTML``` 也得 ```组件化(这词我有点反感,真听得烂大街了)```。该 ```common``` 的拎出来;该 ```widget``` 的拎出来
    2. 图片压缩、合并
    3. ```JS/CSS/HTML``` 压缩、合并
    4. ```sass/less``` 必须得用起来,要不 ```CSS``` 怎么显得高大上
    5. 额...差不多够了吧,毕竟我们只是入门的简体套路,再复杂点儿 ```gulpfile.js``` 的体积就不小了:)

    <h4>一般套路</h4>

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

    主要需求:

    1. 简单套路里面的都包括
    2. ```JavaScript``` 部分用 ```ES6``` 来编写... **PS:技术红利不用白不用嘛**
    3. ```JavaScript``` 代码校验用起来
    4. ```CSS``` 方面根据设置项目所需的浏览器版本,从而自动处理浏览器前缀
    5. 所有静态文件全部上 ```CDN

  1. 进行拆分,使其更好维护
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    <h4>复杂套路</h4>

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

    主要需求:

    1. 一般套路里面的都包括
    2. 增加对 ```Gulp``` 进程出错的优雅处理
    3. 更多 ```task``` 信息的相关展示
    4. 在 ```task``` 中有逻辑处理,比如执行某 ```task``` 会判断是否是开发环境,然后可以有相应的处理
    5. 自动清理掉那些不需要的 ```tmp``` 文件(临时文件),只留下真正有用的代码
    6. LiveReload
    7. 代码自动同步 ```git

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

结语

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

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

最后聊聊我眼中的

1
2
3
4
5
6

- ```Gulp``` 目前有相关插件2266个
- ```Gulp``` 是基于 ```Node``` 的,95%的代码都是 ```JavaScript```,5%的代码是 ```Shell```,[npmjs.com](https://www.npmjs.com/package/gulp)显示上个月的下载超过210W,当前(2016/04/30)release 的版本是3.9.1
- 神马?安装各种插件还是用 ```npm```?赶紧 [cnpm](https://www.npmjs.com/package/cnpm) 用起来,安装速度噌噌的
- ```Gulp``` VS ```Grunt``` 这话题已经被说烂,但我还是想说说。个人觉得玩```Grunt```是种写配置的感觉;玩```Gulp```就是写脚本(task),且```Gulp```更容易上手、更高效。 推荐读者看看这篇文章[Gulp vs Grunt](http://www.benben.cc/blog/?p=407),写的着实深入浅出
- 编译 ```CoffeeScript

  • 编译

    / sass```
    1
    - 把 ```HTML``` 编译为 ```Markdown

  • 编译为 ```HTML/pdf```
    1
    - 把 ```Excel``` 编译为 ```HTML/JSON

  • 开发 React 项目时和好基友 webpack 配合,酸爽到爆,推荐同事的一篇文章,我司目前的React 项目基本就是这个套路:《基于gulp和webpack的前端工程化》

最近在InfoQ上有读到一个系列的文章,是讨论 Gulpnpm script 优劣,地址 - 《我为何放弃Gulp与Grunt,转投npm scripts》。篇幅有限,下期的文章我再拿出来讨论,不过推荐大家阅读,还是值得我们思考的。

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

推荐阅读

CATALOG
  1. 1. 结语
  2. 2. 推荐阅读