SVG inlining

CHANGELOG.md

@@ -3,6 +3,10 @@
 ## Changelog
 
 
+#### 7.0.0 [Breaking Changes] Add svg_inline task
+
+- Adds support to inline the content of SVGs directly into page HTML
+
 #### 6.1.3 Update Grunt JSHint version
 
 - Updated to support JSHint ~2.9.0, most notably the `esversion` property

README.md

@@ -316,6 +316,9 @@ This list aims to be a reference and may not cover every detail of our implement
 - #### svg_sprite
   Generates svg sprites and their `.css` files based on images located in the `source/images/svg-sprite` directory. The output folder is `build/svg-sprite`.
 
+- #### svg_inline
+  Injects SVG content referenced by SVG `<use>` directly into the HTML document. This allows for the good parts of SVG `<use>` like ability to apply CSS to SVG content, without the problematic lack of support in every version of IE. This is inline (haha) with what [GitHub is doing for SVGs](https://github.com/blog/2112-delivering-octicons-with-svg). 
+
 - #### svgmin
   Minification for `.svg` files during deployment.
 
@@ -370,7 +373,7 @@ module.exports = {
 };
 ```
 
-Replacements are done at the subtask level, so the file above would not destroy the `copy:build` task in the process. For more information on writing task files, view the `load-grunt-config` [documenation](https://github.com/firstandthird/load-grunt-config#grunt-tasks-files).
+Replacements are done at the subtask level, so the file above would not destroy the `copy:build` task in the process. For more information on writing task files, view the `load-grunt-config` [documentation](https://github.com/firstandthird/load-grunt-config#grunt-tasks-files).
 
 ## Other Bits
 
@@ -380,6 +383,7 @@ While not required, we suggest adding the following lines to your `.gitignore` f
 /build
 /coverage
 /.instrumented
+/.inlined
 ```
 
-The `/coverage` and `/.instrumented` directories are used during testing and erased with each run. Files in these folders are not intended to be committed. The `/build` folder contents changes with the current environment settings and is not fit for version control.
+The `/coverage` and `/.instrumented` directories are used during testing and erased with each run. Files in these folders are not intended to be committed. The `/.inlined` directory holds HTML build artifacts after they are SVG inlined but before ngtemplates runs. The `/build` folder contents changes with the current environment settings and is not fit for version control.

grunt/aliases.yaml

@@ -5,9 +5,10 @@ build:
   - clean:build
   - truecolors_less
   - less
+  - svg_sprite
+  - svg_inline
   - ngtemplates
   - copy
-  - svg_sprite
   - browserify:build
   - postcss
 

grunt/copy.js

@@ -16,7 +16,7 @@ module.exports = {
         ]
     },
     index: {
-        src: "source/modules/_app/templates/index.html",
+        src: ".inlined/modules/_app/templates/index.html",
         dest: "build/index.html"
     }
 };

grunt/ngtemplates.js

@@ -1,7 +1,7 @@
+"use strict";
+
 module.exports =  function ( grunt )
 {
-    "use strict";
-
     return {
         options: {
             module: "App",
@@ -28,7 +28,7 @@ module.exports =  function ( grunt )
                     true;
             },
             dest: "build/templates.js",
-            cwd: "source"
+            cwd: ".inlined"
         }
     };
 

grunt/svg_inline.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var inline = require( "web-resource-inliner" );
+var a = require( "async" );
+
+module.exports = function ( grunt )
+{
+    grunt.registerTask( "svg_inline", "Inline SVG use", function ()
+    {
+        var done = this.async();
+        var src = [ "modules/*/templates/*.html" ];
+
+        var tasks =
+            grunt.file.expandMapping( src, ".inlined", { cwd: "source" } )
+            .map( function ( file )
+            {
+                return function ( done )
+                {
+                    var fileContent = grunt.file.read( file.src );
+
+                    inline.html( {
+                        fileContent: fileContent,
+                        images: false,
+                        scripts: false,
+                        links: false,
+                        relativeTo: "build/"
+                    }, function ( err, res )
+                    {
+                        if( err )
+                        {
+                            return done( err );
+                        }
+                        grunt.file.write( file.dest, res );
+                        done();
+                    } );
+                };
+            } );
+
+        a.series( tasks, function ( err )
+        {
+            if( err )
+            {
+                grunt.fail.warn( err, err.stack );
+            }
+            done();
+        } );
+    } );
+};

grunt/watch.js

@@ -14,9 +14,9 @@ module.exports = {
         tasks: [ "newer:jshint:dev" ]
     },
     templates: {
-        options: { cwd: "<%= ngtemplates.build.cwd %>" },
-        files: "<%= ngtemplates.build.src %>",
-        tasks: [ "ngtemplates" ]
+        options: { cwd: "source" },
+        files: "**/*.html",
+        tasks: [ "svg_inline", "ngtemplates" ]
     },
     styles: {
         files: [
@@ -30,10 +30,10 @@ module.exports = {
         files: "<%= copy.build.src %>",
         tasks: [ "newer:copy:build" ]
     },
-    sprite: {
+    svg: {
         options: { cwd: "<%= svg_sprite.use.cwd %>" },
         files: "<%= svg_sprite.use.src %>",
-        tasks: [ "svg_sprite" ]
+        tasks: [ "svg_sprite", "svg_inline", "ngtemplates" ]
     },
     livereload: {
         options: { livereload: true },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dominatr-grunt",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "Build all the things!",
   "scripts": {
     "test": ""
@@ -50,12 +50,14 @@
     "protractor": "^2.5.1"
   },
   "dependencies": {
+    "async": "^2.0.0-rc.2",
     "autoprefixer": "^6.1.1",
     "aws-sdk": "^2.2.25",
     "babel-preset-es2015": "^6.3.13",
     "connect-modrewrite": "^0.8.2",
     "cssnano": "^3.3.2",
     "serve-static": "^1.10.0",
-    "slack-node": "^0.1.7"
+    "slack-node": "^0.1.7",
+    "web-resource-inliner": "^2.0.0"
   }
 }