Web前端自动化构建（一）——现代前端工具流的工具链

写在前面的话：
最近开始学习Web前端自动化构建，为加深学习效果，整理笔记，作为博客发出。

---

全名：《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》
作者：Stefan Banumgartner【奥】
译者：谈博文

第一章 现代前端工作流的工具链

---

• 脚手架工具 Yeoman： 创建应用
• 依赖管理工具 Bower： 下载依赖
• 构建工具 Gulp： 执行代码编译

前端开发工作流

前端开发主要分三个阶段，初始化、开发、部署，每个阶段都有不同的任务。
1. 初始化阶段：

   - 搭建项目框架
   - 套用模板代码
   - 安装第三方软件

2. 开发阶段：

   - 运行代码编译工具
   - 检查代码质量
   - 运行开发服务器

3. 部署阶段：

   - 运行代码编译工具
   - 压缩和混淆代码
   - 打包js和CSS
   - 运行单元测试和验收测试
   - 上传应用文件
   - 删除调试代码
   - 检查代码质量
   - 优化图片

用Yeoman搭建脚手架

    脚手架工具可以创建一个项目必须的目录，并把初始文件（如构建代码）、模板代码复制进去，最后安装依赖。
    Yeoman会从generator接受定义好的模板，然后根据用户输入的参数，对模板进行一些修改。修改好的模板可以被添加到现有项目中，也可以用来创建一个全新项目。（如 Angular中的generator）

依赖管理工具Bower

依赖管理工具的主要功能是在社区和公司的仓库中搜索依赖，并且下载到本地的项目中。
    Bower是为Web而生的包管理器。由Twitter开发，专门用来从网上安装框架、库和其他模块。只要一个模块是由Git托管的，并且拥有bower.json文件，就可以用Bower来安装。
优点：Bower的依赖树是扁平的。

Gulp流式构建系统

    构建工具首先会读取一个构建配置（或者构建文件），然后定义源文件、处理流程和输出文件的目录。源代码经过处理后，最后会被输出到目录中。
    Gulp是整个项目的核心。Gulp作为构建工具，可以调用其他工具来把源代码转化成可部署的文件，构建的命令都保存在构建文件中。Gulp的工作流程是：接受输入的文件，对它们执行不同的命令（或工具），然后把结果保存在新目录中。