在前端开发中，图片压缩是一个非常常见的任务。而 gulp 作为目前最常用的前端构建工具之一，也提供了很多第三方插件来帮助我们完成这项任务。其中，gulp-tinypng-nokey-plus 就是一款非常好用的插件，它可以帮助我们压缩图片大小，从而提高网站的加载速度。
使用前先安装
我们可以在终端中使用 npm 安装这个包，命令如下：
--- ------- ---------- -----------------------
安装完成后，我们就可以愉快地使用它帮助我们压缩图片了。
使用方法
使用 gulp-tinypng-nokey-plus 比较简单，只需要在 gulpfile.js 中引入它，并在任务中使用它即可完成图片压缩。
下面是一个使用示例：
----- ---- - ----------------
----- ------- - -----------------------------------
--------------------------- -------- -- -
------ -----------------------------------------
----------------
----------------------------------
---上面的代码中，我们首先引入了 gulp 和 gulp-tinypng-nokey-plus，然后定义名为 compress-image 的任务。在任务中，我们使用 gulp.src 获取源文件，然后通过 tinypng() 进行图片压缩，最后将压缩后的文件保存到指定的目标文件夹 ./dist/images 中。
需要注意的是，gulp-tinypng-nokey-plus 是一款免费的插件，但是每个月只有 500 次免费的压缩次数。如果要使用更多次数，需要注册在 官网 上获取 API key。
当然，也可以在插件调用时传入一个参数，用于指定 API key：
--------------------------- -------- -- -
------ -----------------------------------------
------------------------------
----------------------------------
---总结
通过以上使用教程，我们可以非常容易地使用 gulp-tinypng-nokey-plus 这个插件来压缩图片，它可以帮助我们优化网站的性能，提高用户的体验。当然，在使用插件的时候也需要注意最好获取 API key，避免因为免费次数不够而无法使用该插件。如果您对此还有疑问，可以在我的 GitHub 库 中留言，我会尽快为您解答。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fec81e8991b448ddabc