在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):Otouto/gulp-spritesmith开源软件地址(OpenSource Url):https://github.com/Otouto/gulp-spritesmith开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-spritesmith
UsageFirst, install npm i -D gulp-spritesmith Then, add it to your var spritesmith = require("gulp-spritesmith");
var gulpif = require("gulp-if");
gulp.task('sprites', function () {
return gulp.src('./src/**/png/*.png')
.pipe(tasks.spritesmith({
imgName: 'sprite.png',
styleName: 'sprite.css',
imgPath: '../img/sprite.png'
}))
.pipe(gulpif('*.png', gulp.dest('./dist/img/')))
.pipe(gulpif('*.css', gulp.dest('./dist/css/')));
}); If you need few grouped sprites, you should specify folder name to group by. Lets say you have following app structure, with several skins:
Then just set gulp.task('sprites', function () {
return gulp.src('./src/**/png/*.png')
.pipe(tasks.spritesmith({
imgName: 'sprite.png',
styleName: 'sprite.css',
imgPath: '../img/sprite.png',
groupBy: 'skin'
}))
.pipe(gulpif('*.png', gulp.dest('./dist/img/')))
.pipe(gulpif('*.css', gulp.dest('./dist/css/')));
}); and you`ll get 4 sprites: sprite.basic.png, sprite.green.png, sprite.dark.png, sprite.light.png. And the same for css. APIspritesmith(options)options.imgNameType: Set name for sprite img file. options.styleNameType: Set name for sprite styles file. options.imgPathType: Set relative path to sprite img, which will be used in styles file. options.styleTemplateType: Path to mustache tmpl file, to format output styles file. Set relative path to sprite img, which will be used in styles file. options.groupByType: Set if you want to get grouped sprites. options.algorithmType: Set packing algorithm, top-down/left-right/diagonal/alt-diagonal/binary-tree are available. options.paddingType: Set padding in pixels to use between images Changelog0.0.2 - Dont save sprite files inside task anymore. 0.0.1 - initial version License |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论