本书非常适合前端构建的初学者入门，所介绍的Gulp、Bower、Yeoman都是业内流行且易于上手的工具。而本书的目的并不仅仅是介绍工具的用法，还对前端构建整体的概念和思路进行了梳理。即使未来出现了更先进、更时髦的工具，总体的思路依然万变不离其宗，本书也不会因此而过时。

唯一一本完整涵盖前端工具的书。
　　　　　　　　　　　　　　　　　　　　　　　　　　　——Palak Mathur，Capital One
提供了快速从新手到专家的所有信息。
　　　　　　　　　　　　　　　　　　 ——Jason Gretz，Auto-Owners Insurance
本书包括了你所需要的所有前端开发工具。
　　　　　　　　　　　　　　 ——Unnikrishnan Kumar，Thomson Reuters
本书是目前最易懂、最实战的构建前端应用的指南。
　　　　　　　　　　　　　　 ——Nick A. Watts，American Chemical Society
在大型Web项目的开发中，工作流决定了生产力。Gulp、Bower和Yeoman可以把从开发到构建再到部署的整个工作流自动化，这些强大的工具结合所形成的构建系统可以大大缩短Web应用的发布周期。
本书教你如何搭建自动的开发工作流。首先你会形成一个对开发过程的整体认识。然后，本书会通过例子深入指导你如何用Gulp、Bower和Yeoman构建一个产品发布流程。读完本书后，你将深入理解Web开发流程，并掌握用最优秀的工具开发强大、自定义的工作流的能力。

本书重点关注的是广义的开发工作流，涵盖了开发者开发和维护项目时将会面临的三个阶段，分别是初始化、开发和部署。对于每个阶段，本书都详细解释了这一阶段的需求和概念，并且介绍了一个合适的工具来实现这些需求。
在现代Web开发中，新的工具层出不穷，但是寿命往往都很短。我写本书花了超过一年的时间，这在JavaScript界可能相当于过了十年。工具日新月异的变化对写书提出了巨大的挑战，但同时也提醒了我不要过于关注工具本身。因此，本书介绍的每个技术都可以轻松地替换为另一种合适的工具，而不会影响关键的概念。另一方面，本书挑选工具的标准不是工具的流行程度，而是工具的可维护性（sustainability）。本书介绍的工具都被广泛使用，且具有一定的用户基础和宽广的应用空间。正是因为这些特点，本书在几年后依然会有参考价值。
目标读者
本书的目标读者是想要在日常工作流中添加自动化流程和工具链的开发者。本书建立的工作流模板既适合初学者，也适合有经验的开发者。尽管市面上已经有了许多教程和博文来介绍这些工具，但大都只是单独介绍其中的某一个。而本书则把所有这些工具融合到一个工作流中，绝不仅仅只是介绍工具用法这些表面知识而已。
本书大纲
本书分为两部分，每一部分包括五章。
第一部分介绍一套全新前端开发工作流和相关的工具，不仅描述了如何用三个专门的工具来搭建一个工作流，还介绍了前端开发工作流的一些总体构想。建议按照顺序来读这一部分。
第1章展现了前端开发者日常面临的挑战，并且介绍了如何用三种类型的工具建立工作流以克服这些挑战。
第2章介绍了第一种工具，也就是构建工具。它提供了抽象接口来自动化处理底层代码的任务（task）。这一章的内容主要基于Gulp。
第3章介绍依赖（dependency）和执行链（execution chain）。这一章会结合上一章的任务，把它们添加到一系列的执行中，以此来建立一个本地的开发环境。
第4章引入依赖管理的概念。这一章会介绍对于前端开发而言，扁平依赖树和嵌套依赖树之间的区别和优劣。这一章选择Bower作为依赖管理的工具。
第5章是前端工作流的最后一步。这一章会介绍如何通过脚手架工具Yeoman，来复用第2章到第4章中搭建好的流程。
读完第一部分，读者就能够运用上述的三种工具来改进工作流，以适应自己的需求了。所有介绍的工具都使用Node.js作为运行时。刚刚接触Node.js的开发者可以参考附录来大致了解一下。
第一部分中介绍的Gulp、Bower和Yeoman都可以轻松地替换为其他工具。不过，第二部分就会深入探讨这三个工具的内在工作原理。其中每一章都可以提高工作流的效率，还会说明这些工具的独特和有用之处。
第6章会介绍如何利用Gulp的特性，包括增量编译（incremental build）和管道开关（pipeline switch），来改变Gulp在不同开发环境中的输出结果。
第7章深入解释了Gulp的底层技术——文件对象流（file object stream）。使用这一技术可以在不同的输入/输出场景中复用相似的管道。
第8章介绍了Gulp的插件生态系统，并且告诉读者在选择新插件作为构建管道（build pineline）时，如何避免冗余的或者质量不好的插件。此外还介绍了如何通过Gulp的task和streaming API来集成插件以外的工具。
第9章又回过来讲依赖管理。这一章介绍了模块（module）的概念，并且展示几个不同的模块规范之间的差异，模块能让我们更轻松地把依赖集成到应用中。
第10章以脚手架工具（scaffolding tool）Yeoman来结束全书。在Yeoman sub-generator的帮助下，项目的脚手架不仅在项目初期十分有用，并且会贯穿整个项目的始终。
第二部分的目的是让读者精通这些工具。尽管这些工具的示例都是有联系的，但读者也可以跳着阅读分别来了解它们的概念和细节。
代码格式和下载
本书包含了很多示例的源代码，有时会加粗代码，来凸显和前几章代码的不同之处，比如向代码中加入新功能。
大多数情况下，原始的源代码都被格式化过。本书在代码中加入了换行和缩进来适应本书的版面。在极端情况下，偶尔还会使用续行符（line-continuation marker）。另外，当源代码在正文中出现时，会移除源代码中的注释。包含重要概念的代码会附上注释。
本书中示例的源代码可以在出版社的网站www.manning.com/books/front-end-tooling-
with-gulp-bower-and- yeoman上下载。
本书中的示例也可以从GitHub网站https://github.com/frontend-tooling上下载。项目“sample-project-gulp”中的分支中包含了每一章的解决方案。
网上资源
StackOverflow上的Gulp.js标签（http://stackoverflow.com/questions/tagged/gulp）里有很多问题和回答。上面的网友都非常友好而且见多识广，能够很好地回答一些特殊的问题。
Yeoman网站（http://yeoman.io）不仅包含Yeoman自己的资源，也提供了关于其他工具的丰富的教程资源。
作者的博客上也有很多Gulp和Yeoman的教程：https://fettblog.eu。这些文章更加简明扼要，解决的都是更为具体的问题。

