From d07be58b048541271b717e0943fc1a87fc9c9629 Mon Sep 17 00:00:00 2001
From: Jeanie Chung <jeanie.chung@gmail.com>
Date: Thu, 19 Feb 2015 12:02:15 -0800
Subject: [PATCH] Added changes to gulpfile to accomodate partials loading.

---
 .gitignore                     |   5 +-
 gulpfile.js                    | 109 +++++++++++++++-----
 html/index.html                | 182 ---------------------------------
 package.json                   |   9 +-
 src/layouts/default.html       |  23 +++++
 src/pages/goodbye.handlebars   |   3 +
 src/pages/hello.handlebars     |   4 +
 src/partials/header.handlebars |   5 +
 8 files changed, 131 insertions(+), 209 deletions(-)
 delete mode 100644 html/index.html
 create mode 100644 src/layouts/default.html
 create mode 100644 src/pages/goodbye.handlebars
 create mode 100644 src/pages/hello.handlebars
 create mode 100644 src/partials/header.handlebars

diff --git a/.gitignore b/.gitignore
index 55b648ed..2345c62f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 *.DS_Store
 node_modules/
-build/
 .sass-cache/
-npm-debug.log
\ No newline at end of file
+npm-debug.log
+temp/
+dist/
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 51969613..26614a42 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -26,6 +26,9 @@ var gulp       = require('gulp'),
     extractMQ  = require('media-query-extractor'),
     inject     = require('gulp-inject'),
     inkyGulp   = require('gulp-inky'),
+    handlebars = require('gulp-compile-handlebars'),
+    omglob     = require('glob'),
+    runOrder   = require('run-sequence'),
     rimraf     = require('rimraf');
 
 // 2. VARIABLES
@@ -33,17 +36,23 @@ var gulp       = require('gulp'),
 
 var dirs = {
   styles: 'scss/*.scss',
-  html: 'html/*.html',
-  build: './build',
-  spec: './spec'
+  dist: './dist',
+  spec: './spec',
+  src: './src',
+  temp: './temp'
 };
 
 // 3. CLEANIN' FILES
 // - - - - - - - - - - - - - - -
 
-// Clean build directory
-gulp.task('clean', function(cb) {
-  rimraf(dirs.build, cb);
+// Clean dist directory
+gulp.task('clean:dist', function(cb) {
+  rimraf(dirs.dist, cb);
+});
+
+// Clean temp directory
+gulp.task('clean:temp', function(cb) {
+  rimraf(dirs.temp, cb);
 });
 
 
@@ -54,37 +63,37 @@ gulp.task('clean', function(cb) {
 gulp.task('sass', function() {
   return gulp.src(dirs.styles)
     .pipe(sass({ "sourcemap=none": true, style: 'compact' }))
-    .pipe(gulp.dest(dirs.build + '/css'))
+    .pipe(gulp.dest(dirs.dist + '/css'))
     .pipe(connect.reload())
 });
 
 // Inline Styles
 gulp.task('inline', function() {
-  return gulp.src(dirs.build + '/*.html')
+  return gulp.src(dirs.dist + '/*.html')
     .pipe(inlineCss())
     .pipe(rename({
       suffix: '-inline'
     }))
-    .pipe(gulp.dest(dirs.build))
+    .pipe(gulp.dest(dirs.dist))
 });
 
 // extract media queries into new CSS file called inkMQ.css
 // any remaining styles will go into ink-noMQ.css
 gulp.task('extract-mq', function () {
-  extractMQ( dirs.build + '/css/ink.css', dirs.build + '/css/ink-noMQ.css', ['only screen and (max-width: 600px)|./build/css/inkMQ.css']);
+  extractMQ( dirs.dist + '/css/ink.css', dirs.dist + '/css/ink-noMQ.css', ['only screen and (max-width: 600px)|./dist/css/inkMQ.css']);
 });
 
 // inject media queries into the head of the inlined email
 gulp.task('inject-mq', ['extract-mq'], function() {
-  gulp.src(dirs.build + '/index-inline.html')
-    .pipe(inject(gulp.src(dirs.build + '/css/inkMQ.css'), {
+  gulp.src(dirs.dist + '/index-inline.html')
+    .pipe(inject(gulp.src(dirs.dist + '/css/inkMQ.css'), {
       starttag: '<!-- inject:mq-css -->',
       transform: function (filePath, file) {
         // return file contents as string
         return "<style>\n" + file.contents.toString('utf8') + "\n</style>"
       }
     }))
-    .pipe(gulp.dest('./build'));
+    .pipe(gulp.dest('./dist'));
 })
 
 
@@ -99,37 +108,91 @@ gulp.task('minify-html', function() {
     spare: true
   };
 
-  gulp.src(dirs.build)
+  gulp.src(dirs.dist)
     .pipe(minifyHTML(opts))
     .pipe(connect.reload())
 });
 
 // Convert HTML to plain text, just in caseies
 gulp.task('html-plaintext', function() {
-  gulp.src(dirs.html)
+  gulp.src(dirs.dist)
     .pipe(html2txt())
     .pipe(rename(function(path) {
       path.basename += '-plaintext'
     }))
-    .pipe(gulp.dest(dirs.build));
+    .pipe(gulp.dest(dirs.dist));
 });
 
 // Task to copy HTML directly, without minifying
 gulp.task('copy-html', function() {
-  return gulp.src(dirs.html)
-  .pipe(gulp.dest(dirs.build))
+  return gulp.src(dirs.src + '/layouts/*.html')
+  .pipe(gulp.dest(dirs.dist))
   .pipe(connect.reload())
 });
 
+// Inject html partials into default page
+gulp.task('inject-html', function() {
+  omglob(dirs.temp + '/*.html', function(er, files) {
+    for (var i = 0; i < files.length; i++) {
+      var filePath = files[i].replace(/\\/g, '/');
+      var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
+
+       gulp.src(dirs.src + '/layouts/default.html')
+        .pipe(inject(gulp.src(files[i]), {
+          starttag: '<!-- inject:page:{{ext}} -->',
+          transform: function (filePath, file) {
+          // return file contents as string 
+          return file.contents.toString('utf8')
+        }
+      }))
+      .pipe(rename({
+        basename: fileName
+      }))
+      .pipe(gulp.dest(dirs.dist));     
+    }
+  })
+});
+
+// Inject handlebars partials
+gulp.task('inject-handlebars', function() {
+  
+  omglob(dirs.src + '/pages/*.handlebars', function(er, files) {
+
+    for (var i = 0; i < files.length; i++) {
+      var filePath = files[i].replace(/\\/g, '/');
+      var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
+
+      var templateData = {},
+          options = {
+            batch : ['./src/partials']
+          };
+   
+      gulp.src(files[i])
+        .pipe(handlebars(templateData, options))
+        .pipe(rename(fileName + '.html'))
+        .pipe(gulp.dest(dirs.temp));
+    }
+  })
+});
+
+gulp.task('compile', function() {
+  runOrder('clean:temp', 'inject-handlebars', function() {
+    // better way to do this?
+    setTimeout(function() {
+      gulp.start('inject-html')
+    }, 50);
+  });
+})
+
 // 6. Syntax Transformer
 // - - - - - - - - - - - - - - -
 
 // get the HTML from the body and run it through Inky parser
 
 gulp.task('query', function() {
-  gulp.src(dirs.html)
+  gulp.src(dirs.dist + '/*.html')
     .pipe(inkyGulp())
-    .pipe(gulp.dest(dirs.build))
+    .pipe(gulp.dest(dirs.dist))
     .pipe(connect.reload());
 });
 
@@ -145,7 +208,7 @@ gulp.task('test', function () {
 // - - - - - - - - - - - - - - -
 
 // Wipes build folder, then compiles SASS, then minifies and copies HTML
-gulp.task('build', ['clean', 'sass', 'query'], function() {
+gulp.task('build', ['clean:dist', 'sass', 'query'], function() {
   gulp.start('minify-html');
 });
 
@@ -156,7 +219,7 @@ gulp.task('build', ['clean', 'sass', 'query'], function() {
 // Default Port: 8080
 gulp.task('serve', function() {
   return connect.server({
-    root: dirs.build,
+    root: dirs.dist,
     livereload: true
   });
 });
@@ -165,7 +228,7 @@ gulp.task('serve', function() {
 // Watch all HTML files and SCSS files for changes
 // Live reloads on change
 gulp.task('watch', ['serve'], function() {
-  gulp.watch([dirs.html], ['query','minify-html']);
+  gulp.watch([dirs.src], ['compile','query','minify-html']);
   gulp.watch([dirs.styles], ['sass']);
 });
 
diff --git a/html/index.html b/html/index.html
deleted file mode 100644
index 3e0ccd79..00000000
--- a/html/index.html
+++ /dev/null
@@ -1,182 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" type="text/css" href="/css/ink.css">
-  <!-- inject:mq-css -->
-  <!-- endinject -->
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <meta name="viewport" content="width=device-width"/>
-    <style>
-
-    table.facebook td {
-      background: #3b5998;
-      border-color: #2d4473;
-    }
-
-    table.facebook:hover td {
-      background: #2d4473 !important;
-    }
-
-    table.twitter td {
-      background: #00acee;
-      border-color: #0087bb;
-    }
-
-    table.twitter:hover td {
-      background: #0087bb !important;
-    }
-
-    table.google-plus td {
-      background-color: #DB4A39;
-      border-color: #CC0000;
-    }
-
-    table.google-plus:hover td {
-      background: #CC0000 !important;
-    }
-
-    .template-label {
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 11px;
-    }
-
-    .callout .panel {
-      background: #ECF8FF;
-      border-color: #b9e5ff;
-    }
-
-    .header {
-      background: #999999;
-    }
-
-    .footer .wrapper {
-      background: #ebebeb;
-    }
-
-    .footer h5 {
-      padding-bottom: 10px;
-    }
-
-    table.columns .text-pad {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-
-    table.columns .left-text-pad {
-      padding-left: 10px;
-    }
-
-    table.columns .right-text-pad {
-      padding-right: 10px;
-    }
-
-    @media only screen and (max-width: 600px) {
-
-      table[class="body"] .right-text-pad {
-        padding-left: 10px !important;
-      }
-
-      table[class="body"] .left-text-pad {
-        padding-right: 10px !important;
-      }
-    }
-
-  </style>
-</head>
- 
-<body>
-  <table class="body">
-    <tr>
-      <td class="center" align="center" valign="top">
-        <center>
-          <row class="header">
-            <columns large='12' small='12'>
-              <subcolumns large='6' small='6'>
-                <img src="http://placehold.it/200x50">
-              </subcolumns>
-              <subcolumns large='6' small='6'>
-                <span class="template-label">SIDEBAR HERO</span>
-              </subcolumns>
-            </columns>
-           </row>
-           <container>
-            <row>
-              <columns large='12'>
-                <h1>Welcome, Daneel Olivan</h1>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
-                <img width="580" height="300" src="http://placehold.it/580x300">
-              </columns>
-            </row>
-            <row>
-              <columns large='12'>
-                <callout>
-                  <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-                </callout>
-              </columns>
-            </row>
-            <row>
-              <columns large='6'>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-                <button><a href="#">Click Me!</a></button>
-              </columns>
-              <columns large='6'>
-                <callout>
-                  <h6>Header Thing</h6>
-                  <p>Sub-head or something</p>
-                  <inline-list-v>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <hr>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <hr>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <hr>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                    <hr>
-                    <a href="#">Just a Plain Link &raquo;</a>
-                  </inline-list-v>
-                </callout>
-              </columns>
-            </row>
-            <row>
-              <columns large='6'>
-              </columns>
-              <columns large='6'>
-                <callout>
-                  <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                  <button class="tiny-button facebook">
-                    <a href='#'>Facebook</a>
-                  </button>
-                  <hr>
-                  <button class="tiny-button twitter">
-                    <a href='#'>Twitter</a>
-                  </button>
-                  <hr>
-                  <button class="tiny-button google-plus">
-                    <a href='#'>Google</a>
-                  </button>
-                  <br>
-                  <h6 style="margin-bottom:5px;">Contact Info:</h6>
-                  <p>Phone: <b>408.341.0600</b></p>
-                  <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
-                </callout>
-              </columns>
-            </row>
-            <row>
-              <columns large='12'>
-                <center>
-                  <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
-                </center>
-              </columns>
-            </row>
-           </container>
-        </center>
-      </td>
-    </tr>
-  </table>
-</body>
-</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 123023b6..443c41a0 100644
--- a/package.json
+++ b/package.json
@@ -4,16 +4,21 @@
   "description": "A framework for responsive emails made by ZURB",
   "devDependencies": {
     "cheerio": "^0.18.0",
+    "glob": "^4.4.0",
     "gulp": "^3.8.10",
+    "gulp-compile-handlebars": "^0.4.4",
     "gulp-concat": "^2.4.3",
     "gulp-connect": "^2.2.0",
+    "gulp-foreach": "^0.1.0",
     "gulp-html2txt": "^1.1.0",
+    "gulp-inky": "*",
     "gulp-inline-css": "^1.0.1",
     "gulp-jasmine": "^2.0.0",
     "gulp-minify-html": "^0.1.8",
     "gulp-rename": "^1.2.0",
     "gulp-ruby-sass": "^0.7.1",
-    "gulp-inky": "*",
-    "rimraf": "^2.2.8"
+    "rimraf": "^2.2.8",
+    "run-sequence": "^1.0.2",
+    "vinyl-map": "^1.0.1"
   }
 }
diff --git a/src/layouts/default.html b/src/layouts/default.html
new file mode 100644
index 00000000..9505870a
--- /dev/null
+++ b/src/layouts/default.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="/css/ink.css">
+  <!-- inject:mq-css -->
+  <!-- endinject -->
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width"/>
+</head>
+ 
+<body>
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
+        <center>
+         <!-- inject:page:html -->
+         <!-- endinject -->
+        </center>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/goodbye.handlebars b/src/pages/goodbye.handlebars
new file mode 100644
index 00000000..e0f26a9a
--- /dev/null
+++ b/src/pages/goodbye.handlebars
@@ -0,0 +1,3 @@
+<row>
+  <h6>Goodbasdfasdfye</h6>
+</row>
\ No newline at end of file
diff --git a/src/pages/hello.handlebars b/src/pages/hello.handlebars
new file mode 100644
index 00000000..bc5e2f76
--- /dev/null
+++ b/src/pages/hello.handlebars
@@ -0,0 +1,4 @@
+<row>
+  <h1>Hello!</h1>
+</row>
+{{> header }}
\ No newline at end of file
diff --git a/src/partials/header.handlebars b/src/partials/header.handlebars
new file mode 100644
index 00000000..036387df
--- /dev/null
+++ b/src/partials/header.handlebars
@@ -0,0 +1,5 @@
+<row>
+  <columns large='12'>
+  header maybe?
+  </columns>
+</row>
\ No newline at end of file
-- 
2.47.3