吞咽图像

使用 gulp 任务优化 PNG、JPEG、GIF、SVG 图像。

安装

$ npm install --save-dev gulp-image

外部关系

brew install libjpeg libpng 在 macOS 上
apt-get install -y libjpeg libpng 在 Ubuntu 上
npm install -g windows-build-tools 在 Windows 上

用法

这是的一个例子gulpfile.js。

import gulp from 'gulp';
import image from 'gulp-image';

gulp.task('image', function () {
  gulp.src('./fixtures/*')
    .pipe(image())
    .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['image']);

您可以将对象image()作为参数传递给，例如：

gulp.task('image', () => {
  gulp.src('./fixtures/*')
    .pipe(image({
      pngquant: true,
      optipng: false,
      zopflipng: true,
      jpegRecompress: false,
      mozjpeg: true,
      gifsicle: true,
      svgo: true,
      concurrent: 10,
      quiet: true // defaults to false
    }))
    .pipe(gulp.dest('./dest'));
});

false为您不想应用的优化器设置。并且您可以设置concurrent选项来限制执行中的最大并发数。您还可以设置quiet避免为处理的每个图像注销结果。

您可以配置应用于每个优化器的参数，例如：

gulp.task('image', () => {
  gulp.src('./fixtures/*')
    .pipe(image({
      optipng: ['-i 1', '-strip all', '-fix', '-o7', '-force'],
      pngquant: ['--speed=1', '--force', 256],
      zopflipng: ['-y', '--lossy_8bit', '--lossy_transparent'],
      jpegRecompress: ['--strip', '--quality', 'medium', '--min', 40, '--max', 80],
      mozjpeg: ['-optimize', '-progressive'],
      gifsicle: ['--optimize'],
      svgo: ['--enable', 'cleanupIDs', '--disable', 'convertColors']
    }))
    .pipe(gulp.dest('./dest'));
});