程序设计/Web开发

唯一一本完整涵盖前端工具的书。
——Palak Mathur，Capital One
提供了快速从新手到专家的所有信息。
——Jason Gretz，Auto-Owners Insurance
本书包括了你所需要的所有前端开发工具。
——Unnikrishnan Kumar，Thomson Reuters
本书是目前最易懂、最实战的构建前端应用的指南。
——Nick A. Watts，American Chemical Society

在大型Web项目的开发中，工作流决定了生产力。Gulp、Bower和Yeoman可以把从开发到构建再到部署的整个工作流自动化，这些强大的工具结合所形成的构建系统可以大大缩短Web应用的发布周期。

本书教你如何搭建自动的开发工作流。首先你会形成一个对开发过程的整体的认识。然后，本书会通过例子来深入指导你如何用Gulp、Bower和Yeoman来构建一个产品发布流程。读完本书后，你就能形成对Web开发流程的深入理解，并且掌握用最优秀的工具开发强大、自定义的工作流的能力。

遥想当年用jQuery刀耕火种的时代，如今的前端开发者幸福太多了。从UI组件到前端框架，从语法糖到预处理语言，前端生态圈的变化可谓是日新月异。但是别看现在的开发者熟稔React、Vue、ES6/ES7等技术，假如让他从零开始开发一个项目，他可能就无从下手、不知所措了。
原因就在于，现在的前端项目的构建太复杂了。先不论前端框架，ES6这么流行，不上个babel简直说不过去。还有CSS，暂且不说PostCSS，Sass总得来一个吧。等到要上生产环境，合并、混淆也是必不可少的……搭建一个现代Web应用所需要的工具太多了，实在列举不完。这其中步骤之复杂、细节之烦琐，每一个搭建过前端构建流程的朋友肯定都深有体会。
对于初学者而言，前端工具更是难以入门。绝大部分开发者一般都没有机会参与搭建构建流程的环节。而且一般只有在项目初始阶段才需要搭建流程，之后就不会再去修改它。等到开始下一个项目时，构建工具又已经发生了翻天覆地的变化。这就导致了前端构建方面的知识难以积累和沉淀。
本书就非常适合前端构建的初学者。本书所介绍的Gulp、Bower和Yeoman都是业内流行且易于上手的工具。而且本书的目的并不仅仅是介绍工具的用法，还对前端构建整体的概念和思路进行了梳理。即使未来出现了更先进、更时髦的工具，总体的思路依然万变不离其宗，本书也不会因此而过时。
译者在翻译的时候力求用词准确、行文流畅，但也难免有所纰漏，恳请广大读者来信批评指正（tanbowensg@gmail.com）。

