写给自己的 JavaScript 知识点拾遗 - 2

有图镇楼:

这个关系我开始是有一点混乱的。比如会问别人,webpack 和 gulp 有什么区别。想想还是自己修炼不够,这也是我这次想系统的对自己的 JavaScript 知识点进行梳理和拾遗的初衷,忙了太多的项目,总算有时间系统的沉淀一下了。下面进入正题。

Gulp 和 Grunt

我用过 Gulp,没有用过 Grunt。他们都属于前端工程化构建工具。是用来优化我们前端的工作流程的的。比如 热更新,压缩,混淆,转译,打包。你可以把 Gulp 比作一个只有一个传送带的流水线,你在流水线上增加节点来对输入进行处理,处理完成之后的结果会被放到传送带上传送给下一个节点,直到最终输出。那一个个节点就是我们配置的一个个插件。传送带就是 Gulp 基于流的处理方式。配置完成后,你一个命令,它就帮你完成了所有工作。所以说他们是一个工程化的框架。

把 Gulp 和 webpack 比较是不适合的。Gulp可以配置 SeaJs,RequireJS。也可以使用 webpack 插件。还有过 Gulp-webpack。

browserify 和 webpack

这两个兄弟学术上属于预编译模块方案。通俗一点,我们上次说的 SeaJS 和 RequireJS 是属于在线编译模块方案,要在浏览器环境下编译。而 browserify 和 webpack 这两个哥们同样前者属于 AMD,后者属于 CMD,不同的地方就体现在预编译这三个字上了,他们已经提前都编译好了,不需要在浏览器中再去加载解释器了。你就在本地写你的 JavaScript 就好了,不管你是 AMD,CMD 还是 ES Module,他都认识,并且帮你转换成浏览器能够直接使用的 JavaScript 代码。

反正我以后是肯定不会再问别人 webpack 和 Gulp 的区别了。

目前 webpack 整合了很多 Gulp 的优点,他们的功能就出现了重叠,给我带来了误解。