Merge pull request #1 from ahoek/inline-images

Add inline images task

README.md

@@ -7,4 +7,26 @@ Add to bower.json
         "gulp-tasks": "https://github.com/ConnectHolland/gulp-tasks.git#^2.0"
     }
 }
-```
+```
+
+## Inline images task
+
+With the task inline-images you can create a 'sprite' of inline css images. The task
+generates an scss file with the inline-image($name) mixin and .inline-image-* css classes.
+
+Make sure the following packages are available:
+```json
+    "gulp-add-src": "^0.2.0",
+    "gulp-concat": "^2.5.2",
+    "gulp-image-data-uri": "^1.2.1",
+```
+
+Example configuration of config.json:
+```json
+    "inline-images": {
+        "src": [
+            "images/icons2x/*"
+        ]
+    }
+```
+

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "gulp-tasks",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "homepage": "https://github.com/ConnectHolland/gulp-tasks",
   "authors": [
     "Arjen Smit <[email protected]>",

tasks/inline-images.js

@@ -0,0 +1,26 @@
+/**
+ * Generate inline scss images task
+ */
+'use strict';
+
+module.exports = function(gulp, config, plugins) {
+    var imageDataURI = require('gulp-image-data-uri');
+    var concat = require('gulp-concat');
+    var addsrc = require('gulp-add-src');
+
+    return function() {
+        return gulp.src(config['inline-images'].src)
+            // Create the data uris of the images
+            .pipe(imageDataURI({
+                template: {
+                    file: __dirname + '/inline-images/image-data-uri-template.scss'
+                }
+            }))
+            // Prepend and append scss to make the mixins
+            .pipe(addsrc.prepend(__dirname + '/inline-images/_inline-images-prepend.scss'))
+            .pipe(addsrc.append(__dirname + '/inline-images/_inline-images-append.scss'))
+            // Output to generated scss file
+            .pipe(concat('_inline-images.scss'))
+            .pipe(gulp.dest('./style/generated'));
+    };
+};

tasks/inline-images/_inline-images-append.scss

@@ -0,0 +1,15 @@
+// Inline image mixin
+@mixin inline-image($name) {
+    $image-uri: map-get($inline-images, $name);
+    background-image: url('#{$image-uri}');
+    background-size: 100%;
+
+    @content;
+}
+
+// Create css classes
+@each $name, $url in $inline-images {
+    .inline-image-#{$name} {
+        @include inline-image('#{$name}');
+    }
+}

tasks/inline-images/_inline-images-prepend.scss

@@ -0,0 +1,6 @@
+// Initialize the inline images map
+@function map-set($map, $key, $value) {
+    $new: ($key: $value);
+    @return map-merge($map, $new);
+}
+$inline-images: ();

tasks/inline-images/image-data-uri-template.scss

@@ -0,0 +1 @@
+$inline-images: map-set($inline-images, '{{className}}', '{{dataURISchema}}');