>[success] # 自动化构建工具 ~~~ 1.举个例子当项目在使用一些项目使用 ES6代替Javascript，或者scss语法 的时候，我们往往需要写完后在执行这些对应语法转换指令例如： （1）执行编译命令：xx.scss->xx.css （2）执行压缩丑化命令：xx.js->xx.min.js 如果文件代码被修改，那么上面两条命令就要再执行一遍。同样的，也会有用Less写CSS，用Jade写HTML， 用webpack/Browserify模块化、为非覆盖式部署的资源加MD5戳等等。自动化构建工具就是用来帮助我们 完成这些重复而机械的工作的 2.'NPM Scripts' 是实现自动化构建工作流的最简方式,有时候开发阶段会在package.json文件里面， 使用scripts字段定义脚本命令，通过指令来执行scss 或者模板工具，压缩工具的指令，但是存在 问题'对于相对复杂的构建过程就显得非常吃力' 3.常见的自动化构建工具Grunt、Gulp以及FIS 3.1.'Grunt'由于它的工作过程是基于临时文件去实现的，所以它的构建速度会相对比较慢， 且处理的环节越多，文件的读写次数越多。因此对于超大型项目，文件会非常多，它的构建速度 就会非常慢 3.2.'Gulp' 很好的解决了 Grunt 中构建速度慢的问题，因为它是基于内存去实现的，也就是说它对于 文件的处理环节都是在内存当中完成的，相对于磁盘读写速度自然就快了很多。另外它支持同时去执行 多个任务，效率大大提高，且使用方式相比于 Grunt 更加直观易懂，插件生态同样非常完善，应该算是目 前市面上最流行的前端构建系统了。 3.3.FIS 是百度的前端团队推出的一款构建系统它把我们在项目中一些典型的需求尽可能地都集成在内部了 4.可以通过这些自动化构建工具完成类似scss 或者模板工具，压缩工具的指令统一管理和执行顺序 ~~~ [Grunt、Gulp以及FIS](https://www.yuque.com/kongdepeng/rgpm60/xfvuom) [跟多的关于构建工具比较](https://www.cnblogs.com/zs-note/p/7093339.html) [NPM Scripts 介绍](http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html) >[danger] ##### 构建工具 和webpack模块打包工具区别 ~~~ 1.任务式的构建工具，虽然解决了开发流程中自动化执行预设任务的问题，但不能解决项目中代码如 何组织成不同功能的代码包、不同代码之间如何相互依赖等问题（模块化问题） ~~~ [参考文章1](https://www.dazhuanlan.com/2020/02/12/5e43b65b6ac40/) [参考文章2](https://blog.csdn.net/qq_36671474/article/details/82227369) ~~~ 1.Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的 具体步骤，工具之后可以自动替你完成这些任务。 2.Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js）， Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个 （或多个）浏览器可识别的JavaScript文件。 3.总结'Grunt和Gulp' 像是一个流程，例如先执行语法转换-》在执行压缩 项链式一步一步执行，'webpack' 遇到需要处理的就通过'loaders'处理，这个执行的步骤是看通过入口进入的文件，里面依赖的内容，再根据 配置规则处理依赖的内容。 ~~~