gulp
简单介绍
这篇文章的目的是：介绍些我知晓的
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也简单很多
不贴代码的原因是因为我只想提供个 文件夹套路，其实怎么用着爽、怎么分类、甚至怎么取名这些都见仁见智，反正目的是让代码组织的够清晰、好维护，那么偶们的目标就达到鸟
