See gulp-html-transform for usage
This is a plugin for gulp-html-transform
Adds Low Quality Image Placeholders using lqip to your html
Using npm
$ npm install --save gulp-html-lqip
Using yarn
$ yarn add gulp-html-lqip
const path = require('path')
const { transform } = require('gulp-html-transform')
const { lqip } = require('gulp-html-lqip')
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(transform(
lqip({
base: path.join(__dirname, 'src'),
addStyles: true,
})
))
.pipe(gulp.dest('dist'))
})If you want to add the styles manually you can import index.css from the package folder and remove addStyles.
<img src="image.jpg"><div class="lqip" style="padding-top:50%;background-image:url(data:image/jpeg;base64,...">
<img src="image.jpg" onload="this.parentElement.className='lqip'">
</div>lqip({
// Required:
base: __dirname + '/src', // usually dirname plus something else, it's relative to where your files are
// Optional
query: 'img[src]', // the query to find images. Might use a class like '.lqip-image'
addStyles: boolean, // Whether you want to add a style-tag to your head. If not, you will need to import the styles manually. Defaults to false
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent