构建后自动图集 图片压缩

Creator 2.x
#1

使用自动图集构建后的图比散图大

image.png702×316 42 KB

image.png976×186 48.9 KB

如何自动识别构建后的合图并提取出来进行压缩后再替换掉原合图

#2

同问，重要的事情往往没人在意

#3

论坛搜搜？

#4

打包完成后处理一下所有的资源 可以吧

#5

参考官方文档，定制构建流程插件
https://docs.cocos.com/creator/manual/zh/publish/custom-project-build-template.html

// 注册构建结束事件
Editor.Builder.on("build-finished", onBuildFinished);

/**
 *  采用gulp的方式压缩资源
 * @param {*} options
 * @param {*} callback 
 */
function onBuildFinished(options, callBack) {
    // 不压缩的资源
    let uninculdes = [];
    let args = ['build-image', '--project', options.dest, "--exclude", JSON.stringify(uninculdes), "--md5", options.md5Cache ? "true" : "false"];
    var workerProcess = child_process.spawn('gulp.cmd', args, { cwd: __dirname });
    workerProcess.stdout.on('data', (data) => {
        Editor.log(data + "");
    });

    workerProcess.stderr.on('data', (data) => {
        Editor.log(data + "");
    });

    workerProcess.on('close', (code) => {
        Editor.log('资源压缩完成' + code);
        callBack();
    });
}

由gulp实现具体压缩，可以使用node的资源压缩库也可以自己实现压缩。实现方式自由，只要将具体实现放到任务中就可以了


gulp.task('build-pngquant', function (cb) {
    gulp.src(options.project + '/res/raw-assets/*/**.png')
        .pipe(imageUtils.pngquantMin(options))
        .pipe(gulp.dest(options.project + '/res/raw-assets')
            .on("end", function () {
                cb();
            }));
})

gulp.task('save-cache-info', function (cb) {
    imageUtils.saveMd5Info();
    cb();
});

gulp.task('build-image', gulp.series('build-pngquant', 'save-cache-info'), function (cb) {
    cb();
});

为了节省构建时间，对资源压缩做了缓存，根据MD5值决定是否需要重复压缩

大体上就是这个思路了。方法大家都想得到，但是还是要静心自己去实现。

2赞
#6

关键有些包是打成zip的，在构建流程里没有打zip之前的一步，需要自己解压、压图、再压zip

1赞
#7

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。

#8

2.4.7 应该不会了