webpack gulp grunt 简单介绍

本文主要是讲下webpack的相关知识点，理论比较多，由于webpack的功能很是强大，说到的也基本都是常常用到的。

这三个工具都属于前端自动化的工具，都是第三方的，而且国内不少大型团队也都有本身成熟的自动化部署工具，如百度有FIS,腾讯有Modjs等 ；

 

下面简单说下他们的区别：

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，通常用于：压缩文件，合并文件，简单语法检查。

gulp.js - 基于流的自动化构建工具，也就是基于nodejs stream基础实现的。

　　易于使用
　　经过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
　　构建快速
　　利用 Node.js 流的威力，你能够快速构建项目并减小频繁的 IO 操做。

 

Webpack 是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载，公共代码提取，经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等，也就是说webpack不一样于gulp grunt 这两个是纯工具，webpack最大的特色就是自身支持模块化儿，任何资源均可以做为模块来引入。

 

你们对这几个工具的执行原理有兴趣的也能够本身研究下，相信会有精彩的发现。。今天就是跟你们简单的介绍下概念的东西，具体的配置我们之后也会说道，到时候会具体说webpack的配置。