【收藏】前端自动化构建工具大汇总！

版权声明：以上文字均为原创，若想转载，请添加VX：duing2 https://blog.csdn.net/panda_panda_/article/details/83413508

许多学习前端的小伙伴面对前端自动化构建的时候经常一筹莫展，摸了摸自己的头才恍然大悟是时候买个防脱洗发水了。哦不，是时候找一些合适的前端自动化构建工具了~

什么是前端自动化？

说起前端自动化，这样的一个名词听起来是非常有吸引力和向往力的。

前端工程师需要维护的代码极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。

致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。比如百度有FIS,腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等，而现在讨论较多的是Gulp。

今天就来奉上一些好用的前端自动化构建工具叭~ 内附网址，小伙伴们自行服用哦~

网址：http://webpackdoc.com/

Webpack是一个模块打包器，也是目前最热门的前端资源模块化管理和打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

优点：

1.同步异步两种组织模块依赖方式，异步可以进行代码拆分。
2.智能解析器，几乎可以处理任何第三方库。
3.拥有功能丰富的插件系统，可满足各式各样的需求。
4.使用异步I/O和多级缓存提高运行效率。

缺点：

1.配置多入口时，没有glob的方式，需要额外处理。
2.目录结构复杂时，file-loder里面的path功能太弱，很多时候无法自定义构建后的目录结构，只能放在一个目录下。
3.源码比较复杂，遇到问题看源码，要花很长时间。

网址：http://fis.baidu.com/

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的一种前端工程化构建工具。

优点：

1.自动更新的文件名；

2.“编译”文件（这里的编译不同于后台编译的意思哦）
资源定位：获取任何开发中所使用资源的线上路径；
内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中；
依赖声明：在一个文本文件内标记对其他资源的依赖关系；

3、代码检校（jslint）；
4、自动化测试；
5、代码压缩（含cssSprite）；
6、部署。

缺点：

1.FIS 的插件开发滞后，不更新，反馈不跟进；
2.只能依赖旧版本的 nodejs，上新版 nodejs 会产生报错；
3.FIS的一些基础要求可能与项目有冲突。

网址：http://www.gulpjs.com.cn/

用自动化构建工具增强你的工作流程！找Gulp准没错~

优点：

1.易于使用：
通过代码优于配置的策略，Gulp让简单的任务简单，复杂的任务可管理。
2.构建快速：
利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。
3.插件高质：
Gulp严格的插件指南确保插件如你期望的那样简洁高质得工作。
4.易于学习：
通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握，如同一系列流管道。

缺点：

如果遇到插件bug，需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。

网址：http://www.gruntjs.net/

Grunt就是一套前端自动化工具啦，是一个基于nodeJs的命令行工具。一般情况下可以用于压缩文件，合并文件以及简单语法检查等~

优点：

1.适用于企业初期；
2.大量现成的插件封装常见任务，管理任务之间的依赖关系；
3.自动化执行依赖的任务

缺点：

1.配置复杂，繁重
2.使用前必须安装node

网址：https://rollupjs.org/guide/en

Rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。

优点：

1.编译成对旧浏览器友好的代码；
2.支持在浏览器中使用Node模块；
3.能使用环境变量；
4.尽可能的压缩，减少文件大小。

缺点：

1.需要至少懂一点JavaScrip，这样便于更好地理解与应用；
2.需要对ES2015modules有基本了解；
3.在你的设备上要有npm。

网址：https://coolie.ydr.me/

coolie这个单词有点儿意思，中英同音并且同义，义指“苦力”。

现在，coolie作为前端构建工具，它仍然是苦力（coolie）。往常需要人为手动做的苦力活、重复活，现在都全部交给coolie来做。因为 coolie能够做的更好、更精确。

优点：

1.前端工程化解决方案
2.与后端语言，工程类型无关
3.前端模块加载器零配置
4.前端开发构建工具少配置
5.开发兼容CJS和CMD，生产CMD
6.独一无二的模块路径压缩技术

缺点：

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
3.有些状态不可能保存在客户端。

//////////

现在的前端开发已经不再仅仅只是静态网页的开发啦，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，前端自动化构建在整个项目开发中越来越重要。所以对于小伙伴们来说，前端自动化真的是一个炒鸡重要的skill哦~

不过前端工程自动化方案更新很快，学习这些工具也只是为了减轻重复劳动，提高效率。小伙伴们一定要选择适合自己的方案，不要再追寻技术的路上迷失了方向哦！

今天的福利大概就到这里啦，小伙伴们可以有时间根据自己喜好选择顺手的尝试一下啦~

不过说真的，很多公司都在使用Grunt，貌似真的方方面面都很优秀哎。不过选择哪个还是要由小伙伴们自己决定啦~ 学会自动化构建可是能省心不少呢~ 加油啦！