gulp-image中文文档|gulp-image js中文教程|解析

npm npmdoc 2年前 (2021-12-30) 392次浏览

gulp-image中文文档|gulp-image js中文教程|解析

安装命令:npm i gulp-image

吞咽图像 GitHub 操作状态

使用 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'));
});

执照

麻省理工学院© Shogo Sensui

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:gulp-image中文文档|gulp-image js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}