npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-sprity

v0.2.5

Published

A gulp plugin for generating css sprite

Downloads

15

Readme

gulp-sprity

NPM version Build Status

A gulp plugin to convert a set of images into a spritesheet.

Usage

Firstly, install gulp-sprity as a development dependency:

npm install gulp-sprity --save-dev

Then, add it into your gulpfile.js:

convert by default mode, background image url with end of #sprite:

const cleanCSS = require('gulp-clean-css');
const gulpif = require('gulp-if');
const sprity = require('gulp-sprity');
const path = require('path');

function fileTypeOf(type) {
    return function (file) {
        return path.extname(file.path) === '.' + type;
    };
}

gulp.src("src/css/foo.css")
    .pipe(sprity())
    .pipe(gulpif(fileTypeOf('css'),cleanCSS()))
    .pipe(gulp.dest("build"));

input

/*foo.css*/
.icon {
    background-image: url('icon.png#sprite');
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

output

/*foo.css*/
.icon {
    background-image: url('sprites/foo_sprite.png');
    background-repeat: no-repeat;
    background-position: -334px 0
    width: 100px;
    height: 100px;
}

** imagePixelRatio **

gulp.src("src/css/foo.css")
    .pipe(sprity({imagePixelRatio:2}))
    .pipe(gulpif(fileTypeOf('css'),cleanCSS()))
    .pipe(gulp.dest("build"));

input

/*foo.css*/
.icon {
    background-image: url('icon.png#sprite');
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
}

output

/*foo.css*/
.icon {
    background-image: url('sprites/foo_sprite.png');
    background-repeat: no-repeat;
    background-position: -300px 40px; //ps: original position is -600px and 80px
    background-size: 400px 300px;  //ps: original size is 800px and 600px
    width: 100px;
    height: 100px;
}

spritePrefix usage:

const cleanCSS = require('gulp-clean-css');
const gulpif = require('gulp-if');
const sprity = require('gulp-sprity');
const path = require('path');

function fileTypeOf(type) {
    return function (file) {
        return path.extname(file.path) === '.' + type;
    };
}

gulp.src("src/css/foo.css")
    .pipe(sprity({
        spritePrefix: 'demo/css/sprites/'
    }))
    .pipe(gulpif(fileTypeOf('css'),cleanCSS()))
    .pipe(gulp.dest("build"));

the same as:

sprity({
        backgroundUrlHandler: function(backgroungImageUrl, imgFilePath) {
            return 'demo/css/' + backgroungImageUrl;
        },
        spritePathReplacer: function(imgFilePath, backgroungImageUrl) {
            return 'demo/css/' + backgroungImageUrl;
        }
    })

output like:

/*foo.css*/
.icon {
    background-image: url('demo/css/sprites/foo_sprite.png'); /*image file will be saved at build/demo/css/sprites/foo_sprite.png*/
    background-repeat: no-repeat;
    background-position: -334px 0
    width: 100px;
    height: 100px;
}

Parameters

keepInRoot

Type: bool default undefined

To mark whether put the image files into the same directory of image file path. For example, one file path is /Users/demo/src/images/dir1/img1.png. Another one is /Users/demo/src/images/dir2/img2.png. Then the spriter will be saved in /Users/demo/src/images.

spriteMark

Type: String default #sprite

To mark which image should be merged into a spritesheet.

spritePrefix

Type: String default: undefined

To add the prefix directory path of spritesheet and save the sprited image to the prefix directory.

imagePixelRatio

Type: Integer default undefined

To scale the background-size and background-position of the spriter for HD images.

spriteFileNameReplacer

Type: Function default: undefined

Parameters:

  • fileName: the file name of the original css file with no extname.

To change the file name of the sprited image.

backgroundUrlHandler

Type: Function default undefined

Parameters:

  • imgFilePath: origin saved path of spritesheet
  • filePath: the file path of original file

To handle the url of background-image, output what you want to insert into css file.

spritePathReplacer

Type: Function default undefined

Parameters:

  • dir: backgroung image url which will be injected into css file
  • imgFilePath: origin saved path of spritesheet
  • filePath: the file path of original file

To replace the path of a spritesheet where you want to save the spritesheet.

License

MIT License