前端自动化构建工具的分析

引互联网 言 飞速发展的今天 ， 前端已经不再只是一些简单
码更 的静加态文复杂件且了难， 对于管理 于很，多产品 例如有许 来说，多的前端第三代码方库 甚至的依赖 比后 端 需要代
管理， 有独立的前端测试需要自动运行， 有很多代码需要在
发布时 进行打包压缩等等 。 因此 构建 一个自动化的前端开发
流程是非常必要的。
自动化的前端开发流程就是通过自动化构建工具完成
一些需要反复重复的任务， 例如压缩、 编译 、 单元测试等 ，
从而减轻开发人员的工作， 实现前端的自动化。 目前主流的
自动化构建工具有Grunt丰JI Gulp两种， 本文主要对这两种
构建工具进行比较分析 。
1 Grunt构建工具
Grunt 是目前社区最成熟， 插件支持撮多的一个构建 工
具。 Grunt功能简单， 主要管理一系列任务， 其中大部分任
务都是由第三方插件实现， 因此使用Grunt构建项目需要安
装并为日载对应的描件。 Grunt 构建项目需要在项目根目录下
添加两个文件：package.json和 Gruntfile 。
package.json：此文件用于存储项目的元数据 ，以便将
此项目发布为npm模块。可以在此文件中列出项目依赖的
Grunt插件， 放置于devDependencies配置段内 。
Gruntfile：此文件被命名为Gruntfile.js ， 是 Grunt
的配置文件， 用于配置或定义任务并加载Grunt插件。 下而
以合并文件的任务为例给出配置文件：
从以上代码段可以看出 ， grunt配置文件主要包含四个
部分·
(1) wr apper函数 。
(2）项目与任务 配置 ：在grunt.initconfig 中配置每
个任务， 包括源文件和目标文件等。
(3）通过loadNpmTasks加载Grunt插件和任务。
(4）通过registerTask自定义任务， 组合第三方插件
提供的任务。
Grunt 的支将播件非常丰富 ， 因此使用起米比较方便，
但其缺点是配置文件维护起来比较困难， 其主要原因为：
( 1）配置和运行分离
在软件开发中 ， 变量的声明和使用在一起会便于现解和｜
修改， 但在配置文件中，任务的自己置和调用相隔很远， 降低
了代码的可读性。
(2）捅件功能不够正在一
Grunt的插件实现功能较多， 不够单一， 这样会增加沟
通成本和出错率。
2 Gulp构建工具
Gulp是基于Node. js 的构建 系统 ， 开发者可以使用它在
网站开发过程中自动执行常见任务，比如编译预处理 css.
压缩JavaScript和刷新浏览器等， 来改进网站开发的过程。
Gulp本身虽然不能完成很多任务， 但它有大量插件可用 ， 开
发者可以安装播件米完成任务。
使用 Gulp 构建项目需要在项目 根目录下创建文件
gulpfile.js ， 在文件中定义gulp 任务， 然后通过gulp命
312 2016年7期
令来运行 任务。 下面以压缩JavaScript文件的任务为例进
行详细介绍：
(1）首先安装插件gulp 叩gli邸 ， 该插件的功能用于实
现文件的压缩。
(2）：项目的根目录下创建文件gulpfile.js，文件中
通过require加我gulp 和gulpuglify模块 - 。
(3）自定义一个文件，压缩任务， 命名为minify, ;定
义该任务执行 的回调函数， 在回调函数中定义该任务的具体
实现 。
3 Gulp 和 Grunt 的对比
Gulp利Grunt同为前端自动化构建工具，但在工作流程
和效率等方面存在很大的差异 ， 下面’ 从 工作流程 、 使用方式、
效率和插件的重用性等多个方面进行比较分析 。
(1）工作流程
Grunt的工作流耀：重复着读文件、 修改文件、 写文件
的流程。 使用Grunt的I/0 过程中会产生一些中间态的临时
文件， 一些任务生成临｜ 时文件， 其它任务可能会基于临时文
件再做处理并生成最终的构建后文件。
Gulp的工作流程：从文件流到文件流。 使用Gulp的优
势和就操作连接 是利用起来 流的方式 ， 因此进行文件的处 只有一次I理/0， 的通过 过程管， 道流程更 将多个i任务 晰 ，
更纯粹。
(2）使用方式：Grunt 是采用自己置 的策略处理任务， 而
Gulp采用代码优于配置 的策略， 使得复杂的任务便于管理，
更易于维护。
(3）效率：因为Grunt操作会创建 临时文件 ， 会有频
繁的I/0操作， 而Gulp使用的是流操作， 不需要往磁盘中
写中间文件， －］是在内存中处理， 直到输出结果 ， 可以更
快地完成构建 。 因此在效率上Gulp远胜Grunt。
4结束语
Grunt和Gulp作为的端自动化工具， 在功能上都能很好
地实现 前端自动化。 由于Grunt比Gulp更加频繁地操作文
件系统， 因此使用数据流的Gulp在效率上优于Grunt， 对于
一个小的less 文件， Gulp 通常需要6时 ， 而Grunt则大概
需要50ms 。 但是当前Gulp的社区远不如Grunt成熟， 有些
功能插件Gulp可能没有， 这应该是Gulp 的一个小 小的劣势 。
从各个方面分析可见 ， Gulp会更受前揣开发者的青睐。
 

转载于:https://my.oschina.net/u/2423404/blog/1632813