Gulp plugin abraia gulp release

The Abraia Gulp plugin enables an easy task automation of image and video optimization workflows for ecommerce and web. It integrates the service to perfectly optimize all your short videos (up to 5 min) and 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 from settings login to the console 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 width of each variant and the renaming policy.

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'))
})

The output name policies are defined with a syntax like Javascript ES6 template literals without $ symbol. The input file name and extension are defined as the name and ext variables. Thus:

  • To create an output subfolder you just need to prefix the name variable with the subfolder name (e.g. '750/{name}.{ext}').
  • To rename the output you can easily suffix the name variable (e.g. `{name}-thumbnail.{ext}).
  • To change the file format or to force an image type, you can replace the ext variable with the image type extension (e.g. {name}.webp).

Branding

Now it is very easy to automate branding and editing operations creating actions with the WYSIWYG editor from the the web console.

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

Video

Initial support for video optimization has been added. You can now optimize high quality short videos (up to 5 minutes) with a maximum file size of 100MB.

gulp.task('variants', () => {
  return gulp.src('videos/*.mp4')
    .pipe(abraia([
      { height: 720, output: '{name}-720p.{ext}' }
    ]))
    .pipe(gulp.dest('output'))
})