diff --git a/.gitignore b/.gitignore index 074779c9e1..42e31d291b 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ config.json npm-debug.log lib common/public/bower_components +common/public/sprites build newrelic_agent.log .bower-tmp diff --git a/gulpfile.js b/gulpfile.js index e43702fe62..a39a800a77 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,5 +1,6 @@ var gulp = require('gulp'), _ = require('lodash'), + glob = require('glob'), browserify = require('browserify'), coffeeify = require('coffeeify'), source = require('vinyl-source-stream'); @@ -14,6 +15,8 @@ var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), spritesmith = require('gulp.spritesmith'), + csso = require('gulp-csso'), + cssmin = require('gulp-cssmin'), pkg = require('./package'); var paths = { @@ -30,7 +33,9 @@ var paths = { }, sprites: { src: 'img/sprites/spritesmith/**/*.png', - dest: './common/public/sprites/' + dest: './common/public/sprites/', + cssminSrc: './common/public/sprites/*.css', + cssminDest: './common/public/sprites/' }, copy: { src: ['./common/img/sprites/backer-only/*.gif', @@ -75,8 +80,80 @@ gulp.task('hashres', function() { // @TODO: Finish this }); -gulp.task('sprite', function() { - // @TODO: Finish this +gulp.task('sprite', function(cb) { + var images = glob.sync('./common/img/sprites/spritesmith/**/*.png'); +// var totalDims = {width:0,height:0}; +// _.each(images, function(img){ +// var dims = sizeOf(img); +// if(!dims.width || !dims.height) console.log(dims); +// totalDims.width += dims.width; +// totalDims.height += dims.height; +// }) + var COUNT = 6;//Math.ceil( (totalDims.width * totalDims.height) / (1024*1024*3) ); + var STEP = 0; + //console.log({totalDims:totalDims,COUNT:COUNT}); + + var sprite = {}; + _.times(COUNT, function(i){ + sliced = images.slice(i * (images.length/COUNT), (i+1) * images.length/COUNT) + sprite[''+i] = { + src: sliced, + imgName: 'spritesmith'+i+'.png', + cssName: 'spritesmith'+i+'.css', + engine: 'phantomjssmith', + algorithm: 'binary-tree', + padding:1, + cssTemplate: './common/css/css.template.mustache', + cssVarMap: function (sprite) { + // For hair, skins, beards, etc. we want to output a '.customize-options.WHATEVER' class, which works as a + // 60x60 image pointing at the proper part of the 90x90 sprite. + // We set up the custom info here, and the template makes use of it. + if (sprite.name.match(/hair|skin|beard|mustach|shirt|flower/) || sprite.name=='head_0') { + sprite.custom = { + px: { + offset_x: "-" + (sprite.x + 25) + "px", + offset_y: "-" + (sprite.y + 15) + "px", + width: "" + 60 + "px", + height: "" + 60 + "px" + } + } + } + if (~sprite.name.indexOf('shirt')) + sprite.custom.px.offset_y = "-" + (sprite.y + 30) + "px"; // even more for shirts + } + /*,cssOpts: { + cssClass: function (item) { + return '.' + item.name; //'.sprite-' + item.name; + } + }*/ + } + }) + + _.forIn(sprite, function(value, key){ + console.log("Starting spritesmith" + key + ".png"); + var spriteData = gulp.src(sliced).pipe(spritesmith(sprite[key])); + + spriteData.img + //.pipe(imagemin()) + .pipe(gulp.dest(paths.sprites.dest)); + + // Pipe CSS stream through CSS optimizer and onto disk + spriteData.css + .pipe(csso()) + .pipe(gulp.dest(paths.sprites.dest)) + .on('end', function(){ + STEP++; + console.log("Finished spritesmith" + key + ".png"); + if(STEP >= COUNT) { + + gulp.src(paths.sprites.cssminSrc) + .pipe(cssmin()) + .pipe(rename('habitrpg-shared.css')) + .pipe(gulp.dest(paths.sprites.cssminDest)) + .on('end', function(){cb()}); + } + }); + }); }); gulp.task('browserify', function() { diff --git a/package.json b/package.json index 6701617807..c3749933cc 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,10 @@ "deep-diff": "~0.1.4", "expect.js": "~0.2.0", "git-changelog": "colegleason/git-changelog", + "glob": "^4.3.5", "gulp-concat": "^2.4.3", + "gulp-cssmin": "^0.1.6", + "gulp-csso": "^1.0.0", "gulp-minify-css": "^0.4.2", "gulp-nodemon": "^1.0.5", "gulp-rename": "^1.2.0",