微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

gulp使用小结(一)

2016-05-12 20:41 前端大全

(点击上方公众号,可快速关注)


作者:聂微东(@聂微东)  

链接:http://www.cnblogs.com/Darren_code/p/gulp.html


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


如何通过 gulp 让偶们的前端项目高大上的跑起来?gulp 能做什么,还能做什么?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 也简单很多


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


套路


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


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


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


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


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


哇哈哈哈哈哈哈~


简单套路


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


主要需求:


  1. HTML 也得 组件化(这词我有点反感,真听得烂大街了)。该 common 的拎出来;该 widget 的拎出来

  2. 图片压缩、合并

  3. JS/CSS/HTML 压缩、合并

  4. sass/less 必须得用起来,要不 CSS 怎么显得高大上

  5. 额…差不多够了吧,毕竟我们只是入门的简体套路,再复杂点儿 gulpfile.js 的体积就不小了:)


一般套路


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


主要需求:


  1. 简单套路里面的都包括

  2. JavaScript 部分用 ES6 来编写… PS:技术红利不用白不用嘛

  3. JavaScript 代码校验用起来

  4. CSS 方面根据设置项目所需的浏览器版本,从而自动处理浏览器前缀

  5. 所有静态文件全部上 CDN

  6. 把 task 进行拆分,使其更好维护


复杂套路


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


主要需求:


  1. 一般套路里面的都包括

  2. 增加对 gulp 进程出错的优雅处理

  3. 更多 task 信息的相关展示

  4. 在 task 中有逻辑处理,比如执行某 task 会判断是否是开发环境,然后可以有相应的处理

  5. 自动清理掉那些不需要的 tmp 文件(临时文件),只留下真正有用的代码

  6. LiveReload

  7. 代码自动同步 git

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


结语


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


写插件原本是我想好好写的地方,发现中文文档已经非常丰富了,那就不费那个劲了,直接贴官方地址: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》。篇幅有限,下周末的文章我再拿出来讨论,不过推荐大家阅读,还是值得我们思考的。


【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 使用Jekyll+GitHub搭建自己的免费静态博客 Box公司65岁高龄Android工程师给创业者的忠告! C++基础知识 小米论坛800万用户数据库泄漏 网盘中已经可下载 热血编程狂欢季:Microsoft Azure开发夏令营(北京站)精彩花絮分享