mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
Functionify sprite task creation
This commit is contained in:
@@ -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];
|
||||||
|
|||||||
Reference in New Issue
Block a user