gulp-picture-html

> Gulp extension, replace html element to with gulp-picture-html

Install



$ npm install gulp-picture-html --save-dev





Usage



Use this into your

gulpfile.js

:



$3

js

const gulp = require('gulp')

const pictureHTML = require("gulp-picture-html")



function html() {

  return src('source/*.html')

    .pipe(pictureHTML())

    .pipe(gulp.dest('dist/'))

}



exports.html = html;

$3

js

// …

.pipe(pictureHTML(      

  // options below default:

  {

    extensions : ['.jpg', '.png', '.jpeg'], // image file extensions for which we create 'picture'

    source : ['.avif', '.webp'], // create 'source' with these formats   

    noPicture : ['no-picture'],  // if we find this class for the 'img' tag, then we don't create a 'picture' (multiple classes can be set)

    noPictureDel : false // if 'true' remove classes for 'img' tag given in 'noSource:[]'

  }

))

//...



Example

$3

html

$3

html



$3

For now, you can still use the format in it's almost complete glory with the native

Install

$ npm install gulp-picture-html --save-dev

Usage

Use this into your

$3

js
const gulp = require('gulp')
const pictureHTML = require("gulp-picture-html")

function html() {
return src('source/*.html')
.pipe(pictureHTML())
.pipe(gulp.dest('dist/'))
}

exports.html = html;

$3

js
// …
.pipe(pictureHTML(
// options below default:
{
extensions : ['.jpg', '.png', '.jpeg'], // image file extensions for which we create 'picture'
source : ['.avif', '.webp'], // create 'source' with these formats
noPicture : ['no-picture'], // if we find this class for the 'img' tag, then we don't create a 'picture' (multiple classes can be set)
noPictureDel : false // if 'true' remove classes for 'img' tag given in 'noSource:[]'
}
))
//...

Example

$3

html

$3

html

$3

For now, you can still use the format in it's almost complete glory with the native

element in HTML. Why, you may ask? Well, the