[Cordova] hooks功能-檢查、壓縮、合併

4 mins.
  1. 1. JSHint
  2. 2. Concat files
  3. 3. Uglify

最近才得知cordova可以在編譯輸出前做一些事情
這個地方叫做hooks,可以到官網查詢

預計要來做幾件事情
1.JSHint
2.Concat files
3.Uglify

JSHint

檢查JS語法,這個會放在before_prepare,要讓錯誤扼殺在成長之前XD
所以我們要建立一個檔案,010_jshint.js

hooks的運作機制,會根據js前面的號碼作為排序,來依序執行檔案
有多個動作時,記得要確認一下要執行的順序為何

Concat files

撰寫時,我們會將js、css根據模組或功能等需求而分開來
等到我們要執行時,為了效能的優化,就會將檔案進行合併

這個動作會放在after_prepare下,這邊也要建立一個檔案012_concat_files_by_index.js
這功能主要是將index.html中所宣告引用的js、css進行合併,所以index.html還是要記得先加上

做完這段以後可以發現到,index.html中已經被合併的檔案tag還是存在,那接著我們就要對於這些被合併的tag換成最後輸出的檔案
那這邊需要先對index.html中加上一些東西,才能讓接下來的功能順利進行,可以參考node-useref

1
2
3
4
5
6
7
<!-- build:css css/app.min.css -->
<link href="css/ionic.app.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- endbuild -->
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<!-- endbuild -->

一樣在after_prepare中,加上015_prepare_index.js

Uglify

這是裡面最簡單的好做到的功能XD,只要下個指令就可以
會自動在after_prepare下增加一個uglify.js檔案,因為前面沒有順序,所以會是最後執行
詳細內容一樣可以到官網中查詢

1
npm install cordova-uglify --save

做完以上的動作,我們就可以下個指令確認一下

1
cordova prepare [platform] --release

沒有看到任何錯誤就是成功啦
可以打完收工囉

ㄟㄟㄟ~等等!
mac用戶明明會遇到另一個錯誤

好吧~我只好再回來繼續
因為mac用戶會有權限的問題,會只看到一個鬼一般的訊息

Error: EACCES

那這個問題不大,只要下個指令給個權限就好,針對我們在after_prepare所新增的兩個檔案012、015

1
chmod +x hooks/after_prepare/[filename]

好啦,這次真的要打完收工了