Gulp оптимизирует изображения с помощью imagemin

Я пытаюсь Gulp оптимизировать свои изображения с помощью 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);
});

Я что-то пропустил в конфиге?


gulp imagemin gulp-imagemin
person Kevin    schedule 15.02.2017    source источник
comment
Примечание: вы можете сузить свой gulp.src с помощью imgSrc + '**/*.(png|jpg|gif|jpeg)' (хотя, если вы будете следовать моему ответу, вам не нужно указывать расширения файлов)   -  person henry    schedule 18.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

Я предполагаю, что у вас есть причины ожидать более значительного уменьшения размера, чем вы получаете. В таком случае, держу пари, проблема в старых технологиях.

gulp-image-optimization, который вы используете, по-видимому, опирается на старый imagemin, который не разбивал каждый тип оптимизации на отдельный плагин (я говорю «появляется», потому что ему много лет, это то, что отражено в документации 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) оптимизация по умолчанию.

person henry    schedule 18.02.2017