乐趣区

关于自动化构建工具:前端自动化构建

自动化构建

开发阶段写的源代码自动化的转化程生产环境中能够运行的代码或程序,
个别咱们把转化的过程称之为自动化工作流,脱离运行环境兼容带来的问题
应用提高效率的语法标准和规范

  • 罕用的自动化构建工具
  • Grunt Gulp FIS(webpack 是模块打包工具,不在此次范畴之内)

NPM Scripts

Grunt

  • 最早的前端构建零碎,插件生态欠缺,然而工作过程是基于临时文件实现的,因而构建速度较慢
  • 例如用它实现 sass 文件构建,先编译 sass,主动增加公有属性前缀,最初再压缩代码。这个过程中 Grunt 每一步都会有磁盘读写操作
  • 例如 sass 在编译实现后,将后果写入临时文件,下一个插件再读取这个临时文件进行下一步构建
  • 解决的环节越多,文件读写的次数就越多,对于超大型我的项目,文件多,解决慢
  • grunt 入口

Gulp

  • 解决了 Grunt 构建速度慢的问题,基于内存去实现的,也就是说他对于文件的解决环节都是在内存中实现的,绝对于磁盘读写速度就快了很多
  • 另外它默认反对同时执行多个工作,效率大大提高,应用形式通俗易懂,插件也比较完善
  • gulp 入口

F.I.S

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

备注:对于脚本 #!/usr/bin/env node 的参考。带有这一行的文件就是脚本文件,加这一行为了让 node 晓得这个脚本文件运行的目录

退出移动版