grunt， gulp以及webpack概念和应用

来源：互联网发布：网络语言大神什么意思编辑：程序博客网时间：2024/06/05 02:14

接触前端模块化的时候如题的三个工具往往出现，下面就介绍下其区别与应用。

工具名概念功能 grunt 自动化任务处理工具合并文件，语法检查，Scss 编译，压缩文件，监听文件变动，建立本地服务器,编译、单元测试、linting等 gulp 基于流的自动化构建工具 webpack 前端资源模块化管理和打包工具

可见从定位上来说

Grunt自动化构建工具
Gulp流式自动化构建工具
webpack:前端资源模块化管理和打包工具

Grunt与Gulp的区别

看到过一个官方的PPT，http://slides.com/contra/gulp#/27，附上一个解读链接Grunt与Gulp

webpack中文

http://www.css88.com/doc/webpack2/

配合使用webpack与Grunt或Gulp

webpack的定位是模块打包器,相比于gulp或是grunt,webpack的竞争对手应该是browserify等。所以webpack主要处理使用babel把es6的代码转化成es5的代码等最后打包阶段的处理，和构建工具不是取代关系。
举个栗子gulp + webpack 构建多页面前端项目来加深理解~

0 0