前公司代码一直用grunt部署, 偶然了解gulp后;学习gulp并用gulp和grunt在一小项目中实践,对两者之间的用法及区别有所了解后总结这一篇小博文;本文根据实战的项目配置文件,简单讲解实现相同功能时gulp与grunt的用法比较;大家都知道gulp grunt是部署代码的工具(合并、压缩、加密、编译等),故本文不讲解gulp、grunt的历史、使用场景,有兴趣的同学可以细看本文后的参考文档;
一.项目部署任务说明
本文对应的项目:三国杀FAQ(已下线), 本项目为静态页面,开始只作为bootstrap练习项目;本地打开速度很快,但上线后因为所有数据均初始化时加载,故打开会很慢(有多慢?请参考github源码中,项目开发日志中加载时间截图:devLog.md)。
对该项目感兴趣的朋友可以下载对应源码,新版本将改成动态页面,缓慢开发中(年关公司项目比较赶,空闲时间较少);本demo项目文件结构图:
demo文件结构图.png**dest **即为放置部署后文件的目标文件夹,部署该项目需要处理的事项:
1.删除上次部署的所有文件;
2.复制文件,网页依赖库、小图标等拷贝一份到dest文件夹内;
3.压缩、合并脚本(JS)文件;
4.压缩样式(CSS)文件;
5.压缩图片;
6.HTML文件压缩、依赖加载替换。
二.gulp grunt部署对比
gulp grunt的安装部署请阅读博文末尾的参考文档, 本部分主要详细对比两者的部署代码语法以及运行效果;
以上6个任务,每个分别使用gulp 、grunt部署详细讲解之;为了排版效果代码将以截图形式出现,想查看具体代码的朋友请点源码gulp配置文件 , 源码grunt配置文件;
1.删除上次部署的所有文件;
部署必做的第一步就是清理上次部署的文件啦,当然如果是第一次部署本清除指令也不会报错;
gulp实现:
清理文件,npm很多模块能实现,所以没用gulp扩展插件,直接用一简单的del扩展模块实现;
在项目文件路径下打开终端bash(mac)或cmd(window), 输入
gulp clean
就完成清理任务啦!(“clean”为自定义字符串)
执行效果.pnggrunt实现:
grunt就使用了配套的“grunt-contrib-clean”插件实现! grunt-contrib-clean官网.png 配置代码.png
在项目文件路径下打开终端bash(mac)或cmd(window), 输入
grunt g-clean
就完成清理任务啦!(g-clean是自定义任务名称)
执行效果.png对比:
1.上手难度:gulp实现包括require(引入模块),gulp.task(定义任务名称、任务执行)两部分(上述配置文件中的cb函数为连续任务时使用,单独用clean可以忽略cb);而grunt实现包括 grunt.initConfig(任务执行)、grunt.loadNpmTasks(引入模块)、grunt.registerTask(定义任务名称)三部分;所以gulp配置更容易掌握;
2.执行效率,gulp用了5.71ms, grunt使用时间也很快无法比较;
2.复制文件;
本demo项目中,依赖文件放阿里云访问速度不太理想,故后期本项目改为使用cdn加载, 故复制任务主要将 favicon.ico index.html文件拷贝到dest文件夹内;
gulp实现:
同样的,拷贝文件也没使用gulp扩展插件;直接使用npm第三方copy模块实现;
在项目文件路径下打开终端bash(mac)或cmd(window), 输入
gulp copy
就完成拷贝任务啦!(gulp只拷贝了favicon.ico,因为后续压缩index.html时index.html文件会移动至dest)
执行效果.pnggrunt实现
照旧,grunt还是使用grunt配套的“grunt-contrib-copy”插件实现 grunt-contrib-copy官网.png 配置代码.png
在项目文件路径下打开终端bash(mac)或cmd(window), 输入
grunt g-copy
就完成拷贝任务啦!
执行效果.png对比:
同 clean 速度上都差不多,只是gulp使用更为简单些;
3.压缩、合并脚本(JS)文件;
本demo项目中, 主要将到datas、js文件夹中的脚本压缩、合并然后放置dest对应文件夹内;
gulp实现:
gulp使用的扩展插件分别为:gulp-uglifygulp-concat gulp-uglify官网.png gulp-concat官网.png 配置代码.png
执行指令(“uglifyjs”为自定义字符串,可以在上述配置文件中使用你任何喜欢的字符串代替):
gulp uglifyjs
执行效果.png
grunt实现
grunt实现的扩展插件为:grunt-contrib-concat 、 grunt-contrib-uglify grunt-contrib-concat官网.png grunt-contrib-uglify官网.png
配置代码: 配置代码.png
执行指令:
grunt g-uglify
执行效果.png
对比:同上
4.压缩样式(CSS)文件;
本项目样式文件比较少, 就压缩一文件而已, 如果是用sass、less、stylus编译样式的同学就得加载其他扩展插件;gulp实现:
gulp使用的扩展插件是:gulp-minify-css
额,官网提示,该插件已过时,建议改用gulp-cssnano; 不过本项目的CSS压缩需求太简单就不改啦(另一原因是懒-_-)
配置代码.png执行指令:
gulp cssmin
执行效果.png
grunt实现
grunt使用的扩展库是:grunt-contrib-cssmin grunt-contrib-cssmin.png 配置代码.png
执行指令:
grunt g-cssmin
执行效果.png
对比:
用法、速度都同其他插件差不多,主要是执行指令后的提示:
gulp 插件还是统一的列出执行指令的时间(执行时系统时间、执行任务消耗时间);
grunt 插件的提示终于比gulp有了一些亮点,列出了压缩前后的容量对比;
5.压缩图片;
压缩图片也是前端开发优化的一大部分,这部分要对比(tucao)的内容多一些;gulp实现
gulp使用的插件是:gulp-imagemin
调用指令:
gulp imagemin
执行效果.png
grunt实现
grunt实现的插件是:grunt-contrib-imagemin grunt-contrib-imagemin.png 配置代码.png
执行指令:
grunt g-imagemin
执行效果.png
对比:
1.grunt插件的旧版本有一些坑,具体来说就是相同的版本、相同的配置代码换一台电脑执行的时会报错(新版本已解决该bug, 建议使用最新版 );
2.最新版grunt插件在执行以上任务时(压缩307张图片),速度上的劣势就比较明显了,等待的时间比较长一些;
3.压缩出来的效果,本项目图片都是PS批量另存为“web所用格式”过,所以gulp跟grunt压缩后的容量几乎没变化;
针对第三点,试过网上随机下载一些png(三种体积大小)做了一个小对比:
发现grunt跟gulp插件压缩png的体积基本相同,均被TinyPng(熊猫png压缩)完爆,当然TinyPng这么可怕的压缩比,压缩过后显示质量不可能100%,压缩后的文件可能会有白斑(高清屏看比较明显);
6.HTML文件压缩、依赖加载替换。
上述的样式文件、脚本文件合并后,调用它们的html文件怎么办呢?手动改太low!gulp、grunt这类部署工具当然提供了对应的插件;
gulp实现
gulp实现的插件是:gulp-html-replace 、gulp-htmlmin
gulp-htmlmim官网.png 配置代码.png 配置代码.png
执行指令:
gulp htmlmin
执行效果.png
grunt实现
grunt实现的插件是:grunt-contrib-htmlmin 、 grunt-usemin grunt-contrib-htmlmin官网.png grunt-contrib-usemin官网.png
对应配置:
配置代码.png 配置代码.png执行指令(此处 grunt配置依赖copy, copy指令执行完成后才能成功):
grunt g-htmlmin
执行效果.png
对比:
如果说前面几个插件,grunt都这样多一个步骤倒没什么并不影响配置效率;但grunt-usemin这个插件就体现出grunt插件的混乱了,使用方式跟其他几个插件差太多;
该配置是使用grunt遇到最大的一个坑!使用方式复杂不说,官网上的demo说明也是一塌糊涂,实现过程查了很多资料才配置出来;而且上面实现的配置方式并不优雅(依赖copy指令);
合并以上指令:
gulp部署配置文件的总观是这样滴:
gulp配置.pnggulp中每个任务各自为一个“task”,然后使用最后一个“task”组合起来。
执行指令(使用“default”参数就设置成gulp默认任务):
gulp
执行效果.png
grunt部署配置文件的总观是这样滴:
grunt配置.pnggrunt中所有任务均在"initConfig"中定义,然后通过“registerTask”使用(单独用或组合用)。
执行指令(使用“default”参数就设置成grunt默认任务):
grunt
执行效果.png
对比:
合并后的指令, 速度上gulp比grunt快一些(grunt主要卡在压缩图片);
三.总结
虽然以上任务实现效果都差不多;但本人更推荐使用gulp,作为前端开发程序猿对gulp回调语法更有好感,最重要的是gulp插件使用方式比较统一不会像grunt插件那么混乱,所以更容易阅读、维护;实际上本人grunt的学习时间跟使用时间都比gulp长, 因而更能体会gulp相对于grunt的优点;
demo源码:
wteam-xq/threeKingdoms
gulp练习代码:
testDemo/gulpfile.js at master · wteam-xq/testDemo · GitHub
参考文档:
Gulp不完全入门教程
gulp plugins 插件介绍
grunt官网文档
网友评论