译者序
自　序
前　言
致　谢
关于原书封面插图
第一部分　现代Web应用工作流
第1章 现代前端工作流的工具链　3
1.1 软件开发者的工作流和任务清单　4
1.1.1　初始化阶段的任务　6
1.1.2　开发阶段的任务　6
1.1.3　部署阶段的任务　7
1.1.4　人为因素　8
1.2　JavaScript工具和新的工作流　9
1.2.1　三类代码及其工具　10
1.2.2 Node.js中的JavaScript工具　12
1.3　用Yeoman搭建脚手架　13
1.3.1 Yeoman作为脚手架工具的优点　14
1.3.2　什么是generator　14
1.4　依赖管理工具Bower　15
1.4.1　Bower的优点　16
1.4.2　Bower的依赖树　17
1.5　Gulp流式构建系统　18
1.5.1　Gulp的优点　18
1.5.2　构建管道　19
1.6　总结　21
第2章　Gulp入门　22
2.1　配置Gulp　23
2.1.1　Gulp的构建块　23
2.1.2　Gulp命令行接口　25
2.1.3　安装本地Gulp　26
2.2　创建Gulpf ile　28
2.2.1 Gulp的“Hello World”task　28
2.2.2　流的使用　31
2.2.3 Gulp中的可读流和可写流　32
2.3　使用Gulp插件处理task　34
2.3.1　转换数据　34
2.3.2　改变文件结构　35
2.3.3　链式调用插件　37
2.4　总结　39
第3章 用Gulp配置本地开发环境　41
3.1　本地开发环境　42
3.1.1　给task分类　43
3.1.2　重置步骤：clean task　43
3.1.3　构建和迭代　45
3.2　初次构建步骤　45
3.2.1　依赖链和执行链　46
3.2.2　顺序和并行执行task　47
3.2.3　依赖链的task执行函数　48
3.2.4　更新Gulpfile　49
3.3　迭代步骤　52
3.3.1　监控过程　52
3.3.2 使用Browsersync建立按需实时重载的服务器　53
3.3.3　更新Gulpfile　55
3.4　总结　57
第4章　Bower依赖管理　59
4.1　依赖管理基础　61
4.1.1　组件和依赖　61
4.1.2　依赖树　62
4.2　Bower的扁平依赖树管理　64
4.2.1　安装和更新组件　65
4.2.2　安装有依赖的组件　66
4.2.3　解决依赖冲突　68
4.3　集成Gulp　69
4.3.1 用Gulp把依赖集成到应用中　70
4.3.2 将依赖集成到Gulp构建流程中　72
4.4　总结　74
第5章　脚手架工具Yeoman　75
5.1　Yeoman generator　76
5.1.1　generator的构成　78
5.1.2　调用generator　79
5.2　项目模板　81
5.2.1　固定文件　81
5.2.2　灵活文件　83
5.2.3　可选文件　83
5.2.4　可恢复文件　84
5.3　Yeoman的组装流程　84
5.3.1　安装提示　85
5.3.2　写入文件　87
5.3.3　安装依赖　89
5.4　创建一个generator　89
5.4.1　准备项目模板　90
5.4.2　创建组装指令　92
5.4.3　构建和测试　93
5.5　总结　94
第二部分　工具链的集成和扩展
第6章　不同环境下的Gulp　97
6.1　增量构建和构建缓存　99
6.1.1　Gulp内置功能　99
6.1.2　安装构建缓存　101
6.1.3　处理被删除的文件　104
6.2 通过sourcemap来调试源文件　105
6.2.1　什么是sourcemap　107
6.2.2　Gulp内置的sourcemap　108
6.2.3　sourcemap插件　109
6.3　切换环境　111
6.3.1　noop()　111
6.3.2　dev()和prod()选择函数　113
6.3.3　传递命令行参数　115
6.4　总结　116
第7章　使用流　117
7.1　处理不同类型的输入　119
7.1.1　穿插流　119
7.1.2　合并流　121
7.2　处理不同的输出　123
7.2.1 在task中根据参数创建流　123
7.2.2　流数组　126
7.3　其他关于流的使用技巧　128
7.3.1 使用snippet来避免重复代码　129
7.3.2　使用流队列来管理顺序　130
7.3.3 通过Gulp f ilter来修改流的内容　131
7.4　总结　133
第8章　扩展Gulp　134
8.1　Gulp插件黑名单　135
8.1.1 理由：不是一个Gulp插件　136
8.1.2 理由：可以用别的东西替代　137
8.1.3　理由：做的事情太多　138
8.2　集成其他基于流的工具　139
8.2.1 流、缓冲和Vinyl文件对象　139
8.2.2　集成Browserify　142
8.2.3　转换内容　145
8.3　集成基于Promise的工具　146
8.3.1　Promise的用法　147
8.3.2 在Gulp task系统中使用Promise　149
8.4　总结　151
第9章　创建模块和Bower组件　153
9.1　异步模块规范　155
9.1.1 AMD——为浏览器设计的模块定义规范　155
9.1.2　重构到AMD　158
9.2 CommonJS和通用模块规范　160
9.2.1　CommonJS模块　160
9.2.2　通用模块规范　161
9.3　定义和部署Bower组件　163
9.3.1　Bower.json说明　164
9.3.2　部署和发布组件　166
9.3.3　私有项目仓库和组件　167
9.4　总结　169
第10章 Yeoman generator进阶　171
10.1　向现有项目中添加新文件　172
10.1.1　sub-generator的概念　172
10.1.2 sub-generator的组装指令　174
10.2　改进接口　176
10.2.1　修改现有的文件　177
10.2.2　处理用户的配置　178
10.3　组合generator　181
10.3.1 全局的generator的组合　181
10.3.2 依赖和generator的组合　184
10.4　总结　186
附录A　Node.js导论　187