自動化的開發流程
在HTML5游戲開發或者說在Web客戶端開發中，對項目代碼進行修改之后，一般來說，需要手動刷新瀏覽器來查看代碼修改后運行結果。這種手動的方式費時費力，降低了開發效率。另外，如果我們使用了如TypeScript這類需要通過轉換器把代碼轉換成瀏覽器可識別的JavaScript代碼的語言，在運行程序之前，我們還需要進行額外的手動轉換，這同樣是影響開發效率的一個因素。為了解決這兩個問題，本文介紹了如何通過使用TypeScript Compiler(tsc)的watch模式來實現代碼修改后自動編譯以及使用gulp-connect來實現編譯后瀏覽器自動刷新。
開發環境
- Visual Studo Code 1.15
- node v8.4.0
- npm 5.3.0
示例和源碼
本文將通過一個完整的實例來講解如何實現開發自動化，實例的源碼托管在github。示例所采用的HTML5游戲引擎為LayaAir。目前已經在Windows和Mac OSX系統測試通過。這里是倉庫鏈接。另外，示例項目是使用VS Code(Visual Studio Code)來開發的。我們常用的HTML5游戲集成開發環境Laya IDE以及Egret Wing等也是基於VS Code開發的，部分相關知識也可以借鑒。另外本文使用了AMD來管理項目的代碼，關於如何在HTML5游戲中使用AMD請參考我的另一篇文章《借助AMD來解決HTML5游戲開發中的痛點》。
使用tsc的watch模式實現自動化編譯
tsc天生就支持自動化編譯和增量編譯。在tsconfig.json中的compilerOptions屬性中增加"wathc":true配置即可。這樣我們執行命令tsc -p .的時候便可以使用這些特性了。
使用gulp和gulp-connect實現編譯后瀏覽器自動刷新
gulp是一種基於nodejs的自動化構建工具，它可以增強我們的工作流程。gulp-connect是gulp的一個插件，主要提供web服務器和自動化瀏覽器刷新功能。在本文的參考資料列表中可以查看更多的關於gulp和gulp-connect的信息。下面我講詳細講解自動化流程的創建。
安裝
gulp是基於nodejs，所以首先要安裝nodejs環境，具體安裝過程以及nodejs相關知識我們可以參考nodejs官方網站。
nodejs安裝完畢之后，需要初始化項目：
npm init
接着，通過執行命令來全局安裝 gulp和tsc：
npm install -g gulp typescript
下面安裝開發依賴
npm install --save-dev gulp gulp-connect
創建gulpfile.js
在項目根目錄下創建一個名為gulpfile.js的文件，我們的自動化流程邏輯全部在這里。
首先我們要創建一個web server，因為gulp-connect使用WebSocket和瀏覽器進行通信，所以這是實現瀏覽器自動刷新的必要條件。我們來創建一個connect任務以實現這個功能。web server的默認端口為8080。
gulp.task('connect', () =>
connect.server({
root: './bin',
livereload: true
})
);
下面我們創建一個watch任務來實現對編譯文件的內容變化的監聽，當檢測到變化之后則執行一個名為reload的任務。reload任務負責通知瀏覽器對當前的html頁面進行刷新。
gulp.task('reload', () => {
return gulp.src('./bin/*.html')
.pipe(connect.reload());
});
gulp.task('watch', () => {
gulp.watch(['./bin/js/*.js'], ['reload']);
});
為了自動化執行編譯命令tsc，我們創建一個compile任務來完成這件事。
gulp.task('compile', () => {
const cmd = os.platform() == 'win32' ? 'tsc.cmd' : 'tsc';
const childProcess = require('child_process');
const child = childProcess.spawn(cmd, []);
child.stdout.on('data', function (chunk) {
console.log('[tsc]', chunk + '');
});
child.stderr.on('data', function (chunk) {
console.log('[tsc]', chunk);
});
child.on('exit', function (code, signal) {
console.log('[tsc]', chunk);
});
return child;
});
當ts文件發生變化的時候，我們可以在控制台的日志中看到tsc的自動化編譯的工作過程。
最后創建default任務，以觸發其他所有任務的執行。
gulp.task('default', ['connect', 'watch', 'compile']);
配置VS Code
我們需要安裝VS Code插件Debugger for Chrome，以實現使用Chrome在VS Code中調試運行代碼。
接着，我們可以按下F5，並選擇chrome來自動生成調試配置launch.json，此文件位於.vscode文件夾。
下面，按下F1，並輸入Configure Default Build Task來快速找到配置默認生成任務選項，選擇之后彈出任務列表，在列表中選中gulp:default之后，task.json文件會自動生成，並置於.vscode文件夾。task.json使得我們可以把gulp:default作為默認的構建任務。
至此，所有的配置和編程處理完畢。
開啟自動化的開發之旅
按下快捷鍵Ctrl+Shift+B或者在終端中執行gulp來觸發gulp:default：
- 創建一個web服務器
- 執行tsc，在ts文件發生變化之后自動編譯
- 監聽編譯文件的變化，文件變化之后會通知瀏覽器刷新
接下來，我們可以在瀏覽器中輸入http://localhost:8080來運行游戲。
然后修改示例中的Greeting.ts文件，把Hello LayaAir修改為Hello HTML5 Game.，保存文件之后，便會發現游戲中的顯示文本修改為Hello HTML5 Game.. 具體請看下面的動圖。
如有其他的配置疑問，請參考示例項目的源碼。