一、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执行任务时，发现报错，是我这里没有导入，那么我们千万要记住导出！也要自己学会看错误！自己独立能够解决问题！能够自己阅读官方API文档进行学习！