gulp.spritesmith 스프라이트이미지

https://bunlog.d-s-b.jp/optimize-gulpfile-for-gulp-spritesmith

스프라이트 폴더별로

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

걸프이미지호버했을때 스프라이트이미지

스프라이트 이미지 한개일때

 
gulp.task('sprite', function() {
    var spriteData = 
        gulp.src('./src/img/*.*')
            .pipe(spritesmith({
                imgName: '_sprite.png',
                cssName: '_sprite.scss',
                algorithm: 'top-down',
                padding:10,                
                cssTemplate: 'sprite.css.handlebars'
            }));
 
    spriteData.img.pipe(gulp.dest('./dist/img/'));
    spriteData.css.pipe(gulp.dest('./dist/css/'));
});

sprite.css.handlebars 는것은 빈 파일을 열어서 파일을 하나 새로 만들어 줍니다. 거기안에

{{#sprites}}
.sprite-{{name}}:before {
  display: block;
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

저 내용을 붙여놓아주고 사용용도에 맞게 변경해줍니다.

========================

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

http://blog.e-riverstyle.com/2014/02/gulpspritesmithcss-spritegulp.html

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  var spriteData = gulp.src('public_html/img/sprite/*.png') //スプライトにする愉快な画像達
  .pipe(spritesmith({
    imgName: 'sprite.png', //スプライトの画像
    cssName: '_sprite.scss', //生成されるscss
    imgPath: '/img/sprite.png', //生成されるscssに記載されるパス
    cssFormat: 'scss', //フォーマット
    cssVarMap: function (sprite) {
      sprite.name = 'sprite-' + sprite.name; //VarMap(生成されるScssにいろいろな変数の一覧を生成)
    }
  }));
  spriteData.img.pipe(gulp.dest('public_html/img/')); //imgNameで指定したスプライト画像の保存先
  spriteData.css.pipe(gulp.dest('public_html/sass/')); //cssNameで指定したcssの保存先
});


gulp.task('default', function() {
	// デフォルトタスク
    gulp.run('sprite'); 

});

https://runkit.com/npm/gulp.spritesmith-multi

호버했을때 이미지 클래스명도 정해줘야한다

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

스프라이트이미지 여러개일떄 하는방법

폴더를 각각주고 거기안에 폴더명대로 이름이생성되는구조

근데 안된다.ㅠㅠ 다시해보기

http://qiita.com/okamoai/items/e8a9f1c3e84093d102b0

=================

 consolidate = require('gulp-consolidate')

consolidate=>통합하다

https://github.com/timrwood/gulp-consolidate

// --------------------------
// CSS Sprite Create
// --------------------------
// Functions
var getFolders = function(dir_path) {
  return fs.readdirSync(dir_path).filter(function(file) {
    return fs.statSync(path.join(dir_path, file)).isDirectory();
  });
};
 
// CSS Sprite Create
gulp.task('sprtie', function() {
  var folders = getFolders('./develop/img-sprite/');
  folders.forEach(function(folder){
    var spriteData = gulp.src('./develop/img-sprite/' + folder + '/*.png')
      .pipe(spritesmith({
        imgName: 'sprites_' + folder + '.png',
        imgPath: 'img/sprites_' + folder + '.png',
        cssName: folder + '.css',
        padding: 4,
        cssTemplate: function(data) {
          var opt = {
            spriteName: folder,
            className: 'ico',
            data: data
          };
          // Sprite HTML Sample Create
          gulp.src('./develop/template/sprite-sample.html')
            .pipe(consolidate('lodash', opt))
            .pipe(rename({
              basename: folder
            }))
            .pipe(gulp.dest('./public/sprites'));
          // Sprite CSS Sample Create
          gulp.src('./develop/template/sprite-sample.css')
            .pipe(consolidate('lodash', opt))
            .pipe(rename({
              basename: folder
            }))
            .pipe(gulp.dest('./public/sprites'));
          return '';
        }
      }));
    spriteData.img
      .pipe(gulp.dest('./public/sprites/img'));
  })
});

깔아야하는 플러그인

var fs   = require('fs'),
    path = require('path'),
    gulp        = require('gulp'),
    rename      = require('gulp-rename'),
    spritesmith = require('gulp.spritesmith'),
    rename      = require('gulp-rename'),
    consolidate = require('gulp-consolidate')

위에선언은 안되어있지만 밑에서 사용해서 깔아야할 플러그인 -> lodash

*spritesmith 로되어있는지 확인할것

계속실행이안됨..ㅠㅠ

http://frontendbabel.info/articles/css-sprites-with-gulp/

스프라이트이미지참고

https://tech.recruit-mp.co.jp/front-end/post-6844/

http://dobit.top/Detail/280.html

일반적으로 varmap을 사용안했을때는 css가그대로 나옴

http://poboxjack.logdown.com/posts/252759-using-gulp-a-little-picture-of-a-sprite-image-number