npm 包 gulp-tinypng-nokey-plus 使用教程

在前端开发中，图片压缩是一个非常常见的任务。而 gulp 作为目前最常用的前端构建工具之一，也提供了很多第三方插件来帮助我们完成这项任务。其中，gulp-tinypng-nokey-plus 就是一款非常好用的插件，它可以帮助我们压缩图片大小，从而提高网站的加载速度。

使用前先安装

我们可以在终端中使用 npm 安装这个包，命令如下：

npm install --save-dev gulp-tinypng-nokey-plus

安装完成后，我们就可以愉快地使用它帮助我们压缩图片了。

使用方法

使用 gulp-tinypng-nokey-plus 比较简单，只需要在 gulpfile.js 中引入它，并在任务中使用它即可完成图片压缩。

下面是一个使用示例：

const gulp = require('gulp');
const tinypng = require('gulp-tinypng-nokey-plus');

gulp.task('compress-image', function () {
    return gulp.src('./src/images/*.{png,jpg,jpeg}')
        .pipe(tinypng())
        .pipe(gulp.dest('./dist/images'));
});

上面的代码中，我们首先引入了 gulp 和 gulp-tinypng-nokey-plus，然后定义名为 compress-image 的任务。在任务中，我们使用 gulp.src 获取源文件，然后通过 tinypng() 进行图片压缩，最后将压缩后的文件保存到指定的目标文件夹 ./dist/images 中。

需要注意的是，gulp-tinypng-nokey-plus 是一款免费的插件，但是每个月只有 500 次免费的压缩次数。如果要使用更多次数，需要注册在 官网 上获取 API key。

当然，也可以在插件调用时传入一个参数，用于指定 API key：

gulp.task('compress-image', function () {
    return gulp.src('./src/images/*.{png,jpg,jpeg}')
        .pipe(tinypng('your_api_key'))
        .pipe(gulp.dest('./dist/images'));
});

总结

通过以上使用教程，我们可以非常容易地使用 gulp-tinypng-nokey-plus 这个插件来压缩图片，它可以帮助我们优化网站的性能，提高用户的体验。当然，在使用插件的时候也需要注意最好获取 API key，避免因为免费次数不够而无法使用该插件。如果您对此还有疑问，可以在我的 GitHub 库 中留言，我会尽快为您解答。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddabc