gulp 使用小结 (一) 这篇文章不会介绍 gulp 的起源、发展；不会去一个个讲解 gulp API；也不想出现大段

这篇文章不会介绍 gulp 的起源、发展；不会去一个个讲解 gulp API；也不想出现大段大段的 gulpfile.js 代码；更木有帮你分析 gulp 实现原理，只有一些我自己对 gulp 的使用理解和总结。

如何通过 gulp 让偶们的前端项目高大上的跑起来？gulp 能做什么，还能做什么？gulp套路能不能来几套？… 希望通过这篇文章你会找到答案

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

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

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 套路，仅供参考：

1
2
3
4
5
6
7
8
9
10
11
12
13 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

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

套路

这节会基于这些插件的相互配合和清晰的 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
劳资实在编不下去了…

结语

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

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

最后聊聊我眼中的 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

gulp 使用小结 (一)

目录

简单介绍

必备插件

常用插件

进阶插件

聊聊 gulpfile.js

套路

简单套路

一般套路

复杂套路

结语

推荐阅读