使用gulp 压缩构建的web-mobile包

Creator 3.x
#1

起因：测试觉得打开网页加载游戏的速度太慢了，然后想到了曲线救国的办法，压缩js json 以及将一些css和js内联进html
cocos Creator 版本 3.72
node版本 18.16.0
npm版本 9.5.1

1赞
#2

给大家安利一个下载node指定版本的办法：
https://nodejs.org/dist/v18.16.0/
把后面的版本改成对应的就行

现在npm的速度越来越慢了，之前都不屑用淘宝镜像， 现在不得不用了

// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com
// 3. 查看源是否设置成功
npm config get registry
// 4. 可以正常安装需要的工具了
npm insatll xxx
#3

全局安装gulp
npm i gulp -g

创建一个ts空白项目
引入gulp依赖包
image
虽然已经全局安装了gulp 还是需要为项目安装一下gulp
image

*\node_modules\gulp-file-inline\index.js
注意这个包下面的js文件需要改一下啊
在defOpts 的js筛选器下面加上

filter: function (tag) {
   return !/\stype\s*=\s*["']?systemjs-importmap["']?/.test(tag);
 }
#4

在这个ts空白项目中新建一个gulpfile.js（固定名字 不需要改）粘贴下面的代码

    var gulp = require('gulp');

    var htmlmin = require('gulp-htmlmin');

    var fileInline = require('gulp-file-inline');

    var uglify = require('gulp-uglify');

    var jsonmin = require('gulp-jsonmin');
    var path = "E:/workSpace/testGame/build/web-mobile/" //讲这个换成自己项目的路径

    // 压缩html 内联css

    gulp.task('htmlmin', function (cb) {

        gulp.src([path + 'index.html'])

            .pipe(fileInline())

            .pipe(htmlmin({

                collapseWhitespace: true,//移出空格

                removeComments: true, //删除注释

                minifyJS: true,

                minifyCSS: true,

            }))

            .pipe(gulp.dest(path))

            .on('end', cb);

    });

    // 压缩js

    gulp.task('script', function (cb) {

        gulp.src(path + '**/*.js')

            .pipe(uglify())

            .pipe(gulp.dest(path))

            .on('end', cb);

    });

    // 压缩json

    gulp.task('minify-json', function (cb) {

        gulp.src(path + '**/*.json') // 匹配所有 JSON 文件

            .pipe(jsonmin())

            .pipe(gulp.dest(path))

            .on('end', cb);

    });

    // 将三个任务组合为一个任务一起执行

    gulp.task('build', gulp.series('minify-json', 'htmlmin', 'script'));
#5

命令行执行
image

大功告成

1赞
#6

彩彩彩彩彩