spritesmith – devfrontend.info

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.

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);

}));

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

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);
}));

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:

sprites/
    icons/
        icon1.png
        icon2.png
    logos/
        logo1.png
        logo2.png

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.

// 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);
});

// 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 :

$ sudo npm install gulp.spritesmith --save-dev

1	$ sudo npm install gulp.spritesmith --save-dev

Articles récents

Catégories

Archives

Méta

Étiquette : spritesmith

[Gulp] Spritesmith

Ressources en ligne:

Gulp – make one sprite per folder

Créer un sprite bitmap (PNG, JPG) par dossier

Spritesmith : Multiple spritesheets, one css file?

Error: Cannot find module ‘gulp.spritesmith’