angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合

今年轉向作前端開發，主要是作angularjs開發，期間接觸了nodejs平臺，今後一發不可收拾。

npm豐富的插件庫，express 開發框架， grunt, gulp構建工具，karma測試管理工具，jasmine單元測試框架，ng-scenario e2e測試框架（之前不知道javascript還能作端對端測試的），coffeescript, less, sass等前端技術，沒想到前端是能夠這樣玩的。

根據這段時間的學習，我將各類相關的技術作一個前端方案的整合，主題爲博客網站，命名爲SingleUI，功能還沒徹底作好，但會繼續更新。有興趣的同窗能夠根據本身的需求作調整。項目地址

 

--------------華麗分界線------------

 

環境安裝部署

1. nodejs: v0.12.2 以上

2. bower: npm install bower -g

3. gulp：npm install gulp -g

安裝包: 進入webui目錄下, 執行命令 npm install prebuild 安裝相關包 (若相關的包安裝失敗或執行命令報錯，請將它刪掉再安裝)

命令: 請查看package.json的scripts和build目錄下相關任務配置

 

項目架構

build: 相關task配置，config目錄下是單個配置，task目錄下是組合配置

dist: 源代碼編譯後的目錄，connect服務器指向該目錄

lib: 第三方插件庫

mocks: 本地模擬數據，routes爲後端api接口

node_modules: npm依賴包

src: 源代碼，架構分層根據功能模塊劃分，每一個目錄下有對應的js, spec.js, scenario.js, scss, html文件

test: karma 單元測試和e2e測試配置文件

test_out: 單元測試和e2e測試的代碼覆蓋率報表，測試結果報表

vendor: bower 依賴的包

bower.json: bower 配置文件

gulpfile.js: gulp 配置文件

middleware.js: 中間組件

package.json: npm配置文件

 

先後端分離

本項目採用先後端分離開發的方式，即開發前約定數據格式，就各幹各的，那麼對於前端來講，發出http請求，獲取數據，應該如何作？

目前想到有兩種：

1. 經過express或其它服務器做爲中間組件攔截。

2. angularjs能夠經過MockJS攔截。

本項目用的是第一種，使用gulp-connect啓動服務器，中間組件middleware指向express，那麼對應的請求就會到express，只須要寫對應的API接口便可，這其實至關於寫express後端。

 

命令

我想要的開發模式：當源文件下的文件例如scss，html，js發生改動時，會執行對應的task，而且瀏覽器自動刷新。

產品版本：合併壓縮重命名css，js，html。

根據項目的需求，經過各類插件處理，就有了如今的解決方案。

 

build目錄下命令，請查看具體配置。

1. gulp dev : 編譯開發版本

　　1)複製相關文件

　　2)將app.sass編譯

　　3)將項目下的html模板合併成angularjs templates module

　　4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

 

2. gulp prod --env production 或 npm run publish : 編譯產品版本

　　1)sass編譯壓縮重命名

　　2)js合併壓縮重命名

　　3)將項目下的html模板合併成angularjs templates module

　　4)inject 模板 index.html, admin/index.html, admin/login.html 外部引用css和script

 

3. gulp : 開發模式

　　1)編譯開發版本

　　2)啓動connect服務器，指定中間件，使用本地mock數據

　　3)watch 文件自動刷新

　　4)karma，啓動單元測試和e2e測試

 

4. gulp server --env production : 產品模式

　　1)編譯產品版本

　　2)啓動connect服務器，指定中間件，使用本地mock數據

 

5. gulp test_singleRun --env production : 產品模式，而且跑測試

　　1)編譯產品版本

　　2)啓動connect服務器，指定中間件，使用本地mock數據

　　3)karma，啓動單元測試和e2e測試

 

測試

基於karma, 單元測試使用jammine, e2e測試用 ng-scenario, 輸出報表有代碼覆蓋率karma-coverage, 執行結果報表junit-reporter

項目文件名爲xx.spec.js爲單元測試，xx.scenario.js爲e2e測試

 

UI

 

計劃

1. 完善SingleUI

2. 對HTML, CSS, JS作強化訓練，試圖彌補項目經驗上的差距。項目地址