gulp task for creating a image sprite and stylesheets(with spritesmith).
you should install npm, gulp first.
npm install
gulp
or gulp --path [imagePath] --name [outputSpriteName]
.
You can change gulpfile.js
to build your own requirements.
gulp.task('default', function() {
let spriteOutput;
spriteOutput = gulp.src('./images/*.png')
.pipe(sprite('sprites.png', {
baseUrl: "/images",
cssPath: '/dist',
spriteSheetName: "sprites.png",
spriteSheetPath: "/dist/image"
})).pipe(gulp.dest('./dist/'));
});
sprite(sprite-name, options)
The name of the sprite file.
options mix spritesmith options and plugin specific options.
you can find more spritesmith options here.
default: 'top-down' description: Optional algorithm to pack images with
default: '10' description: Padding to use between images
Plugin options
default: 'style.css' description: output css file name