gulp
Compressie zonder beeldverlies (met gulp-imagemin)

Angular 2 AngularJS CSS HTML JavaScript Laravel Node.js PHP React TypeScript
Zoeken…


Syntaxis

  1. imagemin ([plug-ins], {options})

parameters

Argument Beschrijving
sourcePath Bronmap afbeeldingen (bijvoorbeeld: /assets/images )
buildPath Bestemmingspad (bijvoorbeeld: /static/dist/ )

Opmerkingen

Het eerste argument voor de constructemin- imagemin is de plugin-array. Standaard worden de volgende plug-ins gebruikt: [imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()]

Tweede argument zijn opties. In het bovenstaande voorbeeld worden de volgende opties gebruikt: 

{
  progressive: true,
  interlaced: true,
  svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
}

Die zijn volledig optioneel.

progressive wordt gebruikt door imagemin-jpegtran .

interlaced wordt gebruikt door imagemin-gifsicle .

removeUnknownsAndDefaults en cleanupIDs worden gebruikt door imagemin-svgo .

Installatie en gebruik

Afhankelijkheidsinstallatie ( https://www.npmjs.com/package/gulp-imagemin ) 

$ npm install --save-dev gulp-imagemin

Gebruik 

/*
 * Your other dependencies.
 */

var imagemin = require('gulp-imagemin');

/*
 * `gulp images` - Run lossless compression on all the images.
 */
gulp.task('images', function() {
  return gulp.src(sourcePath) // e.g. /assets/images
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(buildPath + 'images')); // e.g. /static/dist/
});


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow