WIP: Experimental implementation for compiling email templates (usage from foundation for emails)

config/browser-sync-email.json.sample

@@ -0,0 +1,11 @@
+{
+  "server": {
+    "baseDir": "../../../"
+  },
+  "files": [
+    "../../../app/design/frontend/**/email/**/*.html",
+    "../../../pub/static/frontend/**/email.css"
+  ],
+  "open": false,
+  "startPath": "app/design/frontend/"
+}

gulpfile.js

@@ -10,7 +10,10 @@ const plugins = require('gulp-load-plugins')({
           'marked-terminal' : 'markedTerminal',
           'merge-stream'    : 'mergeStream',
           'postcss-reporter': 'reporter',
-          'run-sequence'    : 'runSequence'
+          'run-sequence'    : 'runSequence',
+          'panini'          : 'panini',
+          'inky'            : 'inky',
+          'siphon-media-query' : 'siphon',
         }
       }),
       config = {};

helper/inky.js

@@ -0,0 +1,73 @@
+'use strict';
+module.exports = function(gulp, plugins, config, name, file) { // eslint-disable-line func-names
+  const theme       = config.themes[name],
+        srcBase     = config.projectPath + 'var/view_preprocessed/frontools' + theme.dest.replace('pub/static', ''),
+        dest        = [],
+        srcTheme    = [],
+        themeName   = srcBase.split('/frontools/frontend/')[1],
+        enableInliner = plugins.util.env.enableInliner || false;
+
+  function adjustDestinationDirectory(file) {
+    file.dirname = file.dirname.replace('web/', '');
+    return file;
+  }
+
+  theme.locale.forEach(locale => {
+    dest.push(config.projectPath + theme.dest + '/' + locale);
+  });
+
+  srcTheme.push(config.projectPath + theme.src);
+
+  // Return empty stream if no email directory is included
+  if (!plugins.fs.existsSync(srcBase + '/email')) {
+    return [];
+  }
+
+  const PaniniInstance = require('panini').Panini, // eslint-disable-line one-var
+        panini = new PaniniInstance({
+          root: srcBase + '/',
+          layouts: srcBase + '/email/layouts/',
+          partials: srcBase + '/email/partials/',
+          helpers: srcBase + '/email/helpers/'
+        });
+
+  panini.loadBuiltinHelpers();
+
+  return gulp.src(
+    file || srcBase + '/**/*.email.hbs',
+    { base: srcBase }
+  )
+    .pipe(
+      plugins.if(
+        !plugins.util.env.ci,
+        plugins.plumber({
+          errorHandler: plugins.notify.onError('Error: <%= error.message %>')
+        })
+      )
+    )
+    .pipe(panini.render())
+    .pipe(plugins.if(!enableInliner, plugins.replace('###THEME-NAME###', themeName)))
+    .pipe(plugins.inky())
+    .pipe(plugins.replace(/(\\?{!!)(\s+)?/g, '{{'))
+    .pipe(plugins.replace(/(\s+)?(!!}\\?)/g, '}}'))
+    .pipe(plugins.if(enableInliner, plugins.rename(function rename(path) {
+      path.basename = path.basename.replace('.email', '.email.tmp');
+
+      return path;
+    })))
+    .pipe(plugins.if(!enableInliner, plugins.rename(function rename(path) {
+      path.basename = path.basename.replace('.email', '');
+      path.extname = '.html';
+
+      return path;
+    })))
+    .pipe(plugins.rename(adjustDestinationDirectory))
+    .pipe(plugins.if(enableInliner, plugins.multiDest(srcBase)))
+    .pipe(plugins.if(!enableInliner, plugins.multiDest(srcTheme)))
+    .pipe(plugins.logger({
+      display   : 'name',
+      beforeEach: 'Theme: ' + name + ' ',
+      afterEach : ' Compiled!'
+    }))
+    .pipe(plugins.browserSync.stream());
+};

helper/inliner.js

@@ -0,0 +1,67 @@
+'use strict';
+module.exports = function(gulp, plugins, config, name, file) { // eslint-disable-line func-names
+  const theme       = config.themes[name],
+        srcBase     = config.projectPath + 'var/view_preprocessed/frontools' + theme.dest.replace('pub/static', ''),
+        dest        = [],
+        srcTheme    = [];
+
+  function adjustDestinationDirectory(file) {
+    file.dirname = file.dirname.replace('web/', '');
+    return file;
+  }
+
+  theme.locale.forEach(locale => {
+    dest.push(config.projectPath + theme.dest + '/' + locale);
+  });
+
+  const cssFilePath = dest[0] + '/css/email.css', // eslint-disable-line one-var
+        css = plugins.fs.existsSync(cssFilePath) ? plugins.fs.readFileSync(cssFilePath).toString() : '',
+        mqCss = plugins.fs.existsSync(cssFilePath) ? plugins.siphon(css) : '';
+
+  srcTheme.push(config.projectPath + theme.src);
+
+  // Return empty stream if no email directory is included
+  if (!plugins.fs.existsSync(srcBase + '/email')) {
+    return [];
+  }
+
+  return gulp.src(
+    file || srcBase + '/**/*.email.tmp.hbs',
+    { base: srcBase }
+  )
+    .pipe(
+      plugins.if(
+        !plugins.util.env.ci,
+        plugins.plumber({
+          errorHandler: plugins.notify.onError('Error: <%= error.message %>')
+        })
+      )
+    )
+    .pipe(plugins.replace(`<link rel="stylesheet" href="/pub/static/frontend/###THEME-NAME###/de_DE/css/email.css">`, '')) // eslint-disable-line quotes
+    .pipe(plugins.inlineCss({
+      extraCss: css,
+      applyStyleTags: false,
+      removeStyleTags: true,
+      preserveMediaQueries: true,
+      removeLinkTags: false
+    }))
+    .pipe(plugins.replace('<!-- <style> -->', `<style>${mqCss}</style>`))
+    .pipe(plugins.htmlmin({
+      collapseWhitespace: true,
+      minifyCSS: true
+    }))
+    .pipe(plugins.rename(function rename(path) {
+      path.basename = path.basename.replace('.email.tmp', '');
+      path.extname = '.html';
+
+      return path;
+    }))
+    .pipe(plugins.rename(adjustDestinationDirectory))
+    .pipe(plugins.multiDest(srcTheme))
+    .pipe(plugins.logger({
+      display   : 'name',
+      beforeEach: 'Theme: ' + name + ' ',
+      afterEach : ' Compiled!'
+    }))
+    .pipe(plugins.browserSync.stream());
+};

package.json

@@ -25,14 +25,17 @@
     "gulp-babel": "~7.0.1",
     "gulp-concat": "~2.6.1",
     "gulp-eslint": "~4.0.2",
+    "gulp-htmlmin": "^5.0.1",
     "gulp-if": "~2.0.2",
+    "gulp-inline-css": "^3.3.1",
     "gulp-load-plugins": "~1.5.0",
     "gulp-logger": "~0.0.2",
     "gulp-multi-dest": "~1.3.7",
     "gulp-notify": "~3.2.0",
     "gulp-plumber": "~1.2.0",
     "gulp-postcss": "~7.0.1",
     "gulp-rename": "~1.2.2",
+    "gulp-replace": "^1.0.0",
     "gulp-rimraf": "~0.2.2",
     "gulp-sass": "~3.2.1",
     "gulp-sass-error": "~1.0.5",
@@ -42,28 +45,38 @@
     "gulp-task-loader": "~1.4.4",
     "gulp-uglify": "~3.0.0",
     "gulp-util": "~3.0.8",
+    "inky": "^1.3.7",
     "js-yaml": "~3.11.0",
     "marked": "~0.3.12",
     "marked-terminal": "~2.0.0",
     "merge-stream": "~1.0.1",
+    "panini": "^1.6.3",
     "postcss-reporter": "~5.0.0",
     "run-sequence": "~2.2.1",
+    "siphon-media-query": "^1.0.0",
     "stylelint": "~9.1.3",
     "stylelint-config-standard": "~18.2.0"
   },
   "scripts": {
+    "prepare": "patch-package",
     "babel": "gulp babel",
     "clean": "gulp clean",
     "csslint": "gulp csslint",
     "default": "gulp",
     "dev": "gulp dev",
+    "dev:email": "gulp dev:email",
     "eslint": "gulp eslint",
     "inheritance": "gulp inheritance",
     "sasslint": "gulp sasslint",
     "setup": "gulp setup",
     "styles": "gulp styles",
     "svg": "gulp svg",
     "watch": "gulp watch",
+    "email": "gulp email",
     "test": "./node_modules/eslint/bin/eslint.js *.js helper/*.js task/*.js"
+  },
+  "devDependencies": {
+    "patch-package": "^5.1.1",
+    "postinstall-prepare": "^1.0.1"
   }
 }

patches/panini+1.6.3.patch

