spritesmith

Spritesmith

GulpでCSSスプライトを自動生成
https://github.com/twolfson/gulp.spritesmith

Usage

  • Install

    npm install --save-dev gulp.spritesmith
    
  • SetUp

gulpfile

'use strict';

// import
const gulp        = require('gulp');
const spritesmith = require('gulp.spritesmith');


const spritePath = './app/assets/images/sprite/';
const cssPath    = './app/assets/stylesheets/';

gulp.task('sprite', ()=> {
  let spriteData = gulp.src(spritePath+'*.png')
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: '_sprite.scss',
      imgPath: 'sprite/sprite.png',
      cssFormat: 'scss',
      cssVarMap: (sprite) => {
        sprite.name = 'sprite-' + sprite.name;
      }
    }));
  spriteData.img
    .pipe(gulp.dest(spritePath));
  return spriteData.css
    .pipe(gulp.dest(cssPath));
});

Demo

  • call sprite image
    .image {
    @include sprite($sprite-image01);
    }
    

Refer

gulp.spritesmith
https://github.com/twolfson/gulp.spritesmith

CSS Sprite を自動生成する - Gulp で作る Web フロントエンド開発環境 #8
https://tech.recruit-mp.co.jp/front-end/post-6844/