/gulp-add-source-picture

Add sources and width to picture programmatically

Primary LanguageJavaScript

gulp-add-source-picture

Options

you must to indicate the folder which you save the images

Install

npm install gulp-add-source-picture

Usage

var gulp = require('gulp');
var addSource = require('gulp-add-source-picture');

gulp.task('replace', function () {
    return gulp.src('files/*.html')
        .pipe(addSource('images'))
        .pipe(gulp.dest('dist'));
});

You put html in:

<picture>
    <img src="../images/image.jpg" alt="example">
</picture>

And get html out:

<picture>
    <source type="image/webp" srcset="../images/image.webp 583w,
                    ../images/image@1,5x.webp 875w,
                    ../images/image@2x.webp 1167w,
                    ../images/image@3x.webp 1750w">

    <source srcset="../images/image.jpg 583w,
                    ../images/image@1,5x.jpg 875w,
                    ../images/image@2x.jpg 1167w,
                    ../images/image@3x.jpg 1750w">

    <img src="../images/image.jpg" alt="example">
</picture>