返回導(dǎo)航

現(xiàn)在你應(yīng)該已經(jīng)創(chuàng)建完成種子項(xiàng)目，現(xiàn)在我們來看看，這個(gè)項(xiàng)目中包含了什么。

Yeoman 工具流

我非常榮幸的使用了 Yeoman 工作流的形式。你可以通過 gulp來喚起你的技術(shù)棧。

serve

開發(fā)階段中，使用 gulp serve 可以啟動(dòng)一個(gè)監(jiān)聽改變自動(dòng)刷新的服務(wù)器。

具體的使用方法可以參考 開發(fā)服務(wù)器 以及文件監(jiān)聽及預(yù)處理

test

測試階段中，腳手架提供了測試代碼的編寫模板，使用 Karma 編寫單元測試代碼，最后使用 gulp test 調(diào)起這些測試代碼，Protractor 使用相同邏輯，實(shí)現(xiàn)端到端測試。

具體使用方法可以參考 測試環(huán)境配置

build

在執(zhí)行 gulp build 或者其簡略寫法 gulp 能夠啟動(dòng)腳手架提供的優(yōu)雅的優(yōu)化程序，具體使用方法可以參考 優(yōu)化過程

inject

本腳手架在此處不止實(shí)現(xiàn)了 Yeoman 指導(dǎo)手冊(cè)中所述。而且將腳本和樣式以及依賴分門別類的注入到 HTML 文件中。
具體使用方法可以參考 文件注入

開發(fā)服務(wù)器

腳手架依托功能強(qiáng)大的 Browser Sync為代碼提供一個(gè)服務(wù)器環(huán)境。
建議使用本地源碼進(jìn)行 serve，這樣就能實(shí)現(xiàn)代碼的動(dòng)態(tài)監(jiān)聽和自動(dòng)重載。
如果有服務(wù)器遠(yuǎn)端代碼需要掛起，可以使用以下兩種方案

• 使用完整的 URL (但需要處理CORS跨域問題)
• 或者你可以使用服務(wù)器端提供的代理服務(wù)器跳板，這樣可以穿過跨域問題

掛起src 文件夾

默認(rèn)情況下，browser-sync 監(jiān)聽了 src 文件夾，至少包含了并未變化的文件。
對(duì)于需要預(yù)處理的文件（依賴于你選擇的預(yù)處理器情況，或許會(huì)是你的所有文件）此時(shí)，browser-sync 也會(huì)監(jiān)聽 .tmp/serve 文件夾
通過文件監(jiān)聽及預(yù)處理 過程產(chǎn)出的文件會(huì)自動(dòng)的放在 .tmp/serve 文件夾中，這個(gè)過程對(duì) browser-sync 是透明的。
如果兩個(gè)文件夾中有相同的文件，那會(huì)選擇 .tmp/serve 中的同名文件
最后，bower_components 中的外部依賴文件，將會(huì)使用相對(duì)于服務(wù)器根目錄的絕對(duì)地址來引用，bower_components作為地址的前綴。

自動(dòng)刷新

當(dāng)執(zhí)行 gulp serve時(shí)，會(huì)調(diào)起 browser-sync 并監(jiān)聽上述兩個(gè)文件夾。
當(dāng) gulp 監(jiān)聽到文件變更，會(huì)向 browser-sync 傳遞重啟命令。根據(jù)不同文件的修改，瀏覽器會(huì)選擇自動(dòng)刷新還是重繪頁面。

使用代理

最好還是使用本地文件，特殊情況可以參考 browser-sync 的文檔。
此時(shí)，你的應(yīng)用會(huì)同時(shí)請(qǐng)求前后端項(xiàng)目的代碼。
最簡單的方式是添加一個(gè)代理，默認(rèn)是沒有的，因?yàn)楹笈_(tái)配置靈活性比較大。但在 gulp/server.js文件中使用了注釋的方式添加了一段代碼 demo

server.middleware = proxyMiddleware('/users', 
  {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true}
);

使用實(shí)際參數(shù)替代上文中的配置，重啟服務(wù)后，即可獲取遠(yuǎn)端代碼。更多詳情參考
http-proxy-middleware

文件監(jiān)聽及預(yù)處理

