gulp-html-srcset
This is a plugin for gulp-html-transform
Converts html srcsets to automatically add all your responsive images
Works very nicely with gulp-srcset
Installing
Using npm
$ npm install --save gulp-html-srcset
Using yarn
$ yarn add gulp-html-srcset
Usage
gulpfile.js
const { transform } = require('gulp-html-transform')
const { htmlSrcset } = require('gulp-html-srcset')
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(transform(
htmlSrcset({
width: [1, 720],
format: ['webp', 'jpg'],
}),
))
.pipe(gulp.dest('dist'))
})
Html in:
<img srcset="image.jpg 1200w">
Html out:
<img srcset="image.webp 1200w, image.jpg 1200w, image@720w.webp 720w, image@720w.jpg 720w">
API
htmlSrcSet({
width: [1, 720],
format: ['webp', 'jpg'],
prefix: '@',
postfix: 'w'
})