lbineau/PATHS.md

## README.md

      
    Raw
  

              README.md
            
          
    Build Commands

Run npm start to kick off the build process. A new browser tab will open with a server pointing to your project files.
Run npm run build to inline your CSS into your HTML along with the rest of the build process.
Run npm run litmus to build as above, then submit to litmus for testing. AWS S3 Account details required (config.json)
Run npm run zip to build as above, then zip HTML and images for easy deployment to email marketing services.
You can add a language (en by default) by adding:
-- --lang=cn

  
## cn.json
{
  "helloworld":"你好"
}

## default.html
{{!-- This is the base layout for your project, and will be used on every page. --}}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>{{subject}}</title>
  </head>
  <body>
    <!-- <style> -->
    {{setlang}}{{!-- set the @root.lang value before access to it --}}
    <span class="preheader">{{description}}</span>
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
            {{> body}}
          </center>
        </td>
      </tr>
    </table>
    <!-- prevent Gmail on iOS font size manipulation -->
   <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  </body>
</html>

## gulpfile.babel.js
import gulp     from 'gulp';
import plugins  from 'gulp-load-plugins';
import browser  from 'browser-sync';
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';
import path     from 'path';
import merge    from 'merge-stream';
import beep     from 'beepbeep';
import colors   from 'colors';

// get language from CLI
var argv = yargs
                .default('lang', 'en')
                .string('lang')
                .argv

const $ = plugins();

const LANG = argv.lang;

const DIST = 'dist/' + LANG;

// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);

// Declar var so that both AWS and Litmus task can use it.
var CONFIG;

// Build the "dist" folder by running all of the above tasks
gulp.task('build',
  gulp.series(clean, pages, sass, images, inline));

// Build emails, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Build emails, then send to litmus
gulp.task('litmus',
  gulp.series('build', creds, aws, litmus));

// Build emails, then zip
gulp.task('zip',
  gulp.series('build', zip));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf('dist', done);
}

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
    .pipe(panini({
      root: 'src/pages',
      layouts: 'src/layouts',
      partials: 'src/partials',
      helpers: 'src/helpers'
    }))
    .pipe(inky())
    .pipe(gulp.dest(DIST));
}

// Reset Panini's cache of layouts and partials
function resetPages(done) {
  panini.refresh();
  done();
}

// Compile Sass into CSS
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(DIST + '/css'));
}

// Copy and compress images
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.imagemin())
    .pipe(gulp.dest(DIST + '/assets/img'));
}

// Inline CSS and minify HTML
function inline() {
  return gulp.src(DIST + '/**/*.html')
    .pipe($.if(PRODUCTION, inliner(DIST + '/css/app.css')))
    .pipe(gulp.dest(DIST));
}

// Start a server with LiveReload to preview the site in
function server(done) {
  browser.init({
    server: DIST
  });
  done();
}

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(resetPages, sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', 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(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
    .pipe($.inlineCss, {
      applyStyleTags: false,
      removeStyleTags: false,
      removeLinkTags: false
    })
    .pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
    .pipe($.htmlmin, {
      collapseWhitespace: true,
      minifyCSS: true
    });

  return pipe();
}

// Ensure creds for Litmus are at least there.
function creds(done) {
  var configPath = './config.json';
  try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
  catch(e) {
    beep();
    console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
    process.exit();
  }
  done();
}

// Post images to AWS S3 so they are accessible to Litmus test
function aws() {
  var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
  var headers = {
    'Cache-Control': 'max-age=315360000, no-transform, public'
  };

  return gulp.src(DIST + '/assets/img/*')
    // publisher will add Content-Length, Content-Type and headers specified above
    // If not specified it will set x-amz-acl to public-read by default
    .pipe(publisher.publish(headers))

    // create a cache file to speed up consecutive uploads
    //.pipe(publisher.cache())

    // print upload updates to console
    .pipe($.awspublish.reporter());
}

// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
function litmus() {
  var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;

  return gulp.src('dist/**/*.html')
    .pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL)))
    .pipe($.litmus(CONFIG.litmus))
    .pipe(gulp.dest('dist'));
}

