跳转到内容区

自动化构建

自动化构建也是前端工程化中很重要的一部分,本课程中着重介绍前端行业目前最主流的前端自动化构建方案和工具。

总的来说,开发行业的「自动化构建」就是把我们开发阶段写出来的源代码自动化的转换为生产环境中可以运行的代码或者程序。一般我们会把这样一个转换的过程称之为「自动化构建工作流」。它的作用就是让我们尽可能的脱离运行环境的问题,在开发阶段使用一些提高效率的语法、规范、标准。

自动化构建也是前端工程化中很重要的一部分,本课程中着重介绍前端行业目前最主流的前端自动化构建方案和工具。

特别说明:Webpack 严格意义上并不属于自动化构建工具,它的本质任务实际上只是实现模块化,只不过插件和扩展的生态特别好,所以能够完成一部分常见的构建任务。但是更专业的事情还是需要更专业的工具来做,所以这里着重介绍的是 Gulp 一类的自动化工具。Webpack 另外有更为完整的课程。

适用人群

有一些简单前端开发经验,希望深入了解自动化构建,提高开发效率的同学

知识储备

  • 熟练使用 HTML、CSS
  • 掌握 JavaScript 语言基础
  • 了解 Vue.js 之类的框架更佳

学习目标

  • 了解自动化构建的作用
  • 掌握 Grunt 自动化工具的使用
  • 掌握 Grunt 插件的开发和使用
  • 掌握 Gulp 自动化工具的使用
  • 了解 Gulp 的常用插件,以及插件实现机制
  • 理解 Gulp 构建过程的核心工作原理
  • 能够基于 Gulp 搭建传统前端项目的自动化工作流
  • 了解百度的 FIS3 工具

课程内容

  1. 自动化构建简介
  2. 自动化构建初体验
  3. 常用的自动化构建工具
  4. Grunt 的基本使用
  5. Grunt 标记任务失败
  6. Grunt 的配置方法
  7. Grunt 多目标任务
  8. Grunt 插件的使用
  9. Grunt 常用插件及总结
  10. Gulp 的基本使用
  11. Gulp 的组合任务
  12. Gulp 的异步任务
  13. Gulp 构建过程核心工作原理
  14. Gulp 文件操作 API
  15. Gulp 案例 - 样式编译
  16. Gulp 案例 - 脚本编译
  17. Gulp 案例 - 页面模板编译
  18. Gulp 案例 - 图片和字体文件转换
  19. Gulp 案例 - 其他文件及文件清除
  20. Gulp 案例 - 自动加载插件
  21. Gulp 案例 - 开发服务器
  22. Gulp 案例 - 监视变化以及构建优化
  23. Gulp 案例 - useref 文件引用处理
  24. Gulp 案例 - 文件压缩
  25. Gulp 案例 - 重新规划构建过程
  26. Gulp 案例 - 补充
  27. 封装工作流 - 准备
  28. 封装工作流 - 提取 gulpfile
  29. 封装工作流 - 解决模块中的问题
  30. 封装工作流 - 抽象路径配置
  31. 封装工作流 - 包装 Gulp CLI
  32. 封装工作流 - 发布并使用模块
  33. 封装工作流 - 总结
  34. FIS 的基本使用
  35. FIS 编译与压缩