Laya 1.x 使用TS開發(fā)時，經(jīng)常會碰到代碼文件太多，加載index.html時時間太長的問題。Laya編輯器貌似沒有自帶JS代碼合并的功能?；贚aya去實現(xiàn)JS合并需要修改編輯器源碼，合并JS并且要修改導出index.html，實現(xiàn)起來比較麻煩，所以考慮合并發(fā)布前的TS代碼，這樣可以正常使用Laya的發(fā)布流程，缺點就是修改代碼時，需要先恢復源碼，修改完再合并，稍微繁瑣一點。盡量在穩(wěn)定后，發(fā)布時合并一次即可。

環(huán)境配置

• 工具：gulp、glup-concat、del、gulp-rename
• 配置步驟：
  1. 進入項目根目錄，打開命令行。
  2. 執(zhí)行npm init初始化npm，根據(jù)需要填入對應信息，默認一直點回車即可。
  3. 執(zhí)行npm install gulp --save-dev 安裝gulp
  4. 執(zhí)行npm install gulp-concat --save-dev 安裝gulp-concat插件 用于合并TS代碼。
  5. 執(zhí)行npm install del --save-dev 安裝del插件 用來刪除文件
  6. 執(zhí)行npm install gulp-rename --save-dev 安裝gulp-rename插件，用于文件改名，如果用不到也可以不安裝。
• 在根目下創(chuàng)建gulpfile.js，用于寫工具相關配置。

工具實現(xiàn)：

工作流程：備份src下代碼->合并src下代碼到src/output下->刪除src下源代碼->清理bin/js文件->復制導出用index->在編輯器中編譯導出。

• 備份代碼實現(xiàn)：

  //備份源代碼 
  gulp.task('backup', function() {
      return gulp.src(['src/**/*'])
          .pipe(gulp.dest('../backup'));
  });
  

  將src/的所有文件，復制到../backup文件夾中。
  注意：備份地址不要放在根目錄下，否則Laya會去讀取這個文件，容易產(chǎn)生多次定義的bug。
  可以在命令行中執(zhí)行gulp backup 測試腳本執(zhí)行。之后步驟均可使用這種方式測試單個命令。

• 合并代碼實現(xiàn)：
  合并代碼時需要控制文件的合并順序，防止子類在父類之前定義的問題，這樣編譯TS時會報錯。
  最理想情況是解析導出的index.html按照順序依次合并，但實現(xiàn)起來比較復雜。這里手動控制父類的文件先合并，其他文件在合并。
  大部分情況下，只有幾個文件或者文件夾需要提前處理，工作量并不是很大。只要保證父類在前就可以。
  合并的粒度可以自己控制，可以合成一個文件，也可以按src下文件夾合并，或者更細的粒度。

  //合并frame文件夾
  gulp.task('frame', function() {
    return gulp.src([
    'src/frame/A/**/*.ts',   //先合并A文件夾下所有文件
    'src/frame/B/B.ts',  //合并B下的B.ts
    'src/frame/C/*Base*.ts',    //合并C下所有含有Base的問題
    'src/frame/**/*.ts',         //合并frame下的其他所有文件
    ])
      .pipe(concat('frame.ts'))
      .pipe(gulp.dest('src/output'));
  });
  

  注：如果不是在根目錄下執(zhí)行腳本，如'../src/xxxxx'，合并時特殊文件會被多合一次，還沒有找到原因。

• 刪除源代碼：

  //刪除合并前代碼
  gulp.task('delsource', function(){
      return del([
          'src/**',
          '!src/output',
          '!src/output/*',
          '!src/ui',
          '!src/ui/*',
          '!src',
          
          ], {force:true});
  });
  

  保留src下的output文件夾和ui文件夾。
  要保留文件夾下的文件，需要先保留文件夾。

• 刪除bin/js

  //刪除bin下面js
  gulp.task('cleanBinJs', function(){
      return del([
          'bin/js/**',
          ], {force:true});
  });
  

  清理之前的js文件

• 復制發(fā)布用index.html
  發(fā)布的index和開發(fā)的index可能不一樣，尤其是在<jsfile--Custom>標簽中定義文件時。這里是將發(fā)布用的index替換到bin下面。

  //拷貝開發(fā)index
  gulp.task('copyIndex', function()
  {
      return gulp.src('index/release.html')       //找到文件
          .pipe(rename('index.html'))             //將文件改名
          .pipe(gulp.dest('./bin/'));             //拷貝到bin下面
  })
  

• 設置一鍵腳本

  //打包代碼
  gulp.task('merage', gulp.parallel('A', 'B', 'C'));
  
  gulp.task('release', gulp.series('backup','merage', 'delsource', 'cleanBinJs', 'copyIndex'));
  

  ABD為要合并的文件夾。

  只需要在命令行中執(zhí)行gulp release 就會一鍵執(zhí)行上面所有操作。最后再編輯器中發(fā)布即可。