Gulp plugin abraia gulp release

The Abraia Gulp plugin enables an easy task automation of image optimization workflows using Gulp. It integrates the service to perfectly optimize all your JPEG, PNG, GIF, SVG, and WebP images.

Gulp optimization

Installation

Install Gulp and the plugin:

npm install gulp gulp-abraia gulp-cache --save-dev

Get your free API key and set the ABRAIA_KEY environment variable every time you start your terminal. (NOTE: On Windows, use set instead of export.)

export ABRAIA_KEY=your_api_key

For a persistent configuration, we recomend following the operating system recomendations. But, if you do not have any security concern, you can easily set the ABRAIA_KEY in your gulpfile.js, before importing gulp-abraia.

process.env.ABRAIA_KEY='your_api_key'

Usage

To optimize all the images in a folder (images) and stay watching for new files, you just need to add the next code to your gulpfile.js.

const gulp = require('gulp')
const cache = require('gulp-cache')
const abraia = require('gulp-abraia')

gulp.task('optimize', () => {
  return gulp.src('images/*')
    .pipe(cache(abraia()))
    .pipe(gulp.dest('output'))
})

gulp.task('watch', () => {
  gulp.watch('images/*', gulp.series('optimize'))
})
gulp watch

Options

To generate several image variants to be used in a responsive design, you just need to specify the with and the renaming policies.

gulp.task('variants', () => {
  return gulp.src('images/*')
    .pipe(cache(abraia([
      { width: 1920, output: '1920/{name}.{ext}' },
      { width: 750, output: '750/{name}.{ext}' },
      { width: 375, output: '375/{name}.{ext}' }
    ])))
    .pipe(gulp.dest('output'))
})