Update testing Gulpfile and dependencies to match the ones in zurb/foundation-emails...

diff --git a/testing/gulpfile.babel.js b/testing/gulpfile.babel.js
index 67c54198214747afc31f2055cf71ab9b7b4631ee..47233536b2ab3e32e2f687f7a494625b0c903cdb 100644 (file)
--- a/testing/gulpfile.babel.js
+++ b/testing/gulpfile.babel.js
@@ -1,25 +1,22 @@
 import gulp     from 'gulp';
 import plugins  from 'gulp-load-plugins';
 import browser  from 'browser-sync';
-import mq       from 'media-query-extractor';
 import rimraf   from 'rimraf';
 import panini   from 'panini';
 import yargs    from 'yargs';
 import lazypipe from 'lazypipe';
 import inky     from 'inky';
+import fs       from 'fs';
+import siphon   from 'siphon-media-query';
 
 const $ = plugins();
 
 // Look for the --production flag
 const PRODUCTION = !!(yargs.argv.production);
 
-// Only inline if the --production flag is enabled
-var buildTasks = [clean, pages, sass, images];
-if (PRODUCTION) buildTasks.push(inline);
-
 // Build the "dist" folder by running all of the above tasks
 gulp.task('build',
-  gulp.series.apply(gulp, buildTasks));
+  gulp.series(clean, pages, sass, images, inline));
 
 // Build emails, run the server, and watch for file changes
 gulp.task('default',
@@ -35,12 +32,12 @@ function clean(done) {
 // Then parse using Inky templates
 function pages() {
   return gulp.src('src/pages/**/*.html')
-    .pipe(inky())
     .pipe(panini({
       root: 'src/pages',
       layouts: 'src/layouts',
       partials: 'src/partials'
     }))
+    .pipe(inky())
     .pipe(gulp.dest('dist'));
 }
 
@@ -54,7 +51,9 @@ function resetPages(done) {
 function sass() {
   return gulp.src('src/assets/scss/app.scss')
     .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
-    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.sass({
+      includePaths: ['node_modules/foundation-emails/scss']
+    }).on('error', $.sass.logError))
     .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
     .pipe(gulp.dest('dist/css'));
 }
@@ -69,9 +68,7 @@ function images() {
 // Inline CSS and minify HTML
 function inline() {
   return gulp.src('dist/**/*.html')
-    .pipe(inliner({
-      css: 'dist/css/app.css'
-    }))
+    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
     .pipe(gulp.dest('dist'));
 }
 
@@ -85,29 +82,22 @@ function server(done) {
 
 // Watch for file changes
 function watch() {
-  gulp.watch('src/pages/**/*.html', gulp.series(pages, browser.reload));
-  gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, browser.reload));
-  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, browser.reload));
+  gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload));
+  gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));
+  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));
   gulp.watch('src/img/**/*', gulp.series(images, browser.reload));
 }
 
 // Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
-function inliner(options) {
-  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
-  ]);
+function inliner(css) {
+  var css = fs.readFileSync(css).toString();
+  var mqCss = siphon(css);
 
   var pipe = lazypipe()
-    .pipe($.inlineCss)
-    .pipe($.inject, gulp.src(cssMqPath), {
-      transform: function(path, file) {
-        return '<style>\n' + file.contents.toString() + '\n</style>';
-      }
+    .pipe($.inlineCss, {
+      applyStyleTags: false
     })
+    .pipe($.injectString.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
     .pipe($.htmlmin, {
       collapseWhitespace: true,
       minifyCSS: true

diff --git a/testing/package.json b/testing/package.json
index 4e569ef441b404df4a4be3fdd27482c30dc60027..01d87b01d81de3e7d91e1aa2a61de81173b744fa 100644 (file)
--- a/testing/package.json
+++ b/testing/package.json
@@ -1,14 +1,18 @@
 {
   "name": "foundation-emails-template",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Basic template for a Foundation for Emails project.",
-  "main": "gulpfile.js",
+  "repository": "zurb/foundation-emails-template",
+  "main": "gulpfile.babel.js",
   "scripts": {
     "start": "gulp",
     "build": "gulp --production"
   },
   "author": "ZURB <foundation@zurb.com>",
   "license": "MIT",
+  "dependencies": {
+    "foundation-emails": "2.0.0-rc.3"
+  },
   "devDependencies": {
     "babel-core": "^6.3.26",
     "babel-preset-es2015": "^6.3.13",
@@ -18,17 +22,16 @@
     "gulp-htmlmin": "^1.1.1",
     "gulp-if": "^2.0.0",
     "gulp-imagemin": "^2.4.0",
-    "gulp-inject": "^3.0.0",
+    "gulp-inject-string": "^1.1.0",
     "gulp-inline-css": "^3.0.0",
     "gulp-load-plugins": "^1.1.0",
     "gulp-sass": "^2.1.0",
     "gulp-sourcemaps": "^1.6.0",
-    "gulp-webserver": "^0.9.1",
-    "inky": "^1.2.1",
+    "inky": "^1.2.0",
     "lazypipe": "^1.0.1",
-    "media-query-extractor": "^0.1.1",
-    "panini": "^1.1.1",
+    "panini": "^1.2.0",
     "rimraf": "^2.3.3",
-    "yargs": "^3.9.0"
+    "siphon-media-query": "^1.0.0",
+    "yargs": "^4.1.0"
   }
 }