[Laya遊戲開發]小技巧使Laya構建速度提升10倍

1. 爲什麼選擇Laya引擎

微信小遊戲推出以後，不少公司也相應的進入到微信小遊戲這個領域，如今市場上的遊戲開發引擎，如Cocos、Egret、Laya都對小遊戲有了很好的兼容性。目前公司技術棧主要是使用Cocos和Laya，通過幾個項目的接觸，考量了引擎在IDE上的上手習慣，API的設計上，發現Laya更適合微信小遊戲的開發。

2. 默認的Laya構建方式

Laya在使用IDE默認建立項目後(本文選擇typescript語言),會在當前項目目錄下，新建一個爲.laya的文件夾。默認生成的編譯配置文件爲

其中compile.js爲開發時默認運行文件，這裏若是開發者是mac系統，使用F8編譯項目後，可能都會報如下錯誤：

經過報錯提示，這裏若是出錯的話，將compile.js名稱改成gulpfile.js，而且，將文件內gulp運行的默認task改成'default'。

經過compile.js文件可知，默認的Laya構建方式是，使用gulp、browserify進行項目構建，tsify編譯typscript，vinyl-source-stream用於將tsify構建的node stream轉化爲gulp能識別的stream文件。因此咱們每次修改ts源碼，都須要手動點擊編譯或者使用F8編譯。而且，就Laya的3D示例項目，每次編譯的時間基本在1s~2s。

3. 改進的Laya構建方式

對於web前端開發，可能都會配置webpack+webpack-hot-middleware之類進行代碼熱更新，開發web網頁的流程基本就是：修改代碼 -> 自動編譯 -> 自動刷新，假若有兩個屏幕，開發者不須要去刷新瀏覽器、輸入命令從新編譯等機械重複的行爲。既然Laya默認使用了browserify（其實browserify這幾年更新已經很慢了），這裏咱們能夠加入gulp.watch，觀察src目錄源文件，每當src下文件發生修改時，自動觸發編譯操做，至關於開發者不須要再按F8編譯。

gulp.task("watch", ['default'], () => {
    gulp.watch("../src/**/*.ts", () => {
        gulp.run("default");
    });
});

可是這種方式，至關於gulp從新進行編譯，實際編譯速度依然不快。那麼問題來了，有沒有辦法編譯對時候，gulp只編譯修改的那部分，從而加快編譯速度？

4. 使用watchify監聽文件變化並結合browserify-sync自動刷新網頁

經過gulp官網可瞭解到watchify到相關使用，這裏咱們將代碼改爲，並結合browser-sync,帶來自動刷新網頁的功能。

const watchedBrowserify = watchify(browserify({
    basedir: workSpaceDir,
    debug: false,
    entries: ['src/Main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));

// 記錄watchify編譯ts的時候是否出錯，出錯則不刷新瀏覽器
let isBuildError = false; 
gulp.task("build", () => {
    return watchedBrowserify
        .bundle()
        .on('error', (...args) => {
           isBuildError = true;
            gutil.log(...args);
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(workSpaceDir + "/bin/js"));
    });

    gulp.task("watch", ['build'], () => {
        // 瀏覽器開發時自動刷新頁面
        browserSync.init({
            port: 3002, // 監聽端口，這裏注意是否和其餘項目衝突
            server: {
                watchFiles: ["../bin/"], // 刷新網頁的監控目錄
                baseDir: "../bin/"
            } 
    });
    //  watchify監聽文件刷新
    watchedBrowserify.on("update", () => {
        isBuildError = false;
        runSequence('build', () => {
            if (!isBuildError) { // 沒有編譯錯誤時，刷新瀏覽器界面
                browserSync.reload();
            }
        });
    });
    // 打印watchify編譯日誌
    watchedBrowserify.on("log", gutil.log);
});

其中，runSequence用於同步執行gulp任務，屢次實踐，這裏還須要加入變量isBuildError，在代碼編譯出錯時，不執行browserSync的刷新。

最終效果：

編譯速度快了近10倍，瀏覽器也能自動刷新了，開發遊戲又更加愉快了～

歡迎下載源代碼： https://github.com/derickweng...