跳至正文

CocosCreator和gulp-使用gulp-imagemin压缩图片

  • Cocos

在游戏开发中,打包前进行图片压缩是必需工作,gulp内置了很多构建、优化插件,例如:图片压缩、js文件合并等等,这样,在游戏构建过程中,只需一个命令,就可以自动做完所有这些工作。

gulp简介

gulp的目标是用自动化构建工具来增强你的工作流程。

易于使用

通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理。

构建快速

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

插件高质

gulp 严格的插件指南确保插件如你期望的那样简洁高效得工作。

易于学习

通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

简单说,gulp提供了上万种自动化工作流的插件,来简化JS项目的编译、构建、优化、部署等工作。而CocosCreator引擎的官方语言也是JS,所以正好可以使用gulp来帮助我们提高工作效率。下面我们以Win10系统为例,来说明如何使用gulp自动压缩图片。

安装nodejs

从nodejs官网(https://nodejs.org)下载Windows安装包,当前最新版本是8.11.4,安装完成后,在命令行输入node -v和npm -v,如果安装成功则会输出node的版本号。

安装gulp

gulp依赖于nodejs,所以首先让CocosCreator项目的工程目录符合nodejs标准,进入项目根目录,输入以下命令:

$ npm init

将会在项目根目录自动生成 package.json 文件。

全局安装 gulp

$ npm install gulp -g 

安装好后输入 gulp -v 检查安装是否成功。

作为项目依赖安装 gulp

$ npm install gulp --save-dev

在项目根目录创建一个名为 gulpfile.js 的文件,内容如下:

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行 gulp:

$ gulp

默认的名为 default 的任务(task)将会被运行,当然,此时这个任务不会做任何事情。

想要单独执行特定的任务(task),基本命令格式为:

gulp  

gulp基本语法

gulp的核心API简洁到只有4个:src、dest、task、watch

  • gulp.src(globs[, options]):指明源文件路径
  • gulp.dest(path[, options]):指明处理后的文件输出路径
  • gulp.task(name[, deps], fn):注册任务
  • gulp.watch(glob [, opts], tasks):监视文件的变化并运行相应的任务

自动压缩图片

接下来我们编写一个压缩图片的真正任务来说明,首先安装 gulp-imagemin 图片压缩插件

$ npm install gulp-imagemin --save-dev

然后在 gulpfile.js 中编写以下脚本:

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");

gulp.task('imagemin', function (cb) {
    gulp.src('./build/web-mobile/**/*.{png,jpg,jpeg}')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest("./build/web-mobile/"))
        .on("end", cb);
});

可以看到,指定的输入和输出路径都是 ./build/web-mobile ,运行

$ gulp imagemin

如果成功,将会输出如下:

[20:46:02] Using gulpfile C:\xxxx\gulpfile.js
[20:46:02] Starting 'imagemin'...
[20:57:53] gulp-imagemin: Minified 459 images (saved 7.43 MB - 10.1%)
[20:57:53] Finished 'imagemin' after

优化后的图片仍然放在 ./build/web-mobile 目录下。

标签:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注