이미지 스프라이트 자동화하기

{
  "name": "sprite",
  "scripts": {
    "start": "gulp default"
  },
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
    "gulp-sass-glob": "^1.0.8",
    "gulp-watch": "^4.3.11",
    "gulp.spritesmith-multi": "^3.1.0",
    "merge-stream": "^1.0.1",
    "run-sequence": "^1.2.2"
  }
}

var gulp = require('gulp'),
	runSequence = require('run-sequence'),
	merge = require('merge-stream'),
	watch = require('gulp-watch'),
	sass = require('gulp-sass'),
	sassGlob = require('gulp-sass-glob'),
	spritesmith = require('gulp.spritesmith-multi'),
	del = require('del');

/* ---------------------------------------------------------------------------------- */

// Clean Sprite
gulp.task('clean-sprite', function() {
	return del('./dist/img/sprite');
});

// 자동 스프라이트
gulp.task('auto-sprite', function() {
	var opts = {
		spritesmith: function (options, sprite, icons){
			options.imgPath =  `../img/sprite/${options.imgName}`;
			options.cssName = `_${sprite}-sprite.scss`;
			options.cssTemplate = null;
			options.cssSpritesheetName = sprite;
			options.padding = 10;
			options.cssVarMap =  function(sp) {
				sp.name = `${sprite}-${sp.name}`;
			};

			return options;
		}
	};
	var spriteData = gulp.src('./src/img-sprites/**/*.png').pipe(spritesmith(opts)).on('error', function (err) {
		console.log(err)
    });
	
	var imgStream = spriteData.img.pipe(gulp.dest('./dist/img/sprite'));
	var cssStream = spriteData.css.pipe(gulp.dest('./src/scss/vendors'));

	return merge(imgStream, cssStream);
});

// 스프라이트 and SASS
gulp.task('sprite-and-sass', function() {
	runSequence('clean-sprite', 'auto-sprite', 'sass');
});

// sass
gulp.task('sass', function() {
	return gulp.src('./src/scss/**/*.scss')

		// use glob imports
        .pipe(sassGlob())

		// SASS
		.pipe(sass({
			errLogToConsole: true,
			outputStyle: 'compressed' // nested, expanded, compact, or compressed.
		}).on('error', sass.logError))

		// css 배포
		.pipe(gulp.dest('./dist/css'));
});
 
gulp.task('watch', function() {
	watch(['./src/scss/*.scss', './src/**/*.scss'], function() {
		gulp.start('sass');
	});
	watch(['./src/img-sprites/**/*'], function() {
		gulp.start('sprite-and-sass');
	});
});
 
gulp.task('default', [
	'sprite-and-sass',
	'watch'
]);

//
// COMMON.SCSS
// --------------------------------------------------

// Vendor
@import './vendors/*-sprite.scs';	// 아이콘 스프라이트 SCSS (gulp.spritesmith 모듈이 자동생성)

.test {
	@include sprite($icon-checkbox-on);
}