Drupal srcset in static HTML pages: gulp asset build pipeline

Created on August 4, 2017 by Jeremiah John
Tags: Dupal, Static HTML, gulp, srcset, assets, build, Planet Drupal
 

Client has a bunch of static landing pages that are mobile-friendly and need to remain that way.

But what is to be done about srcset? Read on, oh reader, for the solution.

First, I created a gulp build task which makes a bunch of different sizes.

Install dependencies like this:
npm install -D gulp-load-plugins gulp-responsive sharp

The task looks like this:

var $ = require('gulp-load-plugins')(); // used to load gulp-srcset
 
var themeRoot = '../docroot/sites/all/themes/mytheme';
var imageInputDir = themeRoot + '/images-uncompressed';
var imageOutputDir = themeRoot + '/images/srcset';
 
gulp.task('images', function() {
  gulp.src(imageInputDir + '/*')
    .pipe($.responsive({
      '*': [{
        width: 100,
        rename: { suffix: '-100w' },
      },
        {
        width: 150,
        rename: { suffix: '-150w' },
      }, {
        width: 200,
        rename: { suffix: '-200w' },
      }, {
        width: 250,
        rename: { suffix: '-250w' },
      }, {
        width: 320,
        rename: { suffix: '-320w' },
      }, {
        width: 400,
        rename: { suffix: '-400w' },
      }, {
        width: 500,
        rename: { suffix: '-500w' },
      }, {
        width: 675,
        rename: { suffix: '-675w' },
      }, {
        width: 850,
        rename: { suffix: '-850w' },
      }, {
        width: 1000,
        rename: { suffix: '-1000w' },
      }, {
        width: 1200,
        rename: { suffix: '-1200w' },
      }, {
        width: 1400,
        rename: { suffix: '-1400w' },
      },  {
        width: 1600,
        rename: { suffix: '-1600w' },
      },  {
        width: 1800,
        rename: { suffix: '-1800w' },
      },  {
        width: 2000,
        rename: { suffix: '-2000w' },
      },  {
        width: 2200,
        rename: { suffix: '-2200w' },
      },  {
        width: 2400,
        rename: { suffix: '-2400w' },
      }, {
        // Compress, strip metadata, and rename original image
        rename: { suffix: '-original' },
      }],
    }, {
      // Global configuration for all images
      // The output quality for JPEG, WebP and TIFF output formats
      quality: 70,
      // Use progressive (interlace) scan for JPEG and PNG output
      progressive: true,
      // Zlib compression level of PNG output format
      compressionLevel: 6,
      // Strip all metadata
      withMetadata: false,
      errorOnEnlargement: false,
    }))
    .pipe(gulp.dest(imageOutputDir));
});

This task is invoked like so: gulp images. It takes the source images, and creates a bunch of output images sized and upscaled where appropriate.

Once you have that, you can use the following srcset syntax from my other blog post, part 2.

References:

About the Author

Hi. My name is Jeremiah John. I'm a sf/f writer and activist.

I just completed a dystopian science fiction novel. I run a website which I created that connects farms with churches, mosques, and synagogues to buy fresh vegetables directly and distribute them on a sliding scale to those in need.

In 2003, I spent six months in prison for civil disobedience while working to close the School of the Americas, converting to Christianity, as one does, while I was in the clink.