Laya 1.x 按文件夹TS代码合并

Posted 2021-01-28 chiguozi

Laya 1.x 使用TS开发时，经常会碰到代码文件太多，加载index.html时时间太长的问题。Laya编辑器貌似没有自带JS代码合并的功能。基于Laya去实现JS合并需要修改编辑器源码，合并JS并且要修改导出index.html，实现起来比较麻烦，所以考虑合并发布前的TS代码，这样可以正常使用Laya的发布流程，缺点就是修改代码时，需要先恢复源码，修改完再合并，稍微繁琐一点。尽量在稳定后，发布时合并一次即可。

环境配置

• 工具：gulp、glup-concat、del、gulp-rename
• 配置步骤：
  1. 进入项目根目录，打开命令行。
  2. 执行npm init初始化npm，根据需要填入对应信息，默认一直点回车即可。
  3. 执行npm install gulp --save-dev 安装gulp
  4. 执行npm install gulp-concat --save-dev 安装gulp-concat插件 用于合并TS代码。
  5. 执行npm install del --save-dev 安装del插件 用来删除文件
  6. 执行npm install gulp-rename --save-dev 安装gulp-rename插件，用于文件改名，如果用不到也可以不安装。
• 在根目下创建gulpfile.js，用于写工具相关配置。

工具实现：

工作流程：备份src下代码->合并src下代码到src/output下->删除src下源代码->清理bin/js文件->复制导出用index->在编辑器中编译导出。

• 备份代码实现：

  //备份源代码 
  gulp.task(‘backup‘, function() {
      return gulp.src([‘src/**/*‘])
          .pipe(gulp.dest(‘../backup‘));
  });

  将src/的所有文件，复制到../backup文件夹中。
  注意：备份地址不要放在根目录下，否则Laya会去读取这个文件，容易产生多次定义的bug。
  可以在命令行中执行gulp backup 测试脚本执行。之后步骤均可使用这种方式测试单个命令。

• 合并代码实现：
  合并代码时需要控制文件的合并顺序，防止子类在父类之前定义的问题，这样编译TS时会报错。
  最理想情况是解析导出的index.html按照顺序依次合并，但实现起来比较复杂。这里手动控制父类的文件先合并，其他文件在合并。
  大部分情况下，只有几个文件或者文件夹需要提前处理，工作量并不是很大。只要保证父类在前就可以。
  合并的粒度可以自己控制，可以合成一个文件，也可以按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‘));
  });

  注：如果不是在根目录下执行脚本，如‘../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文件

• 复制发布用index.html
  发布的index和开发的index可能不一样，尤其是在

  //拷贝开发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为要合并的文件夹。

  只需要在命令行中执行gulp release 就会一键执行上面所有操作。最后再编辑器中发布即可。