如果你運(yùn)行在開發(fā)環(huán)境或者簡單執(zhí)行了 watch任務(wù)，gulp 會(huì)監(jiān)聽 src文件夾中的變動(dòng)。每次保存就能夠?qū)⒆儎?dòng)傳送到處理程序中。
所有的處理程序都會(huì)從 src 取得變更，并將處理結(jié)果推送到.tmp/serve文件夾。
** 腳手架并不提供 src文件夾中文件之間的相互監(jiān)聽。**
相同的輸入路徑會(huì)產(chǎn)生相同的輸出路徑。
腳手架中包含了四種處理：

• Injection (gulp/inject.js): 當(dāng)你向 src 文件中添加任何以.js 或 .css 為后綴的文件，或者當(dāng)你添加一個(gè)新的 bower 依賴時(shí)，處理器會(huì)重新進(jìn)行 index.html 文件的插入動(dòng)作，更多詳情參考 文件注入
• Scripts (gulp/scripts.js): 如果使用了JavaScript預(yù)處理器， 所有針對(duì)文件的修改和新增都會(huì)觸發(fā)這個(gè)任務(wù)，導(dǎo)致重新編譯。
• Styles (gulp/styles): 如果使用了CSS 預(yù)處理器， 所有針對(duì)文件的修改和新增都會(huì)觸發(fā)這個(gè)任務(wù)，導(dǎo)致重新編譯。
• Markups (gulp/markups): 如果使用了HTML 預(yù)處理器， 所有針對(duì)文件的修改和新增都會(huì)觸發(fā)這個(gè)任務(wù)，導(dǎo)致重新編譯。

** 注意 ** 腳手架中使用了 gulp3版本，其中包含一些限制，比如新建一個(gè)文件夾或者文件夾中新建一個(gè)文件都會(huì)導(dǎo)致 gulp監(jiān)聽失敗。此時(shí)需要手動(dòng)重啟服務(wù)。有些插件可以解決這個(gè)問題，但是我們更希望通過更新 gulp 的版本來解決，4中就解決了這個(gè)問題。

文件注入

打開 index.html 文件，你能看到其中并沒有script 和 link 標(biāo)簽，取而代之的是一堆注釋。
這些注釋是腳手架用于自動(dòng)注入腳本的。自動(dòng)注入的對(duì)象并不是 index.html 而是 .tmp/serve 中生成的新文件。
注入的文件有兩類，一類是第三方依賴，另一類是你的源碼。

bower 依賴

有個(gè)叫 Wiredep的第三方工具，可以列出正在使用的 bower 依賴并將其注入 index.html
你需要注意的是，需要注入的依賴應(yīng)該寫在 bower.json 文件，安裝在 bower_components 文件夾中，同時(shí)還要求他們自己也有 bower.json 文件。上邊三個(gè)條件任意一個(gè)不符合就不會(huì)被正確注入。這種情況發(fā)生時(shí)，就要手動(dòng)注入了

源碼

腳手架還可以自動(dòng)注入你的源碼，這種注入不會(huì)忽略 src 文件夾中的任何一個(gè)文件。
由于文件順序?qū)τ?JavaScript 執(zhí)行有印象，所以使用插件Angular FileSort 這個(gè)插件會(huì)根據(jù)模塊之間的依賴對(duì)代碼進(jìn)行排序。
對(duì)于 CSS，文件出現(xiàn)的順序雖不重要但也會(huì)有一定的影響，可惜沒有 CSS 預(yù)處理器排序插件。實(shí)際執(zhí)行時(shí)按照文件夾排序和文件夾內(nèi)文件名排序的方式進(jìn)行排序。

CSS 預(yù)處理器注入

使用 CSS 預(yù)處理器時(shí)，文件注入的方式有所不同，文件是注入在預(yù)處理器文件中，而非直接注入在 index.html中，注入完成后會(huì)統(tǒng)一注入。
由于這個(gè)緣故，注入處理不會(huì)執(zhí)行 inject 任務(wù)，而是直接運(yùn)行 style任務(wù)，你可以在全局樣式中找到 CSS 文件的插入點(diǎn)。
Bower支持 CSS預(yù)處理文件的引用，腳手架使用了這種方式，你可以在 CSS 文件中引用第三方依賴。

