feat(tasks): Add option to return non-serialized dom.

sparanoid · Sep 22, 2018 · 95345d0 · 95345d0
1 parent ea3409d
commit 95345d0
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 9 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -104,6 +104,19 @@ module.exports = function(grunt) {
           'tmp/size_limit.html': 'test/fixtures/index.html',
         },
       },
+      fragment: {
+        options: {
+          minify: false,
+          serialize: false,
+          inlineImg: true,
+          inlineSvg: true,
+          inlineSvgBase64: true,
+          inlineLinkTags: true,
+        },
+        files: {
+          'tmp/fragment.html': 'test/fixtures/index-fragment.html',
+        },
+      },
       all: {
         options: {
           jsDir: "",

diff --git a/package-lock.json b/package-lock.json
diff --git a/tasks/assets_inline.js b/tasks/assets_inline.js
@@ -32,6 +32,7 @@ module.exports = function(grunt) {
       cssDir: "",
       assetsDir: "",
       minify: false,
+      serialize: true,
       inlineImg: false,
       inlineImgFileLimit: undefined,
       inlineSvg: true,
@@ -371,7 +372,12 @@ module.exports = function(grunt) {
         }
       }
 
-      var html = dom.serialize();
+      if (options.serialize) {
+        var html = dom.serialize();
+      } else {
+        var html = dom.window.document.firstChild.outerHTML.replace(/<(\/?)(html|head|body)>/gm, '');
+      }
+
       grunt.file.write(path.resolve(filePair.dest), html);
       grunt.log.writeln(('Created: ').green + path.resolve(filePair.dest) + '\n');
     });

diff --git a/test/assets_inline_test.js b/test/assets_inline_test.js
@@ -36,7 +36,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  minify: function(test){
+  minify: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/minify.html');
@@ -45,7 +45,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  inline_img: function(test){
+  inline_img: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/inline_img.html');
@@ -54,7 +54,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  inline_svg: function(test){
+  inline_svg: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/inline_svg.html');
@@ -63,7 +63,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  inline_svg_base64: function(test){
+  inline_svg_base64: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/inline_svg_base64.html');
@@ -72,7 +72,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  include_tag: function(test){
+  include_tag: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/include_tag.html');
@@ -81,7 +81,7 @@ exports.assets_inline = {
 
     test.done();
   },
-  size_limit: function(test){
+  size_limit: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/size_limit.html');
@@ -90,7 +90,16 @@ exports.assets_inline = {
 
     test.done();
   },
-  all: function(test){
+  fragment: function(test) {
+    test.expect(1);
+
+    var actual = grunt.file.read('tmp/fragment.html');
+    var expected = grunt.file.read('test/expected/fragment.html');
+    test.equal(actual, expected, 'tests fragment html');
+
+    test.done();
+  },
+  all: function(test) {
     test.expect(1);
 
     var actual = grunt.file.read('tmp/all.html');

diff --git a/test/expected/fragment.html b/test/expected/fragment.html
diff --git a/test/fixtures/index-fragment.html b/test/fixtures/index-fragment.html
@@ -0,0 +1,96 @@
+<link rel="icon" href="favicon/favicon.png" type="image/png">
+<link rel="icon" href="favicon/favicon.svg" sizes="any" type="image/svg+xml">
+<link rel="mask-icon" href="favicon/mask-icon.svg" color="#000">
+<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
+
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css?assets-inline">
+<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css?assets-inline">
+<link rel="stylesheet" name="app-css" href="css/app.css">
+<link rel="stylesheet" href="css/inline.css?assets-inline">
+
+<style>
+body {
+  background-image: url("./svg/disable-wysiwyg.svg");
+}
+body {
+  background-image: url("./img/imouto-logo-large.png");
+}
+body {
+  background-image: url("./svg/kai.svg");
+}
+body {
+  background-image: url("./img/superfeedr.png");
+}
+body {
+  background-image: url("./svg/slimpack-bg.svg");
+}
+</style>
+
+<style data-assets-inline>
+body {
+  background-image: url("./svg/disable-wysiwyg.svg");
+}
+body {
+  background-image: url("./img/imouto-logo-large.png");
+}
+body {
+  background-image: url("./svg/kai.svg");
+}
+body {
+  background-image: url("./img/superfeedr.png");
+}
+body {
+  background-image: url("./svg/slimpack-bg.svg");
+}
+</style>
+
+<h1>grunt-assets-inline</h1>
+
+<p onclick='alert("test")'>Hello world! This is a test.</p>
+
+<p>'../php_includes/googleTracking.php'</p>
+
+<?php
+//google tracking code
+include '../php_includes/googleTracking.php';
+?>
+
+<h2>This is a background image</h2>
+<div class="backgroud-test-image"></div>
+
+<h2>This is a SVG background</h2>
+<div class="backgroud-test-svg"></div>
+
+<h2>This is an image not inlined when inlineImgFileLimit is set</h2>
+<img src="img/imouto-logo-large.png">
+
+<h2>This is an image</h2>
+<img src="img/superfeedr.png">
+
+<h2>This is a SVG image</h2>
+<img src="svg/disable-wysiwyg.svg">
+
+<svg width="60px" height="52px" viewBox="0 0 60 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-product-bayesgear</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.5">
+        <g id="Homepage-#8" transform="translate(-685.000000, -719.000000)" fill="#000000">
+            <g id="product-1-copy" transform="translate(653.000000, 695.000000)">
+                <g id="icon-product-bayesgear" transform="translate(32.000000, 24.000000)">
+                    <polygon id="slice-1" points="0 37.7956508 35.6454255 25.8461403 59.6392526 39.2743701 23.9938271 51.2238806"></polygon>
+                    <polygon id="slice-2" points="0 29.2583374 35.6454255 17.3088268 59.6392526 30.7370566 23.9938271 42.6865672"></polygon>
+                    <polygon id="slice-3" points="0 20.7210239 35.6454255 8.77151339 59.6392526 22.1997432 23.9938271 34.1492537"></polygon>
+                    <polygon id="slice-4" points="0 12.1837105 35.6454255 0.234199955 59.6392526 13.6624298 23.9938271 25.6119403"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?assets-inline"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?assets-inline"></script>
+<script>console.log('This should not be replaced.');</script>
+<script src="js/app.js"></script>
+<script src="js/inline.js?assets-inline"></script>