Merge pull request #5922 from crookedneighbor/gulpify

Gulpify the sprites tasks

Gruntfile.js

@@ -2,57 +2,6 @@
 var _ = require('lodash');
 module.exports = function(grunt) {
 
-  // Ported from shared
-  // So this sucks. Mobile Safari can't render image files > 1024x1024*3, so we have to break it down to multiple
-  // files in this hack approach. See https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
-  var images = grunt.file.expand('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 = 7;//Math.ceil( (totalDims.width * totalDims.height) / (1024*1024*3) );
-  //console.log({totalDims:totalDims,COUNT:COUNT});
-
-  var sprite = {};
-  _.times(COUNT, function(i){
-    var sliced = images.slice(i * (images.length/COUNT), (i+1) * images.length/COUNT)
-    sprite[''+i] = {
-      src: sliced,
-      dest: 'common/dist/sprites/spritesmith'+i+'.png',
-      destCss: 'common/dist/sprites/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|^headAccessory_special_\w+Ears/) || 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;
-       }
-       }*/
-    }
-  });
-
-
   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
@@ -69,24 +18,7 @@ module.exports = function(grunt) {
     },
 
     clean: {
-      build: ['website/build'],
-      sprite: ['common/dist/sprites']
-    },
-
-    sprite: sprite,
-
-    imagemin: {
-      spritesmith: {
-        options: {
-          optimizationLevel: 7
-        },
-        files: [{
-          expand: true,
-          flatten: true,
-          src: ["common/dist/sprites/*.png"],
-          dest: "common/dist/sprites/"
-        }]
-      }
+      build: ['website/build']
     },
 
     cssmin: {
@@ -200,9 +132,8 @@ module.exports = function(grunt) {
   });
 
   // Register tasks.
-  grunt.registerTask('compile:sprites', ['clean:sprite', 'sprite', 'imagemin', 'cssmin']);
   grunt.registerTask('build:prod', ['loadManifestFiles', 'clean:build', 'browserify', 'uglify', 'stylus', 'cssmin', 'copy:build', 'hashres']);
-  grunt.registerTask('build:dev', ['browserify', 'stylus']);
+  grunt.registerTask('build:dev', ['browserify', 'cssmin', 'stylus']);
   grunt.registerTask('build:test', ['test:prepare:translations', 'build:dev']);
 
   grunt.registerTask('test:prepare:translations', function() {
@@ -222,8 +153,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-spritesmith');
-  grunt.loadNpmTasks('grunt-contrib-imagemin');
   grunt.loadNpmTasks('grunt-hashres');
   grunt.loadNpmTasks('grunt-karma');
 

common/dist/sprites/spritesmith-largeSprites-0.css

@@ -0,0 +1,312 @@
+.party_preview {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px 0px;
+  width: 451px;
+  height: 219px;
+}
+.welcome_basic_avatars {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -452px -103px;
+  width: 246px;
+  height: 165px;
+}
+.welcome_promo_party {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -220px;
+  width: 270px;
+  height: 180px;
+}
+.welcome_sample_tasks {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -401px;
+  width: 246px;
+  height: 165px;
+}
+.2014_Fall_HealerPROMO2 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -91px -831px;
+  width: 90px;
+  height: 90px;
+}
+.2014_Fall_Mage_PROMO9 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -578px -740px;
+  width: 120px;
+  height: 90px;
+}
+.2014_Fall_RoguePROMO3 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -699px -740px;
+  width: 105px;
+  height: 90px;
+}
+.2014_Fall_Warrior_PROMO {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -455px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_backtoschool {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -251px;
+  width: 150px;
+  height: 150px;
+}
+.promo_dilatoryDistress {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -546px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_enchanted_armoire {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -247px -401px;
+  width: 374px;
+  height: 76px;
+}
+.promo_enchanted_armoire_201507 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -641px;
+  width: 217px;
+  height: 90px;
+}
+.promo_enchanted_armoire_201508 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -699px -103px;
+  width: 180px;
+  height: 90px;
+}
+.promo_enchanted_armoire_201509 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -819px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_habitica {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -271px -220px;
+  width: 175px;
+  height: 175px;
+}
+.promo_item_notif {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px 0px;
+  width: 249px;
+  height: 102px;
+}
+.promo_mystery_201405 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -728px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201406 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -1033px -251px;
+  width: 90px;
+  height: 96px;
+}
+.promo_mystery_201407 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -417px -567px;
+  width: 42px;
+  height: 62px;
+}
+.promo_mystery_201408 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -725px -478px;
+  width: 60px;
+  height: 71px;
+}
+.promo_mystery_201409 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -182px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201410 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -775px -401px;
+  width: 72px;
+  height: 63px;
+}
+.promo_mystery_201411 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -273px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201412 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -374px -567px;
+  width: 42px;
+  height: 66px;
+}
+.promo_mystery_201501 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -1081px -732px;
+  width: 48px;
+  height: 63px;
+}
+.promo_mystery_201502 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -637px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201503 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201504 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -786px -478px;
+  width: 60px;
+  height: 69px;
+}
+.promo_mystery_201505 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -364px -831px;
+  width: 90px;
+  height: 90px;
+}
+.promo_mystery_201506 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -331px -567px;
+  width: 42px;
+  height: 69px;
+}
+.promo_mystery_201507 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -1039px -103px;
+  width: 90px;
+  height: 105px;
+}
+.promo_mystery_201508 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -778px -269px;
+  width: 93px;
+  height: 90px;
+}
+.promo_mystery_3014 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -550px;
+  width: 217px;
+  height: 90px;
+}
+.promo_orca {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -1023px -402px;
+  width: 105px;
+  height: 105px;
+}
+.promo_partyhats {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -699px -194px;
+  width: 115px;
+  height: 47px;
+}
+.promo_pastel_skin {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -247px -478px;
+  width: 330px;
+  height: 83px;
+}
+.customize-option. {
+  background-image: url();
+  background-position:  ;
+  width: ;
+  height: ;
+}
+.promo_pet_skins {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -402px;
+  width: 140px;
+  height: 147px;
+}
+.customize-option. {
+  background-image: url();
+  background-position:  ;
+  width: ;
+  height: ;
+}
+.promo_shimmer_hair {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -567px;
+  width: 330px;
+  height: 83px;
+}
+.customize-option. {
+  background-image: url();
+  background-position:  ;
+  width: ;
+  height: ;
+}
+.promo_splashyskins {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -732px;
+  width: 198px;
+  height: 91px;
+}
+.customize-option. {
+  background-image: url();
+  background-position:  ;
+  width: ;
+  height: ;
+}
+.promo_springclasses2014 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -740px;
+  width: 288px;
+  height: 90px;
+}
+.promo_springclasses2015 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -289px -740px;
+  width: 288px;
+  height: 90px;
+}
+.promo_summer_classes_2014 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -452px 0px;
+  width: 429px;
+  height: 102px;
+}
+.promo_summer_classes_2015 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: 0px -651px;
+  width: 300px;
+  height: 88px;
+}
+.promo_updos {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -882px -103px;
+  width: 156px;
+  height: 147px;
+}
+.promo_veteran_pets {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -578px -478px;
+  width: 146px;
+  height: 75px;
+}
+.promo_winterclasses2015 {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -452px -269px;
+  width: 325px;
+  height: 110px;
+}
+.promo_winteryhair {
+  background-image: url(spritesmith-largeSprites-0.png);
+  background-position: -622px -401px;
+  width: 152px;
+  height: 75px;
+}
+.customize-option. {
+  background-image: url();
+  background-position:  ;
+  width: ;
+  height: ;
+}

