/gulp-html-transform

gulp plugin to transform html

Primary LanguageTypeScriptMIT LicenseMIT

gulp-html-transform

NPM version Node version Dependency status

Transforms some html using transformer functions

Installing

$ yarn add gulp-html-transform

Plugins

  • insertFA: transforms <fa-icon> into Font Awesome icons.
  • insertGA: Inserts google analytics into <head>.
  • lqip: Replaces images with low quality image placeholders. WARNING: Adds html, so may mess with your css selectors or other things.
  • minifyInlineJson: Minifies inline JSON.
  • htmlSrcset: Expands srcset in your <img>.

Usage

gulpfile.js

const { transform, htmlSrcset, lqip } = require('gulp-html-transform')

gulp.task('html', () => {
  gulp.src('src/**/*.html')
  .pipe(transform(
    htmlSrcset({
      width: [1, 720],
      format: ['webp', 'jpg'],
    }),
    lqip({
      base: __dirname,
    })
  ))
  .pipe(gulp.dest('dist'))
})

API

transform accepts any number of transformer functions.

A transformer function takes a Cheerio Object as input (it's pretty much like jquery), and returns a Promise when done.

// Example transformer function
const transformer = async ($) => {
  $('img').src = 'https://i.imgur.com/HObogkM.gif'
}