// Copy and compress into Zip
function zip() {
  var dist = DIST;
  var ext = '.html';

  function getHtmlFiles(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        var fileExt = path.join(dir, file);
        var isHtml = path.extname(fileExt) == ext;
        return fs.statSync(fileExt).isFile() && isHtml;
      });
  }
  var htmlFiles = getHtmlFiles(DIST);

  var moveTasks = htmlFiles.map(function(file){
    var sourcePath = path.join(DIST, file);
    var fileName = path.basename(sourcePath, ext);

    var moveHTML = gulp.src(sourcePath)
      .pipe($.rename(function (path) {
        path.dirname = fileName;
        return path;
      }));

    var moveImages = gulp.src(sourcePath)
      .pipe($.htmlSrc({ selector: 'img'}))
      .pipe($.rename(function (path) {
        path.dirname = fileName + '/assets/img';
        return path;
      }));

    // output zip to ROOT (ex: index-en.zip)
    return merge(moveHTML, moveImages)
      .pipe($.zip(fileName + '-' + LANG + '.zip'))
      .pipe(gulp.dest('dist'));
  });

  return merge(moveTasks);
}

## i18n.js
import yargs from 'yargs'
var argv = yargs
                .default('lang', 'en')
                .string('lang')
                .argv
var t = require('./../data/i18n/' + argv.lang + '.json')
/**
 * i18n helper for Handlebars
 * @example
 * {{i18n key="my_key"}}
 */
module.exports = function(options) {
  return t[options.hash.key]
}

## index.html
<p>
  Language: {{@root.language}} {{!-- get the @root.lang value --}}
</p>
<p>
  Translation of key "helloworld": {{i18n key="helloworld"}}
</p>

## PATHS.md

      
    Raw
  

              PATHS.md
            
          
    src
├── layouts
│   └── default.html
├── pages
│   └── index.html
├── data
│   └── i18n
│       ├── cn.json
│       └── template.html
└── helpers
    ├── i18n.js
    └── setlang.js
README.md
gulpfile.babel.js


## setlang.js
import yargs from 'yargs'
var argv = yargs
                .default('lang', 'en')
                .string('lang')
                .argv
/**
 * set current language used helper for Handlebars (because we cannot access the Handlebars instanciation)
 * @example
 * {{setlang}}
 * then
 * {{@root.lang}}
 */
