=BG= initial groundwork for spritesheet generation using aslansky/css…

…-sprite

- retina spriting out of the box
- generates SCSS, however it is insufficient, see aslansky/css-sprite#44
  - TODO limitation of generated SCSS can be worked around using a custom template
  - Base it upon: https://github.com/aslansky/css-sprite/blob/master/lib/templates/scss.mustache
- TODO connect to main CSS gulp task
- TODO investigate using browserify hooks to look for <i/> tags with classes to determine which files should be sprited

lib/config/streams.js

@@ -63,6 +63,11 @@ function htmlApp(opts) {
   return gulp.src([APP + '/**/*.html', '!**/assets/**'], opts);
 }
 
+function imageApp(opts) {
+  return gulp.src(getGlob(['**/*.png'], [NODE, BOWER], opts));
+  // return gulp.src([APP + '/**/*.png', '!**/assets/**'], opts);
+}
+
 function testDependencies(opts) {
   return bowerFiles(CONSOLE_WIDTH)
     .src('js', opts);
@@ -80,8 +85,9 @@ module.exports = {
   jsApp           : jsApp,
   scssApp         : scssApp,
   htmlApp         : htmlApp,
+  imageApp        : imageApp,
   jsLib           : jsLib,
   jsSpec          : jsSpec,
   testDependencies: testDependencies,
   getGlob         : getGlob
-};
+};

package.json

@@ -43,12 +43,15 @@
     "chalk": "latest",
     "combined-stream": "latest",
     "convert-source-map": "latest",
+    "css-sprite": "latest",
     "gulp": "latest",
+    "gulp-changed": "latest",
     "gulp-concat": "latest",
     "gulp-inject": "latest",
     "gulp-jshint": "latest",
     "gulp-load-plugins": "latest",
     "gulp-minify-html": "latest",
+    "gulp-newer": "latest",
     "gulp-ng-html2js": "latest",
     "gulp-plumber": "latest",
     "gulp-rimraf": "latest",

tasks/css.js

@@ -32,4 +32,4 @@ gulp.task('css:build', function () {
   return streams.scssApp()
     .pipe(nodeSass(CONSOLE_WIDTH, [streams.BOWER, streams.NODE]))
     .pipe(gulp.dest(streams.BUILD));
-});
+});

tasks/sprite.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var path = require('path');
+
+var gulp = require('gulp');
+var gulpIf = require('gulp-if');
+var gulpNewer = require('gulp-newer');
+var cssSprite = require('css-sprite');
+var through = require('through2');
+var projectOfFile = require('project-of-file');
+
+var configStreams = require('../lib/config/streams');
+
+gulp.task('identifysprites', [], function() {
+
+});
+
+var projectOfFileInstance = projectOfFile.cachedInstance('angularity-sprite', process.cwd());
+
+gulp.task('sprite', [], function() {
+  return configStreams.imageApp()
+    // .pipe(gulpNewer(configStreams.BUILD + '/sprite/_sprite.scss'))
+    .pipe(through.obj(function(file, encoding, done) {
+      var stream = this;
+      //Prefix the file name of all images with the project name so as to create
+      //disambiguation between sprites from mutliple dependencies.
+      //The need to manipulate file names is inherent from the spriting library
+      //using file names to generate CSS classes for each sprite.
+      var projectName = projectOfFileInstance.name(file.path);
+      file.path = path.join(
+          process.cwd(), 'sprite', projectName + '--' + path.basename(file.path));
+      stream.push(file);
+      done(/*err*/);
+    }))
+    .on('data', function(file) {
+    })
+    .on('end', function() {
+    })
+    .pipe(
+      cssSprite.stream({
+        name: 'sprite',
+        style: '_sprite.scss',
+        processor: 'scss',
+        cssPath: configStreams.BUILD + '/sprite/',
+        // "generate both retina and standard sprites. src images have to be in retina resolution"
+        retina: true,
+        orientation: 'binary-tree',
+      })
+    )
+    .pipe(gulp.dest(configStreams.BUILD + '/sprite/'));
+});