手動(dòng)注入

腳手架的注入工作涵蓋了大量的應(yīng)用場景，盡量保證編程過程和構(gòu)建過程之間透明。
不幸的是，很多情況并不能完全覆蓋，最常見的就是安裝了“不規(guī)范”的第三方插件，導(dǎo)致依賴不能正常打包。
你可以在 index.html中添加自定義的script 或者 link 來添加未能打包的依賴。關(guān)鍵是，這些應(yīng)該寫在什么位置。
index.html 文件中，你能找到兩種注釋。一種用于構(gòu)建，類似于 另一種用于注入 或者 ``. 后者多出現(xiàn)在前者包裹之中，如此設(shè)計(jì)是想著讓外層的構(gòu)建程序能夠?qū)ψ⑷氲拇a進(jìn)行操作和優(yōu)化。

** 手動(dòng)注入的關(guān)鍵就是把你的代碼放在構(gòu)建內(nèi)部，便于一并優(yōu)化，但需要放在注入外部，因?yàn)樽⑷霕?biāo)簽內(nèi)部的內(nèi)容會(huì)被覆蓋 **

例如:

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    
    <!--在這里引入第三方依賴 -->
    <link rel="stylesheet" href="../custom-theme/style.css">

    <!--這里是注入，不要往這里填寫文件-->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->

    <!-- endbuild -->

Note, that the custom-theme folder also needs to be added to gulp/server.js:browserSyncInit's list of routes. Otherwise, it won't be loaded via server.
** 注意 ** 自定義主題 custom-theme 文件夾也需要添加到gulp/server.js:browserSyncInit 文件中路由聲明中否則無法加載。

測試環(huán)境配置

腳手架提供了測試代碼運(yùn)行環(huán)境，讓你可以專心寫測試代碼。
根據(jù)最佳實(shí)踐，單元測試代碼會(huì)跟進(jìn)實(shí)現(xiàn)，需要使用后綴 *.spec.js 或者*.mock.js 來區(qū)分。
項(xiàng)目中生成的karma.conf.js 文件使用了與 gulp 腳本相同的配置項(xiàng)。文件注入中使用的邏輯與測試過程相同。
默認(rèn)使用 PhantomJS作為測試瀏覽器，而且已經(jīng)安裝在項(xiàng)目依賴中了，當(dāng)使用 Taceur作為預(yù)處理器時(shí)，他們之間有沖突，此時(shí)切換為 chrome.
測試框架選用了Jasmine，如果有替代選擇就更好了，可惜現(xiàn)在版本還沒有。
為了測試 HTML片段，尤其在實(shí)現(xiàn)指令的測試時(shí)，引入插件 karma-ng-html2js-preprocessor
完成測試。
除此之外，原則上盡量少的使用 Karma 相關(guān)的插件，因?yàn)檫@些插件的工作與 gulp 有重合，未來也在尋求更好的兼容兩個(gè)方面的工具，比如 webpack.

優(yōu)化過程

優(yōu)化過程的核心是使用了插件 gulp-useref。這個(gè)插件的主要作用是實(shí)現(xiàn)代碼拼接插入 index.html 文件，主要作用在 ``之間
這個(gè)插件在處理代碼時(shí)，允許使用額外的插件對(duì)代碼流進(jìn)行處理。例如使用Uglify 對(duì) JavaScript 代碼進(jìn)行丑化。CSS 的優(yōu)化過程也是如此。另一個(gè)比較重要的插件為gulp-rev ，實(shí)現(xiàn)了向文件添加hash 串的功能以避免緩存問題。
優(yōu)化結(jié)果會(huì)分為兩個(gè)文件，一個(gè)是第三方依賴，另外一個(gè)是項(xiàng)目源碼。
源碼中的所有 HTML文件都被插件gulp-angular-templatecache處理成了 JavaScript并通過綁定的方式讓 JavaScript 可以調(diào)用。這個(gè)插件的實(shí)現(xiàn)與 webpack 打包就很相似了。
剩下的文件會(huì)原樣復(fù)制到目標(biāo)文件夾中。

返回導(dǎo)航