本書非常適合前端構建的初學者入門,所介紹的Gulp、Bower、Yeoman都是業內流行且易于上手的工具。而本書的目的并不僅僅是介紹工具的用法,還對前端構建整體的概念和思路進行了梳理。即使未來出現了更先進、更時髦的工具,總體的思路依然萬變不離其宗,本書也不會因此而過時。
前 言?Preface本書重點關注的是廣義的開發工作流,涵蓋了開發者開發和維護項目時將會面臨的三個階段,分別是初始化、開發和部署。對于每個階段,本書都詳細解釋了這一階段的需求和概念,并且介紹了一個合適的工具來實現這些需求。
在現代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的
Stefan Baumgartner是一個充滿激情的網頁開發者和演講家,他在自己的家鄉組織了技術會議。他的研究領域包括網絡性能、自動化、體系結構和漸進增強。
目 錄?Contents
譯者序
自 序
前 言
致 謝
關于原書封面插圖
第一部分 現代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.2Node.js中的JavaScript工具 12
1.3 用Yeoman搭建腳手架 13
1.3.1Yeoman作為腳手架工具的優點 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.1Gulp的Hello Worldtask 28
2.2.2 流的使用 31
2.2.3Gulp中的可讀流和可寫流 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.1AMD為瀏覽器設計的模塊定義規范 155
9.1.2 重構到AMD 158
9.2CommonJS和通用模塊規范 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.2sub-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