Collapse all inlining steps into one function

diff --git a/package.json b/package.json
index 964865c47d13118daa6a5e066c999ad7d5f24a3a..78a6034bacddc4236c382a1e59d76fd2648491cc 100644 (file)
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "handlebars": "^3.0.3",
     "highlight.js": "^8.7.0",
     "inky": "git+https://github.com/zurb/inky-parse.git",
+    "lazypipe": "^1.0.1",
     "marked": "^0.3.5",
     "media-query-extractor": "^0.1.1",
     "multiline": "^1.0.2",

diff --git a/test/gulpfile.js b/test/gulpfile.js
index 3e64798a624bc5ace62c5beef0bbe0a9080c616c..8c4355e0b8bd6cf060cf183500108a3fbcacaea6 100644 (file)
--- a/test/gulpfile.js
+++ b/test/gulpfile.js
@@ -36,21 +36,9 @@ gulp.task('sass', function() {
 
 // Inline CSS and minify HTML
 gulp.task('inline', function() {
-  // Extracts media query-specific CSS into a separate file
-  mq('../_build/css/ink.css', '../_build/css/ink-mq.css', [
-    'only screen and (max-width: 600px)|../_build/css/ink-mq.css'
-  ]);
-
-  var inject = $.inject(gulp.src('../_build/css/ink-mq.css'), {
-    transform: function(path, file) { return '<style>\n' + file.contents.toString() + '\n</style>'; }
-  });
-
   return gulp.src('../_build/*.html')
-    .pipe($.inlineCss())
-    .pipe(inject)
-    .pipe($.htmlmin({
-      collapseWhitespace: false,
-      minifyCSS: true
+    .pipe(inline({
+      css: '../_build/css/ink.css'
     }))
     .pipe(gulp.dest('../_build'));
 });
@@ -74,3 +62,28 @@ gulp.task('default', ['server'], function() {
   gulp.watch('./pages/**/*.html', ['pages', browser.reload]);
   gulp.watch('../scss/**/*.scss', ['sass', browser.reload]);
 });
+
+function inline(options) {
+  var lazypipe = require('lazypipe');
+  var cssPath = options.css;
+  var cssMqPath = cssPath.replace(/\.css$/, '-mq.css');
+
+  // Extracts media query-specific CSS into a separate file
+  mq(cssPath, cssMqPath, [
+    'only screen and (max-width: 580px)|' + cssMqPath
+  ]);
+
+  var pipe = lazypipe()
+    .pipe($.inlineCss)
+    .pipe($.inject, gulp.src(cssMqPath), {
+      transform: function(path, file) {
+        return '<style>\n' + file.contents.toString() + '\n</style>';
+      }
+    })
+    .pipe($.htmlmin, {
+      collapseWhitespace: false,
+      minifyCSS: true
+    });
+
+  return pipe();
+}