本書非常適合前端構(gòu)建的初學者入門,所介紹的Gulp、Bower、Yeoman都是業(yè)內(nèi)流行且易于上手的工具。而本書的目的并不僅僅是介紹工具的用法,還對前端構(gòu)建整體的概念和思路進行了梳理。即使未來出現(xiàn)了更先進、更時髦的工具,總體的思路依然萬變不離其宗,本書也不會因此而過時。
前 言?Preface本書重點關(guān)注的是廣義的開發(fā)工作流,涵蓋了開發(fā)者開發(fā)和維護項目時將會面臨的三個階段,分別是初始化、開發(fā)和部署。對于每個階段,本書都詳細解釋了這一階段的需求和概念,并且介紹了一個合適的工具來實現(xiàn)這些需求。
在現(xiàn)代Web開發(fā)中,新的工具層出不窮,但是壽命往往都很短。我寫本書花了超過一年的時間,這在JavaScript界可能相當于過了十年。工具日新月異的變化對寫書提出了巨大的挑戰(zhàn),但同時也提醒了我不要過于關(guān)注工具本身。因此,本書介紹的每個技術(shù)都可以輕松地替換為另一種合適的工具,而不會影響關(guān)鍵的概念。另一方面,本書挑選工具的標準不是工具的流行程度,而是工具的可維護性(sustainability)。本書介紹的工具都被廣泛使用,且具有一定的用戶基礎(chǔ)和寬廣的應用空間。正是因為這些特點,本書在幾年后依然會有參考價值。
目標讀者本書的目標讀者是想要在日常工作流中添加自動化流程和工具鏈的開發(fā)者。本書建立的工作流模板既適合初學者,也適合有經(jīng)驗的開發(fā)者。盡管市面上已經(jīng)有了許多教程和博文來介紹這些工具,但大都只是單獨介紹其中的某一個。而本書則把所有這些工具融合到一個工作流中,絕不僅僅只是介紹工具用法這些表面知識而已。
本書大綱本書分為兩部分,每一部分包括五章。
第一部分介紹一套全新前端開發(fā)工作流和相關(guān)的工具,不僅描述了如何用三個專門的工具來搭建一個工作流,還介紹了前端開發(fā)工作流的一些總體構(gòu)想。建議按照順序來讀這一部分。
第1章展現(xiàn)了前端開發(fā)者日常面臨的挑戰(zhàn),并且介紹了如何用三種類型的工具建立工作流以克服這些挑戰(zhàn)。
第2章介紹了第一種工具,也就是構(gòu)建工具。它提供了抽象接口來自動化處理底層代碼的任務(task)。這一章的內(nèi)容主要基于Gulp。
第3章介紹依賴(dependency)和執(zhí)行鏈(execution chain)。這一章會結(jié)合上一章的任務,把它們添加到一系列的執(zhí)行中,以此來建立一個本地的開發(fā)環(huán)境。
第4章引入依賴管理的概念。這一章會介紹對于前端開發(fā)而言,扁平依賴樹和嵌套依賴樹之間的區(qū)別和優(yōu)劣。這一章選擇Bower作為依賴管理的工具。
第5章是前端工作流的最后一步。這一章會介紹如何通過腳手架工具Yeoman,來復用第2章到第4章中搭建好的流程。
讀完第一部分,讀者就能夠運用上述的三種工具來改進工作流,以適應自己的需求了。所有介紹的工具都使用Node.js作為運行時。剛剛接觸Node.js的開發(fā)者可以參考附錄來大致了解一下。
第一部分中介紹的Gulp、Bower和Yeoman都可以輕松地替換為其他工具。不過,第二部分就會深入探討這三個工具的內(nèi)在工作原理。其中每一章都可以提高工作流的效率,還會說明這些工具的獨特和有用之處。
第6章會介紹如何利用Gulp的特性,包括增量編譯(incremental build)和管道開關(guān)(pipeline switch),來改變Gulp在不同開發(fā)環(huán)境中的輸出結(jié)果。
第7章深入解釋了Gulp的底層技術(shù)文件對象流(file object stream)。使用這一技術(shù)可以在不同的輸入/輸出場景中復用相似的管道。
第8章介紹了Gulp的插件生態(tài)系統(tǒng),并且告訴讀者在選擇新插件作為構(gòu)建管道(build pineline)時,如何避免冗余的或者質(zhì)量不好的插件。此外還介紹了如何通過Gulp的task和streaming API來集成插件以外的工具。
第9章又回過來講依賴管理。這一章介紹了模塊(module)的概念,并且展示幾個不同的模塊規(guī)范之間的差異,模塊能讓我們更輕松地把依賴集成到應用中。
第10章以腳手架工具(scaffolding tool)Yeoman來結(jié)束全書。在Yeoman sub-generator的幫助下,項目的腳手架不僅在項目初期十分有用,并且會貫穿整個項目的始終。
第二部分的目的是讓讀者精通這些工具。盡管這些工具的示例都是有聯(lián)系的,但讀者也可以跳著閱讀分別來了解它們的概念和細節(jié)。
代碼格式和下載本書包含了很多示例的源代碼,有時會加粗代碼,來凸顯和前幾章代碼的不同之處,比如向代碼中加入新功能。
大多數(shù)情況下,原始的源代碼都被格式化過。本書在代碼中加入了換行和縮進來適應本書的版面。在極端情況下,偶爾還會使用續(xù)行符(line-continuation marker)。另外,當源代碼在正文中出現(xiàn)時,會移除源代碼中的注釋。包含重要概念的代碼會附上注釋。
本書中示例的源代碼可以在出版社的網(wǎng)站www.manning.com/books/front-end-tooling-with-gulp-bower-and- yeoman上下載。
本書中的示例也可以從GitHub網(wǎng)站https://github.com/frontend-tooling上下載。項目sample-project-gulp中的分支中包含了每一章的解決方案。
網(wǎng)上資源StackOverflow上的Gulp.js標簽(http://stackoverflow.com/questions/tagged/gulp)里有很多問題和回答。上面的網(wǎng)友都非常友好而且見多識廣,能夠很好地回答一些特殊的問題。
Yeoman網(wǎng)站(http://yeoman.io)不僅包含Yeoman自己的資源,也提供了關(guān)于其他工具的豐富的教程資源。
作者的博客上也有很多Gulp和Yeoman的
Stefan Baumgartner是一個充滿激情的網(wǎng)頁開發(fā)者和演講家,他在自己的家鄉(xiāng)組織了技術(shù)會議。他的研究領(lǐng)域包括網(wǎng)絡性能、自動化、體系結(jié)構(gòu)和漸進增強。
目 錄?Contents
譯者序
自 序
前 言
致 謝
關(guān)于原書封面插圖
第一部分 現(xiàn)代Web應用工作流
第1章現(xiàn)代前端工作流的工具鏈 3
1.1軟件開發(fā)者的工作流和任務清單 4
1.1.1 初始化階段的任務 6
1.1.2 開發(fā)階段的任務 6
1.1.3 部署階段的任務 7
1.1.4 人為因素 8
1.2 JavaScript工具和新的工作流 9
1.2.1 三類代碼及其工具 10
1.2.2Node.js中的JavaScript工具 12
1.3 用Yeoman搭建腳手架 13
1.3.1Yeoman作為腳手架工具的優(yōu)點 14
1.3.2 什么是generator 14
1.4 依賴管理工具Bower 15
1.4.1 Bower的優(yōu)點 16
1.4.2 Bower的依賴樹 17
1.5 Gulp流式構(gòu)建系統(tǒng) 18
1.5.1 Gulp的優(yōu)點 18
1.5.2 構(gòu)建管道 19
1.6 總結(jié) 21
第2章 Gulp入門 22
2.1 配置Gulp 23
2.1.1 Gulp的構(gòu)建塊 23
2.1.2 Gulp命令行接口 25
2.1.3 安裝本地Gulp 26
2.2 創(chuàng)建Gulpf?ile 28
2.2.1Gulp的Hello Worldtask 28
2.2.2 流的使用 31
2.2.3Gulp中的可讀流和可寫流 32
2.3 使用Gulp插件處理task 34
2.3.1 轉(zhuǎn)換數(shù)據(jù) 34
2.3.2 改變文件結(jié)構(gòu) 35
2.3.3 鏈式調(diào)用插件 37
2.4 總結(jié) 39
第3章用Gulp配置本地開發(fā)環(huán)境 41
3.1 本地開發(fā)環(huán)境 42
3.1.1 給task分類 43
3.1.2 重置步驟:clean task 43
3.1.3 構(gòu)建和迭代 45
3.2 初次構(gòu)建步驟 45
3.2.1 依賴鏈和執(zhí)行鏈 46
3.2.2 順序和并行執(zhí)行task 47
3.2.3 依賴鏈的task執(zhí)行函數(shù) 48
3.2.4 更新Gulpfile 49
3.3 迭代步驟 52
3.3.1 監(jiān)控過程 52
3.3.2使用Browsersync建立按需實時重載的服務器 53
3.3.3 更新Gulpfile 55
3.4 總結(jié) 57
第4章 Bower依賴管理 59
4.1 依賴管理基礎(chǔ) 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構(gòu)建流程中 72
4.4 總結(jié) 74
第5章 腳手架工具Yeoman 75
5.1 Yeoman generator 76
5.1.1 generator的構(gòu)成 78
5.1.2 調(diào)用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 創(chuàng)建一個generator 89
5.4.1 準備項目模板 90
5.4.2 創(chuàng)建組裝指令 92
5.4.3 構(gòu)建和測試 93
5.5 總結(jié) 94
第二部分 工具鏈的集成和擴展
第6章 不同環(huán)境下的Gulp 97
6.1 增量構(gòu)建和構(gòu)建緩存 99
6.1.1 Gulp內(nèi)置功能 99
6.1.2 安裝構(gòu)建緩存 101
6.1.3 處理被刪除的文件 104
6.2通過sourcemap來調(diào)試源文件 105
6.2.1 什么是sourcemap 107
6.2.2 Gulp內(nèi)置的sourcemap 108
6.2.3 sourcemap插件 109
6.3 切換環(huán)境 111
6.3.1 noop() 111
6.3.2 dev()和prod()選擇函數(shù) 113
6.3.3 傳遞命令行參數(shù) 115
6.4 總結(jié) 116
第7章 使用流 117
7.1 處理不同類型的輸入 119
7.1.1 穿插流 119
7.1.2 合并流 121
7.2 處理不同的輸出 123
7.2.1在task中根據(jù)參數(shù)創(chuàng)建流 123
7.2.2 流數(shù)組 126
7.3 其他關(guān)于流的使用技巧 128
7.3.1使用snippet來避免重復代碼 129
7.3.2 使用流隊列來管理順序 130
7.3.3通過Gulp f?ilter來修改流的內(nèi)容 131
7.4 總結(jié) 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 轉(zhuǎn)換內(nèi)容 145
8.3 集成基于Promise的工具 146
8.3.1 Promise的用法 147
8.3.2在Gulp task系統(tǒng)中使用Promise 149
8.4 總結(jié) 151
第9章 創(chuàng)建模塊和Bower組件 153
9.1 異步模塊規(guī)范 155
9.1.1AMD為瀏覽器設計的模塊定義規(guī)范 155
9.1.2 重構(gòu)到AMD 158
9.2CommonJS和通用模塊規(guī)范 160
9.2.1 CommonJS模塊 160
9.2.2 通用模塊規(guī)范 161
9.3 定義和部署B(yǎng)ower組件 163
9.3.1 Bower.json說明 164
9.3.2 部署和發(fā)布組件 166
9.3.3 私有項目倉庫和組件 167
9.4 總結(jié) 169
第10章Yeoman generator進階 171
10.1 向現(xiàn)有項目中添加新文件 172
10.1.1 sub-generator的概念 172
10.1.2sub-generator的組裝指令 174
10.2 改進接口 176
10.2.1 修改現(xiàn)有的文件 177
10.2.2 處理用戶的配置 178
10.3 組合generator 181
10.3.1全局的generator的組合 181
10.3.2依賴和generator的組合 184
10.4 總結(jié) 186
附錄A Node.js導論 187