common/dist/sprites/spritesmith-main-9.css

@@ -0,0 +1,534 @@
+.Pet-Seahorse-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Seahorse-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Seahorse-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Seahorse-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Seahorse-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Seahorse-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Sheep-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Slime-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Spider-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Tiger-Veteran {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TigerCub-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turkey-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: 0px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -82px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -164px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -246px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -328px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -410px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -492px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -574px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -656px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -738px -700px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px 0px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -52px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -104px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -156px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -208px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -260px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -312px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -364px;
+  width: 48px;
+  height: 51px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url(spritesmith-main-9.png);
+  background-position: -820px -416px;
+  width: 48px;
+  height: 51px;
+}

package.json

@@ -31,7 +31,6 @@
     "grunt-contrib-watch": "~0.6.1",
     "grunt-hashres": "~0.4.1",
     "grunt-karma": "~0.6.2",
-    "grunt-spritesmith": "~3.5.0",
     "gulp": "^3.9.0",
     "gulp-grunt": "^0.5.2",
     "icalendar": "lefnire/node-icalendar#e06da0e55901f0ba940dfadc42c158ed0b1fead9",
@@ -82,6 +81,7 @@
   "scripts": {
     "test": "gulp test",
     "start": "gulp run:dev",
+    "sprites": "gulp sprites:compile",
     "postinstall": "bower --config.interactive=false install -f; gulp build;",
     "coverage": "COVERAGE=true mocha --require register-handlers.js --reporter html-cov > coverage.html; open coverage.html"
   },
@@ -94,8 +94,10 @@
     "event-stream": "^3.2.2",
     "expect.js": "~0.2.0",
     "glob": "^4.3.5",
-    "grunt-contrib-imagemin": "^0.9.4",
+    "gulp-clean": "^0.3.1",
+    "gulp-imagemin": "^2.3.0",
     "gulp-nodemon": "^2.0.4",
+    "gulp.spritesmith": "^4.1.0",
     "istanbul": "^0.3.14",
     "karma": "~0.10.2",
     "karma-chai-plugins": "~0.1.0",
@@ -112,12 +114,11 @@
     "karma-requirejs": "~0.2.0",
     "karma-script-launcher": "~0.1.0",
     "lcov-result-merger": "^1.0.2",
+    "merge-stream": "^1.0.0",
     "mocha": "~1.12.1",
     "mongoskin": "~0.6.1",
-    "phantomjssmith": "~0.5.4",
     "protractor": "~2.0.0",
     "rewire": "^2.3.3",
-    "rimraf": "^2.2.8",
     "shelljs": "^0.4.0",
     "sinon": "1.15.4",
     "sinon-chai": "^2.7.0",

