gulp使用小结(一)

2016-04-30 11:40 聂微东阅读(30195) 评论(7) 编辑收藏举报

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

如何通过 gulp 让偶们的前端项目高大上的跑起来？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

第一行中的 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

Darren_聂微东 - 关注前端技术完成《前端攻略系列》仅仅是第一步...