Transforms some html using transformer functions
$ yarn add gulp-html-transforminsertFA: 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: Expandssrcsetin your<img>.
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({
method: 'primaryColor',
}),
),
)
.pipe(gulp.dest('dist'))
})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').attr('src', 'https://i.imgur.com/HObogkM.gif')
}