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

在游戏开发中，打包前进行图片压缩是必需工作，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 目录下。