gulp使用小结
Posted 前端大全
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp使用小结相关的知识,希望对你有一定的参考价值。
链接: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 最基础的工具,但俺只用来打日志…
常用插件
相对于必备插件,常用插件都是些【有用】但使用场景和频率没那么高的好插件
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 工具…
哇哈哈哈哈哈哈~
简单套路
项目/人群 目标:要求较高的个人项目、公司内部项目、小商业项目
主要需求:
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
劳资实在编不下去了…
结语
你的插件应该只做一件事,并且做好
最后聊聊我眼中的 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的前端工程化》
…
【今日微信公号推荐↓】
更多推荐请看《》
以上是关于gulp使用小结的主要内容,如果未能解决你的问题,请参考以下文章