Utilisation de gulp.spritesmith-multi, ATTENTION: je déconseille l’utilisation de ce plugin pour créer plusieurs sprites à partir d’une tâche Gulp unique. Préférer gulp-spritesmith et l’utilisation de gulp-folders.
Ressources en ligne:
- https://stefanimhoff.de/2014/gulp-tutorial-10-generating-sprites/ – avec notamment la gestion des
:hover
- Tuto intéressant pour aller plus loin avec gulp-spritesmith: CSS Sprite Management with Gulp, Part 2.
Gulp – make one sprite per folder
Source: Gulp – make sprites by folder
Plugins: path, gulp.spritesmith, merge-stream, gulp-folders, imagemin, imagemin-pngquant ATTENTION: dans le sujet StasckOverflow, l’auteur omet le plugin gulp-folders dans la liste des paquets requis.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
gulp.task( 'sprites', folders(path.src.sprites, function (folder) { // Generate our spritesheet var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png')) .pipe(spritesmith({ imgName: 'sprite_' + folder + '.png', cssName: 'sprite_' + folder + '.scss' })); // Pipe image stream through image optimizer and onto disk var imgStream = spriteData.img .pipe(imagemin({ progressive: true, interlaced: true, optimizationLevel: 7, svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}], use: [pngquant({quality: '65-80', speed: 4})] })) .pipe(gulp.dest(path.build.sprites)) .pipe(notify({message: 'SPRITE IMG task complete', onLast: true})); // Pipe CSS stream through CSS optimizer and onto disk var cssStream = spriteData.css .pipe(gulp.dest(path.src.sassFolder + 'module/sprites')) .pipe(notify({message: 'SPRITE SCSS task complete', onLast: true})); // Return a merged stream to handle both `end` events return merge(imgStream, cssStream); })); |
Créer un sprite bitmap (PNG, JPG) par dossier
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function spriteData(folder, format){ return gulp.src(path.join(config.paths.images.sprites.src, folder, '*'+format)) .pipe(plugins.changed(config.paths.images.dest)) .pipe(plugins.imagemin()) .pipe(plugins.spritesmith({ cssName: config.plugins.spritesmith.cssName + folder + '.' + config.plugins.spritesmith.cssFormat, imgName: config.plugins.spritesmith.imgName + folder + format, imgPath: config.plugins.spritesmith.imgPath + folder + format, cssVarMap: function (sprite) { sprite.name = config.plugins.spritesmith.classPrefix + sprite.name; } })); } gulp.task('bitmap:sprite', plugins.folders(config.paths.images.sprites.src, function (folder) { var spriteDataPng = spriteData(folder,'.png'); var spriteDataJpg = spriteData(folder,'.jpg'); var imgStreamPng = spriteDataPng.img .pipe(gulp.dest(config.paths.images.dest)); var cssStreamPng = spriteDataPng.css .pipe(gulp.dest(config.paths.styles.src)); var imgStreamJpg = spriteDataJpg.img .pipe(gulp.dest(config.paths.images.dest)); var cssStreamJpg = spriteDataJpg.css .pipe(gulp.dest(config.paths.styles.src)); return merge(imgStreamPng, cssStreamPng, imgStreamJpg, cssStreamJpg); })); |
Spritesmith : Multiple spritesheets, one css file?
Source: Multiple spritesheets, one css file?
It’s possible to have multiple sprite sheets based on directory structure, but all de CSS go to just one single file?
For example, given this directory structure:
1 2 3 4 5 6 7 |
sprites/ icons/ icon1.png icon2.png logos/ logo1.png logo2.png |
it’s possible to generate two spritesheets icons-spritesheet.png
and logos-spritesheet.png
, and then all the CSS just to one file, lets say css/sprites.css
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Load in our dependencies var gulp = require('gulp'); var concat = require('gulp-concat'); var merge = require('merge-stream'); var spritesmith = require('gulp.spritesmith'); // Define our gulp task gulp.task('sprite', function () { // Generate our spritesheets var iconSpriteData = gulp.src('icons/*.png').pipe(spritesmith({ imgName: 'icons.png', cssName: 'icons.css' })); var logoSpriteData = gulp.src('logos/*.png').pipe(spritesmith({ imgName: 'logos.png', cssName: 'logos.css' })); // Output our images var iconImgStream = iconSpriteData.img.pipe(gulp.dest('path/to/image/folder/')); var logoImgStream = logoSpriteData.img.pipe(gulp.dest('path/to/image/folder/')); // Concatenate our CSS streams var cssStream = merge(iconSpriteData.css, logoSpriteData.css) .pipe(concat('main.css')) .pipe(gulp.dest('path/to/css/folder/')); // Return a merged stream to handle all our `end` events return merge(iconImgStream, logoImgStream, cssStream); }); |
Error: Cannot find module ‘gulp.spritesmith’
Si ce message d’erreur apparaît au lancement de la tâche Gulp, tenter une installation avec la commande suivante et à la racine du dossier qui contient la gulpfile.js :
1 |
$ sudo npm install gulp.spritesmith --save-dev |