Neapolitan Pizza Margherita

    This package has been deprecated

    Author message:

    DEPRECATED

    gulp-sugar-srcset

    0.4.1 • Public • Published

    DEPRECATED

    Please use posthtml-sugar-srcset.
    This plugin internally uses cheerio, but it does not guarantee that it is the same HTML.

    gulp-sugar-srcset

    npm version Build Status

    Sugar for srcset attributes of the image tag.

    Install

    $ npm install --save-dev gulp-sugar-srcset
    

    How it works

    <img src="path/to/image.png" srcset="2x, 3x" alt="Text representation of image.">
    <img src="path/to/image@2x.png" alt="Text representation of image.">
     
    <img src="path/to/image-320w.png" sizes="100vw" srcset="320w, 640w, 980w" alt="Text representation of image.">
     
    <picture>
      <source src="path/to/filename-large.png" media="(min-width: 1000px)" srcset="1x, 2x, 3x">
      <source src="path/to/filename-medium.png" media="(min-width: 800px)" srcset="1x, 2x, 3x">
      <img src="path/to/filename-small.png" srcset="1x, 2x, 3x" alt="Text representation of image.">
    </picture>

    Output:

    <img src="path/to/image.png" srcset="path/to/image@2x.png 2x,path/to/image@3x.png 3x" alt="Text representation of image.">
    <img src="path/to/image.png" srcset="path/to/image@2x.png 2x" alt="Text representation of image.">
     
    <img src="path/to/image-320w.png" sizes="100vw" srcset="path/to/image-320w.png 320w,path/to/image-640w.png 640w,path/to/image-980w.png 980w" alt="Text representation of image.">
     
    <picture>
      <source media="(min-width: 1000px)" srcset="path/to/filename-large.png,path/to/filename-large@2x.png 2x,path/to/filename-large@3x.png 3x">
      <source media="(min-width: 800px)" srcset="path/to/filename-medium.png,path/to/filename-medium@2x.png 2x,path/to/filename-medium@3x.png 3x">
      <img src="path/to/filename-small.png" srcset="path/to/filename-small@2x.png 2x,path/to/filename-small@3x.png 3x" alt="Text representation of image.">
    </picture>

    Usage

    const gulp = require('gulp');
    const srcset = require('gulp-sugar-srcset');
     
    gulp.task('sugar-srcset', () =>
      gulp.src(html)
        .pipe(srcset())
        .pipe(gulp.dest(output))
    );

    Options

    It is the quickest to refer to test case.

    resolution

    Type: Object

    resolution.src

    Type: boolean
    Default: true

    Do not check for display pixel ratio when the false.

    resolution.srcset

    Type: boolean
    Default: true

    Do not check for display pixel ratio when the false.

    resolution.suffix

    Type: string
    Default: @[match]x

    resolution.pixelRatio

    Type: Array
    Default: [1, 2, 3, 4]

    src based filtering list.

    resolution.skip1x

    Type: boolean

    If srcset is 1x, omitted.

    resolution.skip1xSuffix

    Type: boolean

    resolution.srcReplace

    Type: number
    Default: 1

    responsive

    Type: Object

    responsive.src

    Type: boolean
    Default: true

    responsive.srcset

    Type: boolean
    Default: false

    responsive.width

    Type: Array
    Default []

    Only be used if responsive.src: true.

    ex)

    srcset({
        responsive: { src: true },
        responsiveWidth: [320, 640]
    })
    responsive.suffix

    Type: string
    Default: -[match]w

    responsive.srcReplace

    Type: number
    Default: -1

    removeSrc

    Type: boolean
    Default: false

    If true, removing the src attribute from the image tag

    replace

    Type: Object
    Default: {}

    Is the alias that can be used in sizes and media.
    Valid only in the source tag with a picture tag to the parent.

    ex)

    replace({
        defaultSizes: '50vw',
        sp: '(max-width: 320px) 100vw',
        pc: '320px'
        large: '(max-width: 1600px)',
        medium: '(max-width: 900px)'
    })

    Before

    <img src="path/to/image.png" srcset="320w, 640w" alt="Text representation of image.">
    <img src="path/to/image.png" sizes="sp, pc" srcset="320w, 640w" alt="Text representation of image.">
    <picture>
      <source src="image-large.png" media="large">
      <source src="image-medium.png" media="medium">
      <img src="image.png" alt="Text representation of image." srcset="2x, 3x, 4x">
    </picture>

    After

    <img src="path/to/image.png" srcset="path/to/image-320w.png 320w,path/to/image-640w.png 640w" alt="Text representation of image." sizes="50vw">
    <img src="path/to/image.png" sizes="(max-width: 320px) 100vw,320px" srcset="path/to/image-320w.png 320w,path/to/image-640w.png 640w" alt="Text representation of image.">
    <picture>
      <source media="(max-width: 1600px)" srcset="image-large.png,image-large@2x.png 2x,image-large@3x.png 3x,image-large@4x.png 4x">
      <source media="(max-width: 900px)" srcset="image-medium.png,image-medium.png@2x 2x,image-medium.png@3x 3x,image-medium.png@4x 4x">
      <img src="image.png" alt="Text representation of image." srcset="image@2x.png 2x,image@3x.png 3x,image@4x.png 4x">
    </picture>

    sourceSrc

    Type: boolean
    Default: true

    If you true, to use the src attribute of the source tag.
    After use, delete it.

    Keywords

    none

    Install

    npm i gulp-sugar-srcset

    DownloadsWeekly Downloads

    2

    Version

    0.4.1

    License

    MIT

    Last publish

    Collaborators

    • tsuguya