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

时间：2021-06-03 15:55:01

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替换到bin下面。

    //拷贝开发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 就会一键执行上面所有操作。最后再编辑器中发布即可。

相关文章