@@ -0,0 +1,30 @@
+patch-package
+--- a/node_modules/panini/lib/render.js
++++ b/node_modules/panini/lib/render.js
+@@ -21,6 +21,10 @@ function render(file, enc, cb) {
+     var page = fm(stripBom(file.contents.toString()));
+     var pageData;
+
++    // Rendering is processed in asynchronous strem - therefore you need to refresh Handlebars Configuration when in multi-instance mode
++    this.Handlebars.partials = {};
++    this.refresh();
++
+     // Determine which layout to use
+     var basePath = path.relative(this.options.root, path.dirname(file.path));
+     var layout =
+--- a/node_modules/panini/lib/utils.js
++++ b/node_modules/panini/lib/utils.js
+@@ -16,7 +16,12 @@ exports.loadFiles = function(dir, pattern) {
+   dir = !Array.isArray(dir) ? [dir] : dir;
+
+   for (var i in dir) {
+-    files = files.concat(glob.sync(path.join(process.cwd(), dir[i], pattern)));
++    var filePath = [process.cwd(), dir[i], pattern];
++    if(path.isAbsolute(dir[i])) {
++      filePath.shift();
++    }
++
++    files = files.concat(glob.sync(path.join.apply(null, filePath)));
+   }
+
+   return files;

task/dev:email.js

@@ -0,0 +1,19 @@
+'use strict';
+module.exports = function() { // eslint-disable-line func-names
+  // Global variables
+  const plugins = this.opts.plugins,
+        config  = this.opts.configs;
+
+  // Prevent runing inheritance task more than once
+  plugins.util.env.pipeline = true;
+
+  plugins.runSequence('inheritance', 'styles', 'inky', () => {
+    plugins.browserSync.create();
+    plugins.browserSync(
+      require('../helper/config-loader')('browser-sync-email.json', plugins, config)
+    );
+
+    plugins.runSequence('watch');
+  });
+};
+

task/email.js

@@ -0,0 +1,14 @@
+'use strict';
+module.exports = function() { // eslint-disable-line func-names
+  // Global variables
+  const plugins = this.opts.plugins;
+
+  // Prevent runing inheritance task more than once
+  plugins.util.env.pipeline = true;
+
+  if (!plugins.util.env.enableInliner) {
+    plugins.util.env.enableInliner = true;
+  }
+
+  plugins.runSequence('inheritance', 'styles', 'inky', 'inliner');
+};

task/inky.js

@@ -0,0 +1,21 @@
+'use strict';
+module.exports = function() { // eslint-disable-line func-names
+  // Global variables
+  const gulp    = this.gulp,
+        plugins = this.opts.plugins,
+        config  = this.opts.configs,
+        themes  = plugins.getThemes(),
+        streams = plugins.mergeStream();
+
+  // Generate all necessary symlinks before transpilation, but only if not a part of tasks pipeline
+  if (!plugins.util.env.pipeline) {
+    plugins.runSequence('inheritance');
+  }
+
+  // Loop through themes to compile scss or less depending on your config.json
+  themes.forEach(name => {
+    streams.add(require('../helper/inky')(gulp, plugins, config, name));
+  });
+
+  return streams;
+};

task/inliner.js

@@ -0,0 +1,21 @@
+'use strict';
+module.exports = function() { // eslint-disable-line func-names
+  // Global variables
+  const gulp    = this.gulp,
+        plugins = this.opts.plugins,
+        config  = this.opts.configs,
+        themes  = plugins.getThemes(),
+        streams = plugins.mergeStream();
+
+  // Generate all necessary symlinks before transpilation, but only if not a part of tasks pipeline
+  if (!plugins.util.env.pipeline) {
+    plugins.runSequence('inheritance');
+  }
+
+  // Loop through themes to compile scss or less depending on your config.json
+  themes.forEach(name => {
+    streams.add(require('../helper/inliner')(gulp, plugins, config, name));
+  });
+
+  return streams;
+};

task/watch.js

@@ -17,11 +17,16 @@ module.exports = function(resolve) { // eslint-disable-line func-names
   plugins.helper.sass          = require('../helper/scss');
   plugins.helper.sassLint      = require('../helper/sass-lint');
   plugins.helper.svg           = require('../helper/svg');
+  plugins.helper.inky          = require('../helper/inky');
+  plugins.helper.inliner       = require('../helper/inliner');
 
   plugins.util.log(
     plugins.util.colors.yellow('Initializing watcher...')
   );
 
+  const paniniRegExpRule = /(email)\/(partials|layouts|helpers)\/\w*.hbs/, // eslint-disable-line one-var
+        paniniRegExp = new RegExp(paniniRegExpRule);
+
   themes.forEach(name => {
     const theme = config.themes[name],
           themeTempSrc = config.tempPath + theme.dest.replace('pub/static', ''),
@@ -167,6 +172,17 @@ module.exports = function(resolve) { // eslint-disable-line func-names
         plugins.helper.svg(gulp, plugins, config, name);
       }
 
+      if (plugins.path.basename(path).includes('email.hbs')) {
+        plugins.helper.inky(gulp, plugins, config, name, path);
+      }
+
+      if (paniniRegExp.test(path)) {
+        const basePath = path.replace(paniniRegExpRule, '**/*.email.hbs');
+
+        plugins.helper.inky(gulp, plugins, config, name, basePath);
+      }
+
+
       // Files that require reload after save
       if (['.html', '.phtml', '.xml', '.csv', '.js', '.vue'].some(
         ext => plugins.path.extname(path) === ext