今年轉向做前端開發，主要是做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做強化訓練，試圖彌補項目經驗上的差距。項目地址