这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 gulp API;也不想出现大段大段的 gulpfile.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 gulptask 都是并行(异步)执行,如果遇见需要串行的场景,那么这个插件就是必备了。偶的使用场景是:处理(压缩、合并等等) 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-lessCSS 的同学都懂哈

进阶插件

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

  • babel JS 语法新特性用起来。这个插件可以让我们用新的 标准/特性/提案JavaScript 代码,然后再向下 转换编译,最终生成随处可用的 JavaScript 代码。更通俗的说话就是:可以用新的规范写代码,经过 babel 编译后生成没有兼容问题的代码。
  • gulp-flatten 移动指定文件,不想压缩或者合并的时候,直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上,图方便:)
  • gulp-coffee CoffeeScript 值得去了解
  • gulp-markdown-pdfMarkdown 编译为 PDF
  • gulp-markdown 写手的福音,可以把 Markdown 转成 HTML
  • gulp-html2mdHTML 编译为 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%的代码是 Shellnpmjs.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上有读到一个系列的文章,是讨论 gulpnpm script 优劣,地址 - 《我为何放弃Gulp与Grunt,转投npm scripts》。篇幅有限,下周末的文章我再拿出来讨论,不过推荐大家阅读,还是值得我们思考的。

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

推荐阅读

gulp使用小结(一)的更多相关文章

  1. gulp使用小结(二)

    接上篇文章接Gulp使用小结(一) 内容如下: 首先,偶在gulp-demos上已经提交了个较通用的栗子...俺琢磨半天,原准备分阶段搞些 Gulp 套路,但是写完介个栗子之后,觉得已经能覆盖绝大多数 ...

  2. gulp 用法 小结

    前端们,gulp该用起来了,简单的demo入门 gulp.grunt前端自动化工具,只有用过才知道多么重要. 作者:一文不提来源:博客园|2015-05-28 10:35 移动端 收藏 分享 gulp ...

  3. gulp布局构建小结

    一.工具选择CSS预处理语言LESS 构建工具gulp(基于node环境)gulp插件:gulp-connect——主要是用来运行一个webserver npm install --save-dev ...

  4. 介绍一种基于gulp对seajs的模块做合并压缩的方式

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...

  5. npm 重点小结

    npm作为javascript一个用得比较广的包管理工具,已经集成在了node里面,基本一安装node就可以用npm了,十分方便.这里的小结主要沿着官方文档的思路,挑出一些比较重点的,平时常用的部分进 ...

  6. gulp安装及使用流程

    1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...

  7. git和gulp使用

    git push origin master/chunxiong git remote -v git merge chunxiong working tree:就是你所工作在的目录,每当你在代码中进行 ...

  8. gulp入门实践

    前言:大家可能都听说过gulp,知道它是一种前端自动化开发工具,可以用来文件压缩.语法检查.文件合并和编译less等,但可能并不知道要怎么用?看过官方文档,也看过许多博客,但基本都是讲gulp的API ...

  9. npm使用小结

    npm包管理工具使用小结 npm(node package manager)是一个node包管理工具,我们可以方便的从npm服务器下载第三方包到本地使用. 安装: NPM是随同NodeJS一起安装的包 ...

随机推荐

  1. MySQL深度巡检

    1. IO层面检查   (1)IO检查   查看%util是否接近100%定位是哪个磁盘IO压力大 #iostat -x 1 10 (2)iotop定位负载来源进程 查看哪个PID占用IO最高 #io ...

  2. angularJS(7)

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  3. 【转】UML图与软件开发过程那点关系

    首先,软工文档, 软工文档,也就是计划,设计,描述,使用软件的一些文件,它最大的特点就是固定不变,用来给不同的人和计算机来阅读.在期间,文档起到了桥梁的作用,看这张图很形象: 在这里在看一下国家统一规 ...

  4. Unity 依赖注入之二

    1. 构造子注入 1.1 构造子注入初级代码 container.RegisterType<IMyWork, MyWork>(new InjectionConstructor(new Bo ...

  5. Gym 100646 F Tanks a Lot RMQ

    Problem F: Tanks a Lot Imagine you have a car with a very large gas tank - large enough to hold what ...

  6. mybatis自增长插入id

    第一种: <insert id="insertUser" parameterClass="ibatis.User"> <selectKey r ...

  7. 【面试题】D

    一面: 1.介绍实习项目,负责那一部分: 2.C++的三大特性: 3.7层网络协议:应用层协议有哪些,TCP/IP属于哪一层,三次握手: 4.Linux: 4.1.查看进程: 4.2.vim文件与to ...

  8. .NET静态变量与静态方法并发的问题

    我们知道,静态变量与静态方法都是在程序编译的时候就定义好了的,并且不会存在多个副本.所以对于静态变量来说,一旦修改了就会影响全局. 因此,静态变量是存在并发性问题的,所以当我们在操作静态变量的时候需要 ...

  9. java 随机获取国内IP

    /* * 随机生成国内IP地址 */ public static String getRandomIp(){ //ip范围 int[][] range = {{607649792,608174079} ...

  10. 【CQgame】[幸运方块 v1.1.2] [Lucky_Block v1.1.2]

    搬家首发!!! 其实从初一我就写过一些小型战斗的游戏,但是画面都太粗糙,代码也比较乱,也就是和两三个同学瞎玩,但自从观摩了PoPoQQQ大神的游戏,顿时产生了重新写一部游戏的冲动,于是各种上网查找各种 ...