gulp-retinate

Gulp plugin to automate scaling of images to target lower resolution or non-retina screens.

This project is based on gulp-retinize. Main changes include the use of the Sharp image library instead of GM to resize images, reducing dependencies.

Installation

npm install gulp gulp-retinate

Usage

const gulp = require('gulp');
const retinate = require('gulp-retinate');

/* Default options */
const OPTIONS = {
  inputFlags: { 1: '@1x', 2: '@2x', 4: '@4x' },
  inputPlace: 'endsWith',
  outputFlags: { 1: '', 2: '@2x', 4: '@4x' },
  outputPlace: 'append',
  rounding: 'ceil',
  scaleUp: false
};

gulp.task('default', function () {
  return gulp.src('./src/**/*.{png,jpg,jpeg}')
    .pipe(retinate(OPTIONS))
    .on('error', e => console.log(e.message))
    .pipe(gulp.dest('./dest/'));
});

Options

inputFlags

The flags the plugin will use to detect which source images should be resized. Key is output resolution, value is flag.

• Since: 1.0.0
• Property is Optional
• Default value is: { 1: '@1x', 2: '@2x', 4: '@4x' }
• Validation rules:
  • Must be a hash Object

inputPlace

Whether to look for the flags at the beginning of the source image filename:

• Since: 1.0.0
• Property is Optional
• Default value is: endsWith
• Validation rules:
  • Must be either startsWith (e.g.: @2ximage) or endsWith (e.g.: image@2x)

outputFlags

The flags the plugin will append (or prepend) to the destination image files. Key is output resolution, value is flag.

• Since: 1.0.0
• Property is Optional
• Default value is: { 1: '', 2: '@2x', 4: '@4x' }
• Validation rules:
  • Must be a hash Object

outputPlace

Whether to output the flags at the beginning of the destination image filename:

• Since: 1.0.0
• Property is Optional
• Default value is: append
• Validation rules:
  • Must be either prepend (e.g.: @2ximage) or append (e.g.: image@2x)

rounding

Math function to round partial resolutions up (ceil) or down (floor). For example, an @2x source image with dimensions of 35x35 will be scaled to 18x18 by default.

• Since: 1.0.0
• Property is Optional
• Default value is: ceil
• Validation rules:
  • Must be either ceil (to round up) or floor (to round down)

scaleUp

Whether to scale images up if they are only included at a lower resolution in their source files.

If true, an images directory that includes only [email protected] will output destination files [email protected] (scaled up), [email protected] and image.png.

The output resolutions depend on the value of outputFlags.

• Since: 1.0.0
• Property is Optional
• Default value is: value
• Validation rules:
  • Must be a valid Boolean