tasks/gulp-sprites.js

@@ -0,0 +1,155 @@
+import gulp from 'gulp';
+import imagemin from 'gulp-imagemin';
+import spritesmith from 'gulp.spritesmith';
+import clean from 'gulp-clean';
+import sizeOf from 'image-size';
+import mergeStream from 'merge-stream';
+import {basename} from 'path';
+import {sync} from 'glob';
+import {each} from 'lodash';
+
+// https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
+const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
+const DIST_PATH = 'common/dist/sprites/';
+
+gulp.task('sprites:compile', ['sprites:clean', 'sprites:main', 'sprites:largeSprites', 'sprites:checkCompiledDimensions']);
+
+gulp.task('sprites:main', () => {
+  let mainSrc = sync('common/img/sprites/spritesmith/**/*.png');
+  return createSpritesStream('main', mainSrc);
+});
+
+gulp.task('sprites:largeSprites', () => {
+  let largeSrc = sync('common/img/sprites/spritesmith_large/**/*.png');
+  return createSpritesStream('largeSprites', largeSrc);
+});
+
+gulp.task('sprites:clean', (done) => {
+  gulp.src(`${DIST_PATH}spritesmith*`)
+    .pipe(clean());
+
+  done();
+});
+
+gulp.task('sprites:checkCompiledDimensions', ['sprites:main', 'sprites:largeSprites'], () => {
+  console.log('Verifiying that images do not exceed max dimensions');
+
+  let numberOfSheetsThatAreTooBig = 0;
+
+  let distSpritesheets = sync(`${DIST_PATH}*.png`);
+
+  each(distSpritesheets, (img, index) => {
+    let spriteSize = calculateImgDimensions(img);
+
+    if (spriteSize > MAX_SPRITESHEET_SIZE) {
+      numberOfSheetsThatAreTooBig++;
+      let name = basename(img, '.png');
+      console.error(`WARNING: ${name} is too big - ${spriteSize} > ${MAX_SPRITESHEET_SIZE}`);
+    }
+  });
+
+  if (numberOfSheetsThatAreTooBig > 0) {
+    console.error(`${numberOfSheetsThatAreTooBig} sheets are too big :(`);
+    console.error('Mobile Safari may be unhappy with you');
+  } else {
+    console.log('All images are within the correct dimensions');
+  }
+});
+
+function createSpritesStream(name, src) {
+  let spritesheetSliceIndicies = calculateSpritesheetsSrcIndicies(src);
+  let stream = mergeStream();
+
+  each(spritesheetSliceIndicies, (start, index) => {
+    let slicedSrc = src.slice(start, spritesheetSliceIndicies[index + 1]);
+
+    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));
+
+    stream.add(imgStream);
+    stream.add(cssStream);
+  });
+
+  return stream;
+}
+
+function calculateSpritesheetsSrcIndicies(src) {
+  let totalPixels = 0;
+  let slices = [0];
+
+  each(src, (img, index) => {
+    let imageSize = calculateImgDimensions(img, true);
+    totalPixels += imageSize;
+
+    if (totalPixels > MAX_SPRITESHEET_SIZE) {
+      slices.push(index - 1);
+      totalPixels = imageSize;
+    }
+  });
+
+  return slices;
+}
+
+function calculateImgDimensions(img, addPadding) {
+  let dims = sizeOf(img);
+
+  let requiresSpecialTreatment = checkForSpecialTreatment(img);
+  if (requiresSpecialTreatment) {
+    let newWidth = dims.width < 90 ? 90 : dims.width;
+    let newHeight = dims.height < 90 ? 90 : dims.height;
+    dims = {
+      width: newWidth,
+      height: newHeight
+    };
+  }
+
+  let padding = 0;
+
+  if (addPadding) {
+    padding = (dims.width * 8) + (dims.height * 8);
+  }
+
+  if(!dims.width || !dims.height) console.error('MISSING DIMENSIONS:', dims);
+
+  let totalPixelSize = (dims.width * dims.height) + padding;
+
+  return totalPixelSize;
+}
+
+function checkForSpecialTreatment(name) {
+  let regex = /hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/;
+  return name.match(regex) || name === 'head_0';
+}
+
+function cssVarMap(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.
+  let requiresSpecialTreatment = checkForSpecialTreatment(sprite.name);
+  if (requiresSpecialTreatment) {
+    sprite.custom = {
+      px: {
+        offset_x: `-${ sprite.x + 25 }px`,
+        offset_y: `-${ sprite.y + 15 }px`,
+        width: '60px',
+        height: '60px'
+      }
+    }
+  }
+  if (~sprite.name.indexOf('shirt'))
+    sprite.custom.px.offset_y = `-${ sprite.y + 30 }px`; // even more for shirts
+}

vagrant.sh

@@ -71,8 +71,8 @@ apt-get install -qq nodejs
 
 cd /vagrant
 
-echo Installing grunt/bower...
-npm install -g grunt-cli bower phantomjs
+echo Installing gulp/bower...
+npm install -g gulp grunt-cli bower
 
 echo Installing Habitica
 npm install --no-bin-link