[JavaScript知识库]浅谈构建工具.

某天，(记不得是那天了）??一个之前一起工作的同事问我。

孟兄 你知道什么是构建工具吗？

我当时笑了笑说 我只用webpack 。

同事 说 gulp 你一直不用吗？

我笑了笑? 直接把 我所知道的九个构建工具 一个个的发到了我同事手里。

凑巧的是 我 csdn 好久没有更动态了?

今天 就把 我所知道的九个构建工具 写下来 分享一下

以下内容仅代表我个人观点?

构建工是一段自动根据源代码生成可使用文件的程序，构建过程包括打包、编译、压缩、测试等一切需要对源码进行的相关处理。构建工具的目的是实现构建过程的自动化，使用它可以让咱们避免机械重复的劳动。从而解放双手。

第一个 ： webpack?

webpack 是一个打包模块化JS的工具 ，在webpack里一切文件都是模块。通过loader转换文件，通过pkugin注入钩子，最后输出由多个模块合成的文件。 webpack 专注于构建模块化项目

第二个 ： gulp

gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件，读写文件。

第三个： browserify

Browserify可以让你直接使用类似于node的require()的方式来组织浏览器端的JavaScript 代码，通过预编译让前端JavaScript 可以直接使用nodeNPM 安装的一些库

第四个： yeoman

Yeoman是一个强大的前端构建工具，? 帮助你快速的开展一个项目工程，提供最佳实践和工具，来让你保持高效率编码。

他们自己提供了一个构建生态系统，主要通过 yo 这个命令来构建一个完整的项目或项目的一部分。

通过官方的生成器，他们建立了一个Teoman的工作流，这个流是由一个强大的，固定的客户端组建，包含工具和框架帮助开发者快速建立比较厉害的Web应用。

作为良好文档和深入思考构建过程的思考者，Yeoman包含了检测（静态检测）、测试以及压缩等一系列工具，让开发者能够更加专注于思考解决方案。

Yeoman 其实是三个工具的总和：

1? Yo -------脚手架，自动生成工具

2? Grunt 、 gulp -------构建工具（最初只有grunt，后来gulp用的人多了之后添加了进来?

3? Bower、 npm -------包管理工具 （原来是bower， 后来添加了npm）

?以上的三个色各自独立发展和运行的，混合后效果就不一样，主要在于yo 相当于一个环一样，把grunt这些工具连在了一起。

第五个：grunt?

Grunt 和 Npm Script 类似 ，也是一个任务执行者。?

Grunt 有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系

第六个：babel

Babel 是一个工具链 ，主要用于将ECMAScript 2015+ 版本的代码转换为向后兼容的JavaScript 语法 以便能够运行在当前和旧版的浏览器或者其他环境中

第七个：? FLS3

Fls3 是来自百度的国产构建工具 ， 相对于grunt，gulp这些只能提供了基本功能的工具，Fis3 集成了web开发中常用的购物功能?

第八个： Rollup

Rollup 是一个和webpack很类似但专注于ES6的模板打包工具，它的亮点在于，能针对ES6源码进行TreeShaking 以去除那些已经被定义但没使用的代码并进行Scope Hoisting(作用域提升）

以减小输出文件的大小和提升运行性能。Rollup的方法和webpack差不多

第九个：Parcel?

极速零配置web应用打包工具，parcel 使用worker进程去启动多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译

完