npm 包 gulp-tinypng-nokey2 使用教程

什么是 gulp-tinypng-nokey2？

gulp-tinypng-nokey2 是一个基于 Gulp 的 Node.js 模块，用于将图片压缩为更小的文件大小，从而提高网站的加载速度。相比较于 gulp-tinypng，这个模块不需要申请 API key，使用更加方便。

安装 gulp-tinypng-nokey2

在使用 gulp-tinypng-nokey2 之前，需要先安装 Node.js 环境和 Gulp，并创建一个项目。

安装 gulp-tinypng-nokey2 的命令如下：

npm install --save-dev gulp-tinypng-nokey2

使用 gulp-tinypng-nokey2

在安装完毕之后，我们就可以在 Gulp 的任务中使用 gulp-tinypng-nokey2 了。

-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -------------------------------

---------------- -------- -- -
  --------------------------------------
    ---------------------
    -------------------------------
---

-------------------- ---------

在这个任务中，我们将 src/img 目录下的所有 png、jpg 和 jpeg 图片通过 gulp-tinypng-nokey2 进行压缩，并将压缩后的图片放在 dist/img 目录下，最后使用 gulp 命令运行该任务。

高级使用

gulp-tinypng-nokey2 还提供了一些高级选项，使你可以更加灵活地使用该模块。

1. 压缩质量

可以通过 quality 选项来设定压缩质量。默认值为 80，取值范围为 0 到 100。

gulp.task('img', function () {
  gulp.src('./src/img/*.{png,jpg,jpeg}')
    .pipe(tinypngNokey({
      quality: 60 // 将压缩质量设为 60
    }))
    .pipe(gulp.dest('./dist/img'));
});

2. 替换压缩后的文件

可以通过 replace 选项来指定是否替换原始文件，默认为 false。

gulp.task('img', function () {
  gulp.src('./src/img/*.{png,jpg,jpeg}')
    .pipe(tinypngNokey({
      replace: true // 将压缩后的文件替换原始文件
    }))
    .pipe(gulp.dest('./src/img'));
});

3. 输出压缩统计信息

可以通过 log 选项来输出压缩统计信息，默认为 false。

gulp.task('img', function () {
  gulp.src('./src/img/*.{png,jpg,jpeg}')
    .pipe(tinypngNokey({
      log: true // 输出压缩统计信息
    }))
    .pipe(gulp.dest('./dist/img'));
});

4. 排除某些文件

可以通过 ignore 选项来排除某些文件。

gulp.task('img', function () {
  gulp.src('./src/img/**/*.{png,jpg,jpeg}')
    .pipe(tinypngNokey({
      ignore: ['./src/img/**/ignore.png'] // 排除 ./src/img 目录下所有的 ignore.png 文件
    }))
    .pipe(gulp.dest('./dist/img'));
});

总结

通过本教程的学习，你应该已经知道了如何使用 gulp-tinypng-nokey2 模块来压缩图片，从而提升网站的加载速度。同时，你也学会了如何使用 gulp 的一些基本命令和选项，可以为你在日常开发中提供帮助。相信通过不断的学习和实践，你的前端技术水平将得到不断提升。

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