（36）Gulp 构建资源（图片）文件

一、Gulp 构建资源（图片）文件概述

所谓Gulp 构建资源（图片）文件就是将图片占用大小压缩后变小。其实我们Gulp构建资源文件不只是单独只图片，还有其他的比如说字体文件，也是资源文件。这里我们拿图片文件演示。

一、Gulp 图片文件所需插件

二、Gulp 构建资源（图片）文件示例

1.安装压缩图片文件所需要的插件

安装命令（npm i gulp-imagemin -D）

当我们执行安装命令呢，发现有一个报错。原因是我们下载该插件是要去国外的网站去下载，所以会出现该问题。那么如何解决该问题呢？

解决方法：

• 配置 hosts

• 通过 vscode 打开 hosts 文件（C:\Windows\System32\Drivers\etc）

• 添加 Github hosts 内容

```
    # GitHub Start (chinaz.com) =================================================
    13.229.188.59 github.com
    54.169.195.247 api.github.com
    140.82.113.25 live.github.com
    8.7.198.45 gist.github.com
    
    # 185.199.108.154 github.githubassets.com
    # 185.199.109.154 github.githubassets.com
    185.199.110.154 github.githubassets.com
    # 185.199.111.154 github.githubassets.com
    
    34.196.247.240 collector.githubapp.com
    # 52.7.232.208 collector.githubapp.com
    52.216.92.163 github-cloud.s3.amazonaws.com
    
    199.232.96.133 raw.githubusercontent.com
    151.101.108.133 user-images.githubusercontent.com
    
    151.101.108.133 avatars.githubusercontent.com
    151.101.108.133 avatars0.githubusercontent.com
    151.101.108.133 avatars1.githubusercontent.com
    151.101.108.133 avatars2.githubusercontent.com
    151.101.108.133 avatars3.githubusercontent.com
    151.101.108.133 avatars4.githubusercontent.com
    151.101.108.133 avatars5.githubusercontent.com
    151.101.108.133 avatars6.githubusercontent.com
    151.101.108.133 avatars7.githubusercontent.com
    151.101.108.133 avatars8.githubusercontent.com
    151.101.108.133 avatars9.githubusercontent.com
    151.101.108.133 avatars10.githubusercontent.com
    151.101.108.133 avatars11.githubusercontent.com
    151.101.108.133 avatars12.githubusercontent.com
    151.101.108.133 avatars13.githubusercontent.com
    151.101.108.133 avatars14.githubusercontent.com
    151.101.108.133 avatars15.githubusercontent.com
    151.101.108.133 avatars16.githubusercontent.com
    151.101.108.133 avatars17.githubusercontent.com
    151.101.108.133 avatars18.githubusercontent.com
    151.101.108.133 avatars19.githubusercontent.com
    151.101.108.133 avatars20.githubusercontent.com
    # GitHub End ===================================================================
    
    ```

• 保存（如无权限，以管理员身份新打开文件）

• 然后重新安装 gulp-imagemin 

安装命令（npm i gulp-imagemin -D）

此时如下图我们发现，就不会报错啦！ 

2.导入我们安装好的imagemin插件，其实我们不用书写，省去导入这个步骤，这里直接我们可以直接再任务中的pipe（）管道书写imagemin（）方法后，vscode编辑器会直接帮我们到导入该插件，无需我们再手动导入啦，是不是又轻松了一步呢~~

那么我们输写完任务后，再执行gulp image执行任务时，发现还是报错。

解决npm安装gulp-imagemin出现错误

gulp-imagemin 引入报错，uninstall原来的，或直接删掉，降低版本号试试，原gulp-imagemin 版本8.0.0，降到7.1.0即可解决该问题。

• 先安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 再使用cnpm安装gulp-imagemin

cnpm install gulp-imagemin@7.1.0 --save-dev

运行结果

对比压缩前的图片和压缩后的图片

图片压缩前

图片压缩后

虽然我们通过如上示例中，没有压缩太多大小，但是确实是变小了，我们如果上传多个图片道服务器时，压缩后会提升我们的速度的，图片少时不明显。

我们的图片压缩默认是无损压缩，我们还可以进行有损压缩，如下示例，给imagemin（）方法定义一个数组，数组中写入imagemin的方法，进行有损压缩设置

详细设置，可以查看官方API文档：https://www.npmjs.com/package/gulp-imagemin

通过有损压缩后，我们发现图片的大小变的更小啦！这就是有损压缩！如果不设置默认是无损压缩哦~~