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

本是古典何须时尚 2022-05-14 02:36 207阅读 0赞

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

## gulp简介 ##

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

#### 易于使用 ####

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

#### 构建快速 ####

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

#### 插件高质 ####

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

#### 易于学习 ####

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

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

## 安装nodejs ##

从nodejs官网([https://nodejs.org][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 <task> <othertask>

## 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 中编写以下脚本：

可以看到，指定的输入和输出路径都是 ./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 目录下。

[https_nodejs.org]: https://nodejs.org