webpack 与 gulp/grunt

甄伟兆
2023-12-01

1、webpack
Webpack 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出他们的依赖关系,将它们打包为可部署的静态资源。

2、grunt/gulp

自动化构建工具,就是用来代替手工执行机械重复的事情,解放我们的双手的。
例如,项目使用 CoffeeScript/ES6代替Javascript,但浏览器对这些语言是不支持或者支持得不完整的,要让它在浏览器里运行起来就要执行以下操作:

(1)执行编译命令:xx.coffee->xx.js
(2)执行压缩丑化命令:xx.js->xx.min.js

如果文件代码被修改,那么上面两条命令就要再执行一遍。同样的,也会有用Less写CSS,用Jade写HTML,用webpack/Browserify模块化、为非覆盖式部署的资源加MD5戳等等。自动化构建工具就是用来帮助我们完成这些重复而机械的工作的。

3、webpack与grunt/gulp

不同职能的工具,可以配合使用

官方对webpack的定位是模块打包器,而gulp/grunt属于构建工具。虽然webpack可以代替gulp的一些功能,但是很明显webpack和gulp/grunt不是一个职能的工具。webpack官方中给出了webpack with gulp/grunt的说明,两者可以配合共同服务于一个项目的。

相同点:都可用于项目打包,文件压缩,文件监测等功能。

不同点:

两种工具的侧重点不同,webpack主要侧重于模块的打包,适合于单页面的项目,开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。gulp侧重于前端开发的工作流程,通过配置一系列的task,如less预编译等,然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程。
 类似资料: