gulp VS grunt

Posted 2021-04-08 AIUIUED

一.项目部署任务说明

本demo项目文件结构图：

dest 即为放置部署后文件的目标文件夹，部署该项目需要处理的事项：

1.删除上次部署的所有文件；

2.复制文件，网页依赖库、小图标等拷贝一份到dest文件夹内；

3.压缩、合并脚本（JS）文件；

4.压缩样式（CSS）文件；

5.压缩图片；

6.html文件压缩、依赖加载替换。

二.gulp  grunt部署对比

1.删除上次部署的所有文件

gulp实现：

在项目文件路径下打开终端bash（mac）或cmd(window), 输入

gulp clean

就完成清理任务啦！(“clean”为自定义字符串)

grunt实现：

在项目文件路径下打开终端bash（mac）或cmd(window), 输入

grunt g-clean

就完成清理任务啦！(g-clean是自定义任务名称)

2.复制文件

gulp实现：

在项目文件路径下打开终端bash（mac）或cmd(window), 输入

gulp copy

grunt实现：

在项目文件路径下打开终端bash（mac）或cmd(window), 输入

grunt  g-copy

就完成拷贝任务啦！

3.压缩、合并脚本（JS）文件

本demo项目中， 主要将到datas、js文件夹中的脚本压缩、合并然后放置dest对应文件夹内；

gulp实现：

执行指令（“uglifyjs”为自定义字符串，可以在上述配置文件中使用你任何喜欢的字符串代替）：

gulp uglifyjs

grunt实现：

执行指令：

grunt g-uglify

4.压缩样式（CSS）文件

gulp实现：

执行指令：

gulp cssmin

grunt实现：

执行指令：

grunt g-cssmin

5.压缩图片

gulp实现：

调用指令：

gulp imagemin

grunt实现：

执行指令：

grunt  g-imagemin

6.HTML文件压缩、依赖加载替换

gulp实现：

执行指令：

gulp htmlmin

grunt实现：

执行指令(此处 grunt配置依赖copy, copy指令执行完成后才能成功)：

grunt g-htmlmin

合并以上指令：

gulp部署配置文件的总观是这样滴：

gulp中每个任务各自为一个“task”，然后使用最后一个“task”组合起来。

执行指令（使用“default”参数就设置成gulp默认任务）：

gulp

grunt部署配置文件的总观是这样滴：

grunt中所有任务均在"initConfig"中定义，然后通过“registerTask”使用（单独用或组合用）。

执行指令（使用“default”参数就设置成grunt默认任务）：

grunt