Functionify sprite task creation

This commit is contained in:
Blade Barringer
2015-09-12 11:09:29 -05:00
parent 2c2ab97666
commit d79427e879

View File

@@ -4,6 +4,7 @@ import spritesmith from 'gulp.spritesmith';
import clean from 'gulp-clean'; import clean from 'gulp-clean';
import sizeOf from 'image-size'; import sizeOf from 'image-size';
import merge from 'merge-stream'; import merge from 'merge-stream';
import {basename} from 'path';
import {sync} from 'glob'; import {sync} from 'glob';
import {times, each} from 'lodash'; import {times, each} from 'lodash';
@@ -11,40 +12,14 @@ import {times, each} from 'lodash';
const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3; const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
const DIST_PATH = 'common/dist/sprites/'; const DIST_PATH = 'common/dist/sprites/';
const SPRITES_SRC = sync('common/img/sprites/spritesmith/**/*.png'); const SPRITES_SRC = sync('common/img/sprites/spritesmith/**/*.png');
const SPRITESHEET_SLICE_INDICIES = _calculateSpritesheetsSrcIndicies(SPRITES_SRC);
let spritesTasks = ['sprites:clean']; let spritesTasks = ['sprites:clean'];
each(SPRITESHEET_SLICE_INDICIES, (start, index) => { let mainSrc = sync('common/img/sprites/spritesmith/**/*.png');
let slicedSrc = SPRITES_SRC.slice(start, SPRITESHEET_SLICE_INDICIES[index + 1]); _generateSpritesTasks('main', mainSrc);
let taskName = `sprites:${index}`;
spritesTasks.push(taskName);
gulp.task(taskName, () => { let largeSrc = sync('common/img/sprites/spritesmith_large/**/*.png');
let spriteData = gulp.src(slicedSrc) _generateSpritesTasks('largeSprites', largeSrc);
.pipe(spritesmith({
imgName: `spritesmith${index}.png`,
cssName: `spritesmith${index}.css`,
algorithm: 'binary-tree',
padding: 1,
cssTemplate: 'common/css/css.template.mustache',
cssVarMap: _cssVarMap
}));
let imgStream = spriteData.img
.pipe(imagemin())
.pipe(gulp.dest(DIST_PATH));
let cssStream = spriteData.css
.pipe(gulp.dest(DIST_PATH));
return merge(imgStream, cssStream);
});
});
gulp.task('sprites:largeFiles', () => {
});
gulp.task('sprites:clean', (done) => { gulp.task('sprites:clean', (done) => {
gulp.src(`${DIST_PATH}spritesmith*`) gulp.src(`${DIST_PATH}spritesmith*`)
@@ -64,8 +39,8 @@ gulp.task('sprites:checkCompiledDimensions', () => {
let spriteSize = _calculateImgDimensions(img); let spriteSize = _calculateImgDimensions(img);
if (spriteSize > MAX_SPRITESHEET_SIZE) { if (spriteSize > MAX_SPRITESHEET_SIZE) {
let name = `spritesmith${index}.png`;
numberOfSheetsThatAreTooBig++; numberOfSheetsThatAreTooBig++;
let name = basename(img, '.png');
console.error(`WARNING: ${name} is too big - ${spriteSize} > ${MAX_SPRITESHEET_SIZE}`); console.error(`WARNING: ${name} is too big - ${spriteSize} > ${MAX_SPRITESHEET_SIZE}`);
} }
}); });
@@ -82,6 +57,37 @@ gulp.task('sprites:compile', spritesTasks, () => {
gulp.run('sprites:checkCompiledDimensions'); gulp.run('sprites:checkCompiledDimensions');
}); });
function _generateSpritesTasks(name, src) {
let spritesheetSliceIndicies = _calculateSpritesheetsSrcIndicies(src);
each(spritesheetSliceIndicies, (start, index) => {
let slicedSrc = src.slice(start, spritesheetSliceIndicies[index + 1]);
let taskName = `sprites:${name}:${index}`;
spritesTasks.push(taskName);
gulp.task(taskName, () => {
let spriteData = gulp.src(slicedSrc)
.pipe(spritesmith({
imgName: `spritesmith-${name}-${index}.png`,
cssName: `spritesmith-${name}-${index}.css`,
algorithm: 'binary-tree',
padding: 1,
cssTemplate: 'common/css/css.template.mustache',
cssVarMap: _cssVarMap
}));
let imgStream = spriteData.img
.pipe(imagemin())
.pipe(gulp.dest(DIST_PATH));
let cssStream = spriteData.css
.pipe(gulp.dest(DIST_PATH));
return merge(imgStream, cssStream);
});
});
}
function _calculateSpritesheetsSrcIndicies(src) { function _calculateSpritesheetsSrcIndicies(src) {
let totalPixels = 0; let totalPixels = 0;
let slices = [0]; let slices = [0];