Transforms some html using transformer functions
$ yarn add gulp-html-transform
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
: Expandssrcset
in 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')
}