前端自动化构建

Posted 2021-09-13 mcgee0731

自动化构建

开发阶段写的源代码自动化的转化程生产环境中可以运行的代码或程序，
一般我们把转化的过程称之为自动化工作流，脱离运行环境兼容带来的问题
使用提高效率的语法规范和标准

• 常用的自动化构建工具
• Grunt Gulp FIS （webpack是模块打包工具，不在此次范围之内）

NPM Scripts

Grunt

• 最早的前端构建系统，插件生态完善，但是工作过程是基于临时文件实现的，因此构建速度较慢
• 例如用它完成sass文件构建，先编译sass，自动添加私有属性前缀，最后再压缩代码。这个过程中Grunt每一步都会有磁盘读写操作
• 例如sass在编译完成后，将结果写入临时文件，下一个插件再读取这个临时文件进行下一步构建
• 处理的环节越多，文件读写的次数就越多，对于超大型项目，文件多，处理慢
• grunt入口

Gulp

• 解决了Grunt构建速度慢的问题，基于内存去实现的，也就是说他对于文件的处理环节都是在内存中完成的，相对于磁盘读写速度就快了很多
• 另外它默认支持同时执行多个任务，效率大大提高，使用方式通俗易懂，插件也比较完善
• gulp入口

F.I.S

• 百度内部的构建系统
• 相比于前两个微内核的特点，它更像是捆绑套餐，拥有高度集成的特点，他把我们项目中典型的需求尽可能集成在内部
• 例如，资源加载，模块化开发，代码部署，性能优化
• FIS入口

备注：关于脚本#!/usr/bin/env node的参考。带有这一行的文件就是脚本文件，加这一行为了让node知道这个脚本文件运行的目录