Novel Planetary Movement

    gulp-tmtsprite

    0.0.23 • Public • Published

    gulp-tmtsprite NPM version devDependency Status

    Automatically generate sprites image and CSS.
    (with retina @2x, @3x supported)

    NPM Home Page: https://www.npmjs.com/package/gulp-tmtsprite

    Install

    Install with NPM:

    npm install gulp-tmtsprite --save
    npm install gulp-if --save

    Usage

    gulpfile.js

    var gulpif = require('gulp-if');
    var tmtsprite = require('gulp-tmtsprite');
     
    gulp.src('./src/css/style-*.css')
        .pipe(tmtsprite())
        .pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));
            

    Options Custom your slice image path

    var gulpif = require('gulp-if');
    var tmtsprite = require('gulp-tmtsprite');
     
    gulp.src('./src/css/style-*.css')
        .pipe(tmtsprite({slicePath: '../slice'}))
        .pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));
     

    Result

    CSS In -> style-index.less

    .icon-test {
        width: 32px;
        height: 32px;
        background-image: url(../slice/test.png);
    }

    Tips: try gulp-LazyImageCSS if you are too lazy to type image width / height and more.

    CSS Out -> style-index.css

    .icon-test {
        background-image: url(../sprite/style-index.png);
    }
     
    // Retina 2x supported
    @media only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min--moz-device-pixel-ratio: 2), 
    only screen and (-webkit-min-device-pixel-ratio: 2.5), 
    only screen and (min-resolution: 240dpi) {
    .icon-test { 
        background-image:url("../sprite/style-index@2x.png");
        background-position: -36px -66px;
        background-size: 32px;
    }
    }

    Tips: Retina 3x is ready based on image name, like icon-xxx@3x.png with @3x string inside.


    Image In -> ./slice/*.png

    image-in

    Image Out -> ./sprite/style-index.png

    image-out

    Tips: 3x sprite is an option when needed.

    Know Issues

    • 2x slice images' size should be even number, like 24x26@2x.png not 23x27@2x.png

    Release History

    • 0.0.21 Fix replacing of slice refference in different quote style
    • 0.0.14 Retina @3x supported
    • 0.0.12 @2x image background-postion fixed
    • 0.0.10 Duplicate slice using supported
    • 0.0.1 First Release

    Team & License

    Install

    npm i gulp-tmtsprite

    DownloadsWeekly Downloads

    9

    Version

    0.0.23

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • littledu
    • willerce