Gulp用imagemin优化图像

时间:2017-02-15 17:02:13

标签: gulp gulp-imagemin imagemin

我正在尝试使用imagemin来优化我的图像

https://www.npmjs.com/package/gulp-image-optimization

我有问题找到一个好的文档,可以向我显示确切的参数和不同的选项。目前,我的优化并没有太大的好处:

var imageop = require('gulp-image-optimization');
var pngquant = require('imagemin-pngquant');
var imageminJpegoptim = require('imagemin-jpegoptim');

var baseUrl = "web/assets/";
var imgSrc = baseUrl + "src/images/";
var imgDist = baseUrl + "dist/images/";

gulp.task('img', function(cb) {
    gulp.src([imgSrc + '**/*.png', imgSrc + '**/*.jpg', imgSrc + '**/*.gif', imgSrc + '**/*.jpeg'])
        .pipe(imageop({
            optimizationLevel: 10,
            progressive: true,
            interlaced: true,
            use: [pngquant(), imageminJpegoptim()]
        }))
        .pipe(gulp.dest(imgDist)).on('end', cb).on('error', cb);
});

我是否错过了配置中的内容?

1 个答案:

答案 0 :(得分:2)

我假设您有理由期望比您获得更大幅度的减少。在那种情况下,我的赌注是老技术的麻烦。

您使用的gulp-image-optimization似乎依赖旧的imagemin,它没有将每种类型的优化分解为自己的插件(我说"出现& #34;因为它岁已经过去了gulp-image-optimization的文档中反映的内容,以及imagemin过去常见的情况如果我记得正确,我会工作。

这些天推荐的插件以及imagemin文档中链接的插件是gulp-imagemin

使用gulp-imagemin,您的基本设置将类似于

const gulp = require('gulp'),
      imagemin = require('gulp-imagemin');

gulp.task('default', (cb) =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images')).on('end', cb).on('error', cb)
);

(该代码直接来自gulp-imagemin文档,并添加了错误回调。)

gulp-imagemin默认包含png(optipng)和jpg(jpegtran)优化的插件。