前端构建工具的区别与联系

前端自动化构建工具,我个人将其分为两类:构建工具、模块化工具。但由于模块化工具的功能越来越丰富,两者之间的界限也越来越模糊。
构建工具主要有:Gulp和Grunt
模块化工具主要有:Webpack、Browserify,以及浏览器端的模块化实现SeaJs、RequireJs

  • 构建工具

    • Gulp:Gulp的处理过程,可以简化为,以流的形式读入文件 -> 文件流在各个处理函数之间流转处理 -> 输出文件。Gulp可以定义一系列任务,如压缩代码、预编译代码、压缩图片、生成图片雪碧图、CSS自动补全等,只要事先编写好这些任务,每次发布前只需要在命令行敲一行代码就能完成构建。当然,也可以在Gulp使用Webpack和Browserify。

    • Grunt:Grunt与Gulp的功能类似,两者最大的区别就是,Grunt处理过程中会产生多个中间态文件,有多次I/O操作,效率比较低;而Gulp只需要一次I/O操作,中间过程都是文件流在各任务之间流转,效率较高。其他方面,相较于Grunt,Gulp的API设计更加简洁、易学,并且遵从unix的设计哲学,处理过程更加清晰。

  • 模块化工具

    • 本地模块化

      1. Webpack:WebPack只是一种模块化的解决方案,但由于其加载器(loaders)的存在,使WebPack可以在打包文件之前,对原始文件做预处理。WebPack的处理过程可以简化为,给定一个入口文件,从该文件开始找到项目的所有依赖,并用loaders处理这些文件,最后打包成浏览器可执行的JavaScript文件。Gulp和WebPack有很多重叠功能,但处理问题的思路差别很大;Gulp更关注过程,明确地先做什么,再做什么,而WebPack更关注模块划分以及模块之间的依赖关系。

      2. Browserify:Browserify与WebPack的功能类似;它也是基于文件流的,更适合与Gulp结合使用;相较于WebPack,Browserify能够对处理过程做更精细的控制,而WebPack相对更加‘黑盒’。还有就是WebPack的生态要比Browserify好得多。

    • 浏览器端模块化

      1. SeaJs:SeaJs定义了define、module、exports、require等函数,使浏览器内可以执行加载模块的语法(本质上是在页面内插入新的script标签,加载模块js)。

      2. RequireJs:RequireJs与SeaJs的功能基本相同,但RequireJs遵从AMD规范,而SeaJs遵从CMD规范;并且两者异步加载的js的执行时机也有差别。

你可能感兴趣的:(gulp,webpack,browserify,seajs)