前言:

随着前端vue、react、Angular等框架越来越火,自动化构建工具也时不时映入我们的眼帘,转眼已是几分天下的局面,功能很强大,使得前端项目开发和维护越来越方便,但是想灵活运用,学习曲线却越发陡峭,文档更是爆炸式的膨胀,我们面对的是各种基于不同编译工具的专项功能插件,及对应的配置参数。

搞好了:解放双手,极大的提升"开发体验",一键搞定一切,空对空导弹一键发射,发射后不管!自动追击目标。脱靶自动启动自曝程序,不会伤及地面。

搞不好:鸡肋,加重负担,浪费人力(专人维护,其他人一点不会,或者多版本迭代后变得难以上手),反而浪费时间(调试流程别扭,半自动半手动ctrl+c还得关闭这个软件打开那个软件),黑盒(最禁忌!直接傻眼),过度依赖编译工具,束缚技术选型,单一技术栈。

编译工具带给我们什么?

(1)搭建开发环境:

  • 热更新

  • mock数据

  • 代理

(2)生成上线文件:

  • 编译(less,sass,es6,typescript,.vue,.jsx )

  • 语法校验

  • 压缩校验 css ,js

  • css3代码自动补全

  • px转rem

  • 自动化测试

  • 自动精灵图片

  • 模块化

  • 代码分离

  • 智能 WebP

(3)文件操作,一键发版到服务器等。

编译工具对比

偏流程:

Grunt(需要"配置"很多任务)

Gulp(需要"编写"很多任务)

偏模块化:

Browserify(只能对js文件有效,较轻量级)

Webpack(需要配置,最初定位SPA,模块化)

rollup.js(后起,定位和Webpack相同,配置简单,各有所长)

国际空间站:(高度集成,一站式服务,什么功能都有)

Yeoman、FIS、jdf、Athena、cooking、weflow

(1)Yeoman:google

yo(脚手架工具)、grunt(构建工具)、bower(包管理器)

yo (脚手架工具)安装generator 可以安装许多generator项目中使用某个(很好)

Bower(包管理器,不再维护) or npm 管理各种包 升级 卸载 或者制定使用某个版本

Grunt or Gulp (构建工具)

(2)百度的FIS(很多封装成熟的功能,简单配置即可使用,自由度受限)

官网:http://fis.baidu.com/

https://github.com/fex-team/fis3-demo 3年前停止维护,不支持最新的node版本!

(3)jdf、Athena

讨论:如何选择?

熟悉下grunt、gulp、webpack的配置项

grunt:

更多实例分析。。。

gulp:

更多实例分析。。。

webpack:

"依赖链"来组织最终的文件。

打包后的样子:

更多实例分析。。。

讨论

  1. 学习方法。
  2. 我们能做些什么?毕竟已经有很多脚手架或者比较成熟的例子。