module.exports = function(options) {
  // set language variable
  options.data.root.language = argv.lang
}
	{{!-- This is the base layout for your project, and will be used on every page. --}}

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
	<link rel="stylesheet" type="text/css" href="css/app.css">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width">
	<title>{{subject}}</title>
	</head>
	<body>
	<!-- <style> -->
	{{setlang}}{{!-- set the @root.lang value before access to it --}}
	<span class="preheader">{{description}}</span>
	<table class="body">
	<tr>
	<td class="center" align="center" valign="top">
	<center>
	{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
	{{> body}}
	</center>
	</td>
	</tr>
	</table>
	<!-- prevent Gmail on iOS font size manipulation -->
	<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">                                                             </div>
	</body>
	</html>
	import gulp from 'gulp';
	import plugins from 'gulp-load-plugins';
	import browser from 'browser-sync';
	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';
	import path from 'path';
	import merge from 'merge-stream';
	import beep from 'beepbeep';
	import colors from 'colors';

	// get language from CLI
	var argv = yargs
	.default('lang', 'en')
	.string('lang')
	.argv

	const $ = plugins();

	const LANG = argv.lang;

	const DIST = 'dist/' + LANG;

	// Look for the --production flag
	const PRODUCTION = !!(yargs.argv.production);

	// Declar var so that both AWS and Litmus task can use it.
	var CONFIG;

	// Build the "dist" folder by running all of the above tasks
	gulp.task('build',
	gulp.series(clean, pages, sass, images, inline));

	// Build emails, run the server, and watch for file changes
	gulp.task('default',
	gulp.series('build', server, watch));

	// Build emails, then send to litmus
	gulp.task('litmus',
	gulp.series('build', creds, aws, litmus));

	// Build emails, then zip
	gulp.task('zip',
	gulp.series('build', zip));

	// Delete the "dist" folder
	// This happens every time a build starts
	function clean(done) {
	rimraf('dist', done);
	}

	// Compile layouts, pages, and partials into flat HTML files
	// Then parse using Inky templates
	function pages() {
	return gulp.src('src/pages/*/.html')
	.pipe(panini({
	root: 'src/pages',
	layouts: 'src/layouts',
	partials: 'src/partials',
	helpers: 'src/helpers'
	}))
	.pipe(inky())
	.pipe(gulp.dest(DIST));
	}

	// Reset Panini's cache of layouts and partials
	function resetPages(done) {
	panini.refresh();
	done();
	}

	// Compile Sass into CSS
	function sass() {
	return gulp.src('src/assets/scss/app.scss')
	.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
	.pipe($.sass({
	includePaths: ['node_modules/foundation-emails/scss']
	}).on('error', $.sass.logError))
	.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
	.pipe(gulp.dest(DIST + '/css'));
	}

	// Copy and compress images
	function images() {
	return gulp.src('src/assets/img/*/')
	.pipe($.imagemin())
	.pipe(gulp.dest(DIST + '/assets/img'));
	}

	// Inline CSS and minify HTML
	function inline() {
	return gulp.src(DIST + '/*/.html')
	.pipe($.if(PRODUCTION, inliner(DIST + '/css/app.css')))
	.pipe(gulp.dest(DIST));
	}

	// Start a server with LiveReload to preview the site in
	function server(done) {
	browser.init({
	server: DIST
	});
	done();
	}

	// Watch for file changes
	function watch() {
	gulp.watch('src/pages/*/.html').on('change', gulp.series(pages, inline, browser.reload));
	gulp.watch(['src/layouts/*/', 'src/partials/*/']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
	gulp.watch(['../scss/*/.scss', 'src/assets/scss/*/.scss']).on('change', gulp.series(resetPages, sass, pages, inline, browser.reload));
	gulp.watch('src/assets/img/*/').on('change', 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(css) {
	var css = fs.readFileSync(css).toString();
	var mqCss = siphon(css);

	var pipe = lazypipe()
	.pipe($.inlineCss, {
	applyStyleTags: false,
	removeStyleTags: false,
	removeLinkTags: false
	})
	.pipe($.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
	.pipe($.htmlmin, {
	collapseWhitespace: true,
	minifyCSS: true
	});

	return pipe();
	}

	// Ensure creds for Litmus are at least there.
	function creds(done) {
	var configPath = './config.json';
	try { CONFIG = JSON.parse(fs.readFileSync(configPath)); }
	catch(e) {
	beep();
	console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md');
	process.exit();
	}
	done();
	}

	// Post images to AWS S3 so they are accessible to Litmus test
	function aws() {
	var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create();
	var headers = {
	'Cache-Control': 'max-age=315360000, no-transform, public'
	};

	return gulp.src(DIST + '/assets/img/*')
	// publisher will add Content-Length, Content-Type and headers specified above
	// If not specified it will set x-amz-acl to public-read by default
	.pipe(publisher.publish(headers))

	// create a cache file to speed up consecutive uploads
	//.pipe(publisher.cache())

	// print upload updates to console
	.pipe($.awspublish.reporter());
	}

	// Send email to Litmus for testing. If no AWS creds then do not replace img urls.
	function litmus() {
	var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;

	return gulp.src('dist/*/.html')
	.pipe($.if(!!awsURL, $.replace(/=('\|")(\/?assets\/img)/g, "=$1"+ awsURL)))
	.pipe($.litmus(CONFIG.litmus))
	.pipe(gulp.dest('dist'));
	}

	// Copy and compress into Zip
	function zip() {
	var dist = DIST;
	var ext = '.html';

	function getHtmlFiles(dir) {
	return fs.readdirSync(dir)
	.filter(function(file) {
	var fileExt = path.join(dir, file);
	var isHtml = path.extname(fileExt) == ext;
	return fs.statSync(fileExt).isFile() && isHtml;
	});
	}
	var htmlFiles = getHtmlFiles(DIST);

	var moveTasks = htmlFiles.map(function(file){
	var sourcePath = path.join(DIST, file);
	var fileName = path.basename(sourcePath, ext);

	var moveHTML = gulp.src(sourcePath)
	.pipe($.rename(function (path) {
	path.dirname = fileName;
	return path;
	}));

	var moveImages = gulp.src(sourcePath)
	.pipe($.htmlSrc({ selector: 'img'}))
	.pipe($.rename(function (path) {
	path.dirname = fileName + '/assets/img';
	return path;
	}));

	// output zip to ROOT (ex: index-en.zip)
	return merge(moveHTML, moveImages)
	.pipe($.zip(fileName + '-' + LANG + '.zip'))
	.pipe(gulp.dest('dist'));
	});

	return merge(moveTasks);
	}
	import yargs from 'yargs'
	var argv = yargs
	.default('lang', 'en')
	.string('lang')
	.argv
	var t = require('./../data/i18n/' + argv.lang + '.json')
	/**
	* i18n helper for Handlebars
	* @example
	* {{i18n key="my_key"}}
	*/
	module.exports = function(options) {
	return t[options.hash.key]
	}
	<p>
	Language: {{@root.language}} {{!-- get the @root.lang value --}}
	</p>
	<p>
	Translation of key "helloworld": {{i18n key="helloworld"}}
	</p>