标签：文件 githubusercontent github 151.101 36 Gulp 构建 108.133 com
一、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文档进行学习！
标签：文件,githubusercontent,github,151.101,36,Gulp,构建,108.133,com 来源： https://blog.csdn.net/qq_36213140/article/details/122501616
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。