有你在真好 的个人博客
前端构建还在揪结Grunt或Gulp-你应该看完这篇再决定!
阅读:2217 添加日期:2021/3/30 17:47:21

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。在使用Grunt之前,项目静态文件几乎没进行压缩合并便直接放到线上,部分文件手动复制粘贴到某压缩网站进行压缩。没压缩合并的文件显然耗资源,手动压缩的文件后期不易维护,每修改一次便要重复复制粘贴,很不方便。Grunt 的加入帮忙解决了以上问题,让开发人员更加专注于开发。

网上有人会纠结该用Grunt还是Gulp。其实无论是Grunt还是Gulp都是构建工具,基本的功能都差不多,与其浪费时间纠结该使用哪个,还不如先开始选择一个使用,等过段时间熟悉后再考虑是否接触另一个,最后再比较出哪个更适合自己岂不更好。

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

合并压缩静态资源

金蝶云平台在开始使用 Grunt 的时候只是用来对 css,js 文件进行合并压缩,使用到的插件分别如下:

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

先通过 watch 监控静态文件,一旦文件有改动并保存,便用 concat 把 css 或 js 目录下的文件进行了合并,再用 cssmin 或 uglify 把刚刚合并的文件压缩,最后用 clean 把合并但未压缩的文件删除掉。部分代码(以 js 为例)如下:

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

Source Map

后来发现 cssmin 和 uglify 其实已包含了合并的功能,于是乎把 concat 和 clean 给移除掉,因为它们功能重复了。代码如下:

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

用了 cssmin 和 uglify 后在浏览器的调试工具下便无法定位到源代码处,这是有办法解决的。办法就是使用 source map,chrome 和 firefox 的调试工具都支持。

grunt-newer

在使用了cssmin 和 uglify 之初项目还不算大的时候,有个现象就已经出现了。那就是每次一修改保存文件的时候,watch 插件便会立马调用 cssmin 和 uglify。而它们在配置里是对所有的 css 和 js 文件进行操作,虽然只对其中一个文件修改,但是目录下的所有文件都会大动干戈地进行合并压缩。配置高的电脑还行,配置低的电脑就悲剧了,至少每次一保存文件都要等待个两三秒钟后合并压缩完成才能去刷新浏览器。一旦静态文件多起来,那这等待的时候只会增多不会减少。后来找到了「grunt-newer」这个插件来缓解燃眉之急。newer 只会对改动的文件进行操作,这样至少不会每次保存都对全部文件进行操作。它的使用方法很简单:

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

以上便是金蝶云平台在目前项目阶段对Grunt的应用, 最后总结一下,以上的方式的好处就在于开发时期不需要去合并压缩文件,方便调试。而生产环境则是尽可能去合并压缩,减少用户的请求时间。

前端构建还在揪结Grunt或Gulp?你应该看完这篇再决定!

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号