在Visual Studio 2015的Cordova項目中使用Gulp

標籤：

之前一直是在vs 2013中使用Cordova來開發移動app（目前有iPad版/iPhone版/安卓版），準備到下一個milestone的時候升級到2015，這兩天在嘗試各種東西。

2015中的cordova項目和2013結構變化很大，所以需要一個手動遷移過程，這個過程之前已經有同事嘗試過了，包括很多外掛程式可能都要重新安裝，不同外掛程式的使用可能還有些不太一樣。

這兩天在研究如何在項目裡使用gulp這個前端整合工具，vs 2015支援這個東西是一個非常大的利好，之前很多事情現在都可以自動來做了。

gulp需要通過npm進行安裝，不過2015內建的是npm 2.7.4，這個版本的npm有一個非常頭疼的問題：在安裝包依賴的時候會一層一層下去，gulp又是一個依賴層級非常多的包，直接導致路徑長度超過了windows系統的限制，雖然實際用的時候問題不大，但是從資源管理員裡刪除和移動就會非常麻煩（不過vs自己在卸載包的時候就沒問題）。下面這張圖是別人在GitHub的一個issue上截的：

微博上有人提醒我npm 3已經解決了這個問題，可以把所有的依賴包攤平，以下是安裝方法：

1. 微軟提供了一個windows系統上升級npm的工具（因為會涉及到修改系統內容中的PATH等一系列問題），這個工具也是用npm安裝的
2. 以管理員身份開啟PowerShell
3. 執行：Set-ExecutionPolicy Unrestricted -Scope CurrentUser –Force
4. 安裝：npm install -g npm-windows-upgrade
5. 執行：npm-windows-upgrade
6. 然後會給出一個npm的版本列表供我們選擇，最新的好像是3.5.0，但是我去npmjs上看好像是3.4.1？所以最後還是選了3.4.1
7. 裝完之後用npm -v確認一下版本

然後……發現在vs裡面重新下載npm依賴的時候依然是嵌套的……不解……

不過用命令列的方式下載就好了……

然後發現了一個新問題，gulpfile.js 執行不能:

我用了gulp-sass來預先處理css，它依賴於node-sass，node-sass使用了一個用C編寫的libsass庫，提示沒找到指定的庫檔案。我看了一下node-sass的原始碼，可能是因為build的時候和使用的時候產生路徑不一致導致的（我這裡是在win32-ia32-14目錄，貌似是用C14編譯器編譯的），折騰一會兒無果之後，從GitHub上手動下載了win32-ia32-11版本……放進去就ok了

?

gulp的使用比較簡單，安裝剛才說過了（其實就是Cordova項目根目錄的package.json），然後根據需要選擇一些外掛程式，我們會用到的包括gulp-uglify（js最小化）、gulp-sass（預先處理css）、gulp-concat（合并檔案）。使用的時候在根目錄建立一個gulpfile.js，然後就是標準玩兒法，相對比較簡單，這裡就不多介紹了，有興趣可以參考gulp文檔。

在Visual Studio的視圖菜單 – 其他視窗 – 任務運行程式資源管理員 中，可以看到gulp中的任務：

左側可以看到在gulpfile.js中編寫的所有任務，可以右鍵直接運行，或者右鍵把它綁定到vs的事件中，比如產生前進行html、js、css處理，在項目開啟的時候進行watch（檔案修改後可以自動進行css預先處理等任務）。

?

我們的產品是一個單頁面應用（SPA），裡面目前涉及到超過70個頁面，沒有用angular這樣的架構（不過在某些核心功能中使用了knockout），是我自己寫的一套簡單的（有機會可以分享一下），每個頁面對應一個html、一個js，之前css都是寫在一起的（現在已經1800多行了……）。2015的Cordova項目所有引用的檔案都在www目錄中，所以後面打算這麼幹：

1. 在www目錄之外建立一個component_pages目錄，每個頁面對應一個html + 一個js + 一個scss（可能沒有）放到這裡面
2. 使用gulp實現如下功能：
   1. 所有非庫的js檔案（也就是自己寫的js檔案），進行uglify（如果是debug模式可以跳過這一步），然後複製到www目錄對應檔案夾下
   2. 所有的html檔案直接複製到www目錄對應檔案夾下
   3. 所有的scss先行編譯為css後合并成一個css，複製到www目錄對應檔案夾下……

?

參考：

1. Automate tasks for your Cordova project by using Gulp
2. npm-windows-upgrade

在Visual Studio 2015的Cordova項目中使用Gulp