npm 包 gulp-image-sans-guetzli 使用教程

近年来，Web 前端的性能优化成为了一个热门话题。其中，图片优化无疑是最重要的一环。常用的图片压缩算法有 JPEG、PNG 和 WebP 等。而 guetzli 是一种新型 JPEG 压缩算法，能够获得更高的压缩质量。但是，由于其压缩速度过慢，Web 前端开发者使用 guetzli 进行图片压缩非常困难。因此，今天我们要讲解一个 npm 包 gulp-image-sans-guetzli，它能够实现使用 guetzli 压缩图片的自动化流程。

安装 gulp-image-sans-guetzli

在使用 gulp-image-sans-guetzli 之前，需要先安装 gulp 和 gulp-image-sans-guetzli。

安装 gulp

npm install --global gulp-cli
npm install --save-dev gulp

安装 gulp-image-sans-guetzli

npm install --save-dev gulp-image-sans-guetzli

使用 gulp-image-sans-guetzli

安装好 gulp 和 gulp-image-sans-guetzli 后，我们就可以使用 gulp 进行图片压缩了。首先，需要在根目录下创建一个 gulpfile.js 文件，并引用 gulp 和 gulp-image-sans-guetzli。

const gulp = require('gulp');
const images = require('gulp-image-sans-guetzli');

然后，我们就可以使用 gulp.task 方法定义任务了。下面是一个例子，它会压缩 images 目录下的所有 JPEG 和 PNG 图片，并将它们输出到 dist 目录。

gulp.task('image', function () {
    gulp.src('images/**/*.{jpg,png}')
        .pipe(images()) // 压缩图片
        .pipe(gulp.dest('dist/images')); // 输出到 dist 目录
});

如上代码所示，我们先使用 gulp.src 方法加载要处理的图片，然后通过 images 方法进行压缩，最后使用 gulp.dest 方法将压缩后的图片输出到指定目录。

gulp-image-sans-guetzli 的参数

gulp-image-sans-guetzli 还支持一些选项，让我们可以对压缩进行更加精细的控制。

quality

quality 参数用于指定压缩质量，默认为 92。数值越高，压缩质量越好，但同时也会导致文件大小变大。

gulp.task('image', function () {
    gulp.src('images/**/*.{jpg,png}')
        .pipe(images({
            quality: 95
        }))
        .pipe(gulp.dest('dist/images'));
});

speed

speed 参数用于指定 guetzli 的压缩速度，默认为 3。数值范围为 0~8。数值越大，压缩速度越快，但同时也会导致压缩质量下降。

gulp.task('image', function () {
    gulp.src('images/**/*.{jpg,png}')
        .pipe(images({
            speed: 5
        }))
        .pipe(gulp.dest('dist/images'));
});

log

log 参数用于开启或关闭日志输出，默认为 true。

gulp.task('image', function () {
    gulp.src('images/**/*.{jpg,png}')
        .pipe(images({
            log: false
        }))
        .pipe(gulp.dest('dist/images'));
});

总结

本文介绍了 gulp-image-sans-guetzli 的安装及使用方法，并给出了常见的选项。gulp-image-sans-guetzli 是一款非常实用的 npm 包，它可以帮助我们完成 Web 前端开发中的图片压缩工作，提高网站的加载速度和用户体验。

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