{"id":16440468,"url":"https://github.com/icai/gulp-lazysprite","last_synced_at":"2026-05-17T14:36:57.265Z","repository":{"id":57258103,"uuid":"61647646","full_name":"icai/gulp-lazysprite","owner":"icai","description":"Plugin that generate sprites from your stylesheets.","archived":false,"fork":false,"pushed_at":"2016-10-24T02:52:54.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-29T22:06:40.264Z","etag":null,"topics":["gulp","gulp-plugin","sprites","spritesmith","stylesheets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-21T15:59:44.000Z","updated_at":"2016-10-24T02:52:55.000Z","dependencies_parsed_at":"2022-08-25T21:23:46.609Z","dependency_job_id":null,"html_url":"https://github.com/icai/gulp-lazysprite","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/icai/gulp-lazysprite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icai%2Fgulp-lazysprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icai%2Fgulp-lazysprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icai%2Fgulp-lazysprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icai%2Fgulp-lazysprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icai","download_url":"https://codeload.github.com/icai/gulp-lazysprite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icai%2Fgulp-lazysprite/sbom","scorecard":{"id":479591,"data":{"date":"2025-08-11","repo":{"name":"github.com/icai/gulp-lazysprite","commit":"7fa05724a17c20b3603c7bb8318b0132c399cbd0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/28 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T16:15:57.962Z","repository_id":57258103,"created_at":"2025-08-19T16:15:57.962Z","updated_at":"2025-08-19T16:15:57.962Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33142470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","gulp-plugin","sprites","spritesmith","stylesheets"],"created_at":"2024-10-11T09:12:10.368Z","updated_at":"2026-05-17T14:36:57.228Z","avatar_url":"https://github.com/icai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-lazysprite\r\n\r\n[![NPM](https://nodei.co/npm/gulp-lazysprite.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/gulp-lazysprite/)\r\n\r\n Better suit for `gulp-sass` and `node-sass-asset-functions`.\r\n\r\n\r\n\u003e Generate sprites from stylesheets.\r\n\r\nPlugin that generate sprites from your stylesheets (using [spritesmith](https://github.com/Ensighten/spritesmith)) and then updates image references.\r\n\r\n## Getting started\r\n\r\nIf you haven't used [gulp](http://gulpjs.com) before, be sure to check out the [Getting Started](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md) guide.\r\n\r\nInstall with [npm](https://npmjs.org/package/gulp-lazysprite)\r\n\r\n```\r\nnpm install gulp-lazysprite --save-dev\r\n```\r\n\r\n## Overview\r\n\r\nSprite generator is a gulp task, which accepts options object and returns two streams for style and image piping.\r\n\r\nHere quick example of simple way usage:\r\n\r\n```javascript\r\nvar gulp = require('gulp');\r\nvar sprite = require('gulp-lazysprite');\r\n\r\ngulp.task('sprites', function() {\r\n    var spriteOutput;\r\n\r\n\tspriteOutput = gulp.src(\"./src/css/*.css\")\r\n\t\t.pipe(sprite({\r\n            baseUrl:         \"./src/image\",\r\n            spriteSheetName: \"sprite.png\",\r\n            spriteSheetPath: \"/dist/image\"\r\n\t\t}));\r\n\r\n    spriteOutput.css.pipe(gulp.dest(\"./dist/css\"));\r\n    spriteOutput.img.pipe(gulp.dest(\"./dist/image\"));\r\n});\r\n```\r\n\r\nSass or Less:\r\n\r\n```javascript\r\ngulp.task('style',function(){\r\n    var spriteOutput;\r\n    spriteOutput = gulp.src(srcPath+'/css/**/*.@(scss|css)')\r\n    .pipe(sass()) // .pipe(less())\r\n    .pipe(spriter({\r\n        baseUrl: \"./\",\r\n        spriteSheetName:\"[name].sprite.png\",// repalce `[name]` to filename\r\n        spriteSheetPath: \"../images/sprite\",\r\n        filter: [\r\n            function(image) {\r\n                return !(image.url.indexOf(\"?__sprite\") === -1);  \r\n            }\r\n        ]\r\n        verbose:true\r\n    }))\r\n\r\n    spriteOutput.css.pipe(gulp.dest(distPath+'/css'));\r\n    spriteOutput.img.pipe(gulp.dest(distPath+'/images/sprite'));\r\n});\r\n\r\n```\r\n\r\n\r\nor handle sprites first.\r\n\r\n```javascript\r\n\r\nvar merge = require('merge-stream');\r\n\r\ngulp.task('csssprite', ['copyscss'], function() {\r\n    let spriteOutput;\r\n    spriteOutput = gulp.src(config.scss + '/*.@(scss|css)')\r\n        .pipe(plumber())\r\n        .pipe(spriter({\r\n            baseUrl: \"./\",\r\n            spriteSheetName:\"[name].sprite.png\",// repalce `[name]` to filename\r\n            spriteSheetPath: \"../images/sprite\",\r\n            filter: [\r\n                function(image) {\r\n                    return !(image.url.indexOf(\"?__sprite\") === -1);  \r\n                }\r\n            ]\r\n            verbose:true\r\n        })); // css sprite gen\r\n    spriteOutput.css.pipe(gulp.dest(config.destScss));\r\n    spriteOutput.img.pipe(gulp.dest(config.destImages));\r\n    return merge(spriteOutput.css, spriteOutput.img);\r\n})\r\n\r\n// see the parameter `options.imageUrl`\r\n\r\n// after that handle sass/less\r\n\r\n```\r\n\r\n\r\nOf course you may need to have more flexible configuration for spriting. And this plugin can give you something more!\r\n\r\n## Options\r\n\r\nSprite generator options is an object, that mix [spritesmith](https://github.com/Ensighten/spritesmith)\r\noptions and plugin specific options.\r\n\r\n**Spritesmith parameters** *(all is optional)*:\r\n\r\nProperty     | Necessary | Type     | Plugin default value\r\n-------------|-----------|----------|---------------------\r\n[engine]     | no        | `String` | `\"pixelsmith\"`\r\n[algorithm]  | no        | `String` | `\"top-down\"`\r\n[padding]    | no        | `Number` | `0`\r\n[engineOpts] | no        | `Object` | `{}`\r\n[exportOpts] | no        | `Object` | `{}`\r\n\r\nMore detailed explanation you can find on the [official page of spritesmith](https://github.com/Ensighten/spritesmith).\r\n\r\n**Plugin options** are:\r\n\r\nProperty          | Necessary | Type         | Plugin default value\r\n------------------|-----------|--------------|-----------\r\nspriteSheetName   | **yes**   | `String`     | `null`\r\n[spriteSheetPath] | no        | `String`     | `null`\r\n[styleSheetName]  | np        | `String`     | `null`\r\n[baseUrl]         | no        | `String`     | `\"./\"`\r\n[imageUrl]        | no        | `Object`     | `{imagesPath: './images'}`\r\n[retina]          | no        | `Boolean`    | `true`\r\n[filter]          | no        | `Function[]` | `[]`\r\n[groupBy]         | no        | `Function[]` | `[]`\r\n[accumulate]      | no        | `Boolean`    | `false`\r\n[verbose]         | no        | `Boolean`    | `false`\r\n\r\nMore detailed explanation is below.\r\n\r\n#### options.spriteSheetName\r\nType: `String`\r\nDefault value: `null`\r\n\r\nThe one and last necessary parameter. Defines which *base* will have the name of the output sprite. Base means that if you will\r\ngroup your sprites by some criteria, name will change.\r\n\r\n#### options.spriteSheetPath\r\nType: `String`\r\nDefault value: `null`\r\n\r\nCan define relative path of references in the output stylesheet.\r\n\r\n#### options.styleSheetName\r\nType: `String`\r\nDefault value: `null`\r\n\r\nDefines the name of the output stylesheet.\r\n\r\n#### options.baseUrl\r\nType: `String`\r\nDefault value: `./`\r\n\r\nDefines where to find relatively defined image references in the input stylesheet.\r\n\r\n#### options.imageUrl\r\nType: `Object`\r\nDefault value: `{imagesPath: './images'}`\r\n\r\nDefines imagesPath for sass (`image-url`) where to find relatively defined image references in the input stylesheet.\r\n\r\n#### options.retina\r\nType: `Boolean`\r\nDefault value: `true`\r\n\r\nDefines whether or not to search for retina mark in the filename. If `true` then it will look for `@{number}x` syntax.\r\nFor example: `image@2x.png`.\r\n\r\n#### options.filter\r\nType: `Function[]`, `Function`\r\nDefault value: `[]`\r\n\r\nDefines which filters apply to images found in the input stylesheet. Each filer called with image object, explained below. Each filter must return `Boolean` or\r\n[thenable `Promise`](https://github.com/promises-aplus/promises-spec), that will be resolved with `Boolean`. Each filter\r\napplies in series.\r\n\r\n#### options.groupBy\r\nType: `Function[]`, `Function`\r\nDefault value: `[]`\r\n\r\nDefines logic of how to group images found in the input stylesheet. Each grouper called with image object, explained below. Each filter must return `String|Null` or\r\n[thenable `Promise`](https://github.com/promises-aplus/promises-spec), that will be resolved with `String|Null`. Each grouper\r\napplies in series.\r\n\r\n#### options.accumulate\r\nType: `Boolean`\r\nDefault value: `false`\r\n\r\nTells sprite-generator to accumulate images from multiple stylesheets. This mean, that images, found in stylesheet `A.css` and `B.css` will be accumulated and grouped in common sprite.\r\n\u003e Note, that if `options.accumulate == true` then `options.styleSheetName` will not be used.\r\n\r\n#### options.verbose\r\nType: `Boolean`\r\nDefault value: `false`\r\n\r\n### Filtering and grouping\r\n\r\nSprite generator can filter and group images from the input stylesheet.\r\n\r\nBuilt in filters:\r\n- based on meta `skip` boolean flag;\r\n- based on `fs.exists` method to check, whether file exists or not.\r\n\r\nBuilt in groupers:\r\n- based on @2x image naming syntax, will produce `sprite.@{number}x.png` naming. (`@{number}x` image group).\r\n\r\nYou can of course define your own filters or groupers. It will all based on main argument - the image object.\r\n\r\n### The Image object\r\n\r\nEvery filter or grouper is called with `image` object, that have these properties:\r\n\r\nProperty    | Type       | Explanation\r\n------------|------------|---------------------\r\nreplacement | `String`   | String, found by pattern in the input stylesheet\r\nurl         | `String`   | Url for image fount in the input stylesheet\r\npath        | `String`   | Resolved path for the image\r\ngroup       | `String[]` | List of string, representing groups of image\r\nisImageUrl  | `Boolean`  | Boolean flag of `image-url`\r\nisRetina    | `Boolean`  | Boolean flag of retina image (@2x syntax)\r\nretinaRatio | `Number`   | Ratio of retina image (@2x, @3x =\u003e 2, 3)\r\nmeta        | `Object`   | Object of meta properties, defined in doc block (will explain below).\r\n\r\n\r\n### Doc block meta properties\r\n\r\nYou can also define some properties for the filters and groupers in doc block via this syntax:\r\n\r\n`{css definition} /* @meta {valid json} */`\r\n\r\nExample:\r\n\r\n```css\r\n\r\n.my_class {\r\n    background-image: url(\"/images/my.png\"); /* @meta {\"sprite\": {\"skip\": true}} */\r\n}\r\n\r\n```\r\n\r\n***Important!*** Only object in `sprite` property of meta will be available in image object for filters and groupers.\r\n\r\n\r\n### Flexible example\r\n\r\n```javascript\r\n\r\nvar gulp   = require('gulp'),\r\n    sprite = require('gulp-lazysprite'),\r\n    Q      = require('q'),\r\n    sizeOf = require('image-size');\r\n\r\ngulp.task('sprites', function() {\r\n    var spriteOutput;\r\n\r\n\tspriteOutput = gulp.src(\"./src/css/*.css\")\r\n\t\t.pipe(sprite({\r\n            baseUrl:         \"./\",\r\n            spriteSheetName: \"sprite.png\",\r\n            spriteSheetPath: \"/dist/image\",\r\n            styleSheetName:  \"stylesheet.css\",\r\n\r\n            filter: [\r\n                // this is a copy of built in filter of meta skip\r\n                // do not forget to set it up in your stylesheets using doc block /* */\r\n                function(image) {\r\n                    return !image.meta.skip;\r\n                }\r\n            ],\r\n\r\n            groupBy: [\r\n                // group images by width\r\n                // useful when building background repeatable sprites\r\n                function(image) {\r\n                    var deferred = Q.defer();\r\n\r\n                    sizeOf(image.path, function(err, size) {\r\n                        deferred.resolve(size.width.toString());\r\n                    });\r\n\r\n                    return deferred.promise;\r\n                }\r\n            ]\r\n\t\t});\r\n\r\n    spriteOutput.css.pipe(gulp.dest(\"./dist/css\"));\r\n    spriteOutput.img.pipe(gulp.dest(\"./dist/image\"));\r\n});\r\n\r\n```\r\n\r\n## License\r\n\r\nLicensed under the MIT license.\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficai%2Fgulp-lazysprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficai%2Fgulp-lazysprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficai%2Fgulp-lazysprite/lists"}