前端工作流的工具链

参考书目《Web前端自动化构建》，主要是想理清前端工作流程、工具的使用和关系

编程之外、但在日常工作流中开发者又无法避免的任务，我们把这些任务分成三类，然后用三种工具来解决它们：

• 构建系统 比如Gulp，只需要按一下按钮，它就能处理大量文件的更改。
• 依赖管理 比如Bower，它能管理常用的类库的版本信息，提醒开发者类库之间的冲突，甚至有时候自己就能把冲突解决了。
• 脚手架工具 比如Yeoman，它能提供一个项目运行所需的基本文件。只需要在控制台输入一行命令，就能用Yeoman创建一个全新的应用或模块。

脚手架工具（Yeoman）创建项目目录和结构，然后再是用依赖管理工具（Bower或npm）和构建工具（Grunt或Gulp或Webpack）。它们之间的关系就是这样。

1.开发工作流程：

• 初始化：初始化阶段的任务都是关于创建的，比如目录结构、模板代码、第三方库之类的
  • 搭建项目框架
  • 套用模板代码
  • 安装第三方软件/第三方库
• 开发：在开发阶段你大部分时间都在运行代码编译工具，比如LESS和CoffeeScript，然后刷新浏览器查看结果。你主要实在这个阶段开发应用。
  • 运行代码编译工具
  • 检查代码质量
  • 运行开发服务器
• 部署：部署阶段的任务都是繁重的计算和转换。你要运行代码编译工具、测试代码、删除开发时的调试代码，并且把所有东西打包程一个可以部署的应用。
  • 运行代码编译工具
  • 压缩和混淆代码
  • 打包JavaScript和CSS
  • 运行单元和验收测试
  • 上传文件和应用
  • 删除调试代码
  • 检查代码质量
  • 优化图片

2.JavaScript工具和新的工作流：

针对上面的每阶段的复杂流程，我们希望一个命令就可以依次实现，所以出现了脚手架工具、依赖管理工具和构建工具。

最后会产生三类代码：套用代码（模板代码）、依赖代码（库、依赖）和预处理代码（自己写的JavaScript、CSS、HTML）。这三种类型的代码分别对应三种工具：脚手架工具、依赖工具和构建工具。

3.脚手架工具/依赖管理工具/构建工具：

脚手架工具：模板代码

脚手架工具专门用来处理模板代码。它能初始化模板代码，并且快速启动应用。它还能创建目录结构，并且往现有项目里加入新模块，也就是说它能完成两个初始化阶段的任务。另外，脚手架工具还能为安装构建工具和依赖管理工具打下必要的基础。

依赖管理工具：依赖代码

依赖说白了就是类库。依赖管理工具用来处理独立的库或者包。使用者不会触及其内部逻辑，而只是把它们添加到自己的项目里。

依赖管理工具还会处理包之间的依赖。例如，如果开发者想要安装一个模块，但是这个模块不满足现有模块的需求，那么依赖管理工具就会自动更新旧的依赖，或者至少提示开发者由依赖需要更新。

构建工具：预处理代码

预处理代码是开发者自己写的需要处理或转换的代码。

构建工具专门用来应对所有的文件处理工具，把源码转换成可以部署的代码。检查代码、编译、打包，这些任务构建工具也都能够处理。

构建工具的配置一般保存在构建配置文件（build file）里，这些文件很容易修改和扩展。

除此之外，构建工具还能把已安装的依赖添加到现存的项目中。

开发者要做的就是控制这三个工具。首先，用脚手架工具（Yeoman）搭建项目，然后用依赖管理工具（Bower）来搜索、安装依赖，接着用构建工具（Gulp）来处理文件。

Yeoman作为一个脚手架工具，可以初始化Gulp（构建配置文件）和Bower（项目基本依赖）。Gulp还可以使用Bower所提供的信息把依赖添加到项目的主要文件中。（注：Grunt被gulp取代，Bower被npm打败。）

项目本身是这三个工具的核心。开发者通过工具的接口把工具整合到项目中。开发者通过脚手架工具来创建新应用的基础架构，通过依赖管理工具搜索和添加依赖，通过构建工具运行一条命令把源代码和前两个工具创建的代码集成到项目里。这样依赖就能用三个简单的接口来封装这些复杂的任务，让工具来处理最复杂的工作。

4.Yeoman：

脚手架工具可以创建一个项目必需的目录，并且把初始文件（比如构建文件）、模板代码复制进去，最后安装依赖。

整个开发过程中，脚手架工具的定位时创建项目的基础架构。但是它做的事又不仅仅是把文件从一个地方复制到另一个地方。它还可以根据用户输入的参数而修改文件。参数可以是项目或者模板的名称，也可以控制是否要引入模块（比如jQuery）。

Yeoman会从generator接受定义好的模板，然后根据用户输入的参数，对模板进行一些修改。修改好的模板可以被添加到现有项目中，也可以用来创建一个全新项目。

generator是可以被命令行工具yo执行的JavaScript应用，它所做的事情只不过是创建新目录和复制文件。不过，它也没有那么简单。它还可以监听参数来修改文件。generator一般由一个目录构成。目录中是模板文件，这些模板会被generator的代码所修改。

Yeoman的唯一任务就是运行generator。generator知道应该把文件复制到哪里。generator有一个简单的安装提示的API，从而可以接受用户输入的参数并修改输出的结果。

Yeoman用起来很简单。你安装完一个generator以后，就可以在命令行里用yo命令来调用它。你可以直接通过yo generator-name命令来执行一个generator，例如yo angular启动Yeoman的命令。

5.Bower:

Bower的依赖树是扁平的，实践表明，扁平的依赖树的结构是最适合Web应用的，因为你不会（至少你不需要）安装两个同样的包。

在依赖树中，jQuery是Bootstrap的一个子节点。如果你安装了另一个依赖jQuery的组件，你有两个选择：

• 再次下载jQuery，然后把jQuery作为这个新的组件的子节点
• 把这个新组件引用的jQuery指向已经安装的jQuery（Bower就是采取这种扁平方式）

深依赖树可以确保安装的依赖完美兼容组件，依赖的API就是组件需要的API。但是每次都重新安装依赖，会导致重复安装。另一个选择，扁平依赖树则可以确保每个依赖只会安装一次，整个项目里每个组件只有一个，但是这可能会导致依赖之间的版本冲突。

如果安装依赖的时候出现了冲突，它会警告开发者，此时开发者可以采取下面这些选择：

• 取消安装
• 用新的依赖覆盖旧的
• 仍然使用旧的依赖

有了Bower，你就可以用工具来管理所有的第三方模块和组件了。

6.Gulp：

构建系统是整个工具链的核心。它会处理所有的源文件，把它们变成可以部署的代码。它还可以检查代码质量，自动执行重复的操作。

构建工具首先会读取一个构建配置（或构建文件）【这个配置可能就是脚手架定义出的】，然后定义三个东西：源文件、处理流程和输出文件的目录。

Gulp作为一个构建工具，可以调用其他工具来把源代码转换成可部署的文件，构建的命令都保存在构建文件中。Gulp工作的流程是：接受输入的文件，对它们执行不同的命令（或工具），然后把结果保存在新目录中。

Gulp示例：

gulp.task('scripts',function(){		//定义你的task，并且把它命名为script
  return gulp.src('src/**/*.js')			//选择所有src目录中的JavaScript文件
  	.pipe(concat('bundle.js'))			//合并成一个文件
  	.pipe(uglify())							//执行压缩步骤
  	.pipe(gulp.dest('dest'))				//保存结果
})