Split email task in build and only dev task and add browser sync to watch the email templates

Author: marvinhuebner

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/Framework/WhiteLabel/Magento_Customer/email/welcome.html"
+}

helper/inky.js

@@ -3,6 +3,9 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
   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,
         production  = plugins.util.env.prod || false;
 
   function adjustDestinationDirectory(file) {
@@ -14,11 +17,15 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
     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 [];
   }
 
+  plugins.panini.refresh();
+
   return gulp.src(
     file || srcBase + '/**/*.email.hbs',
     { base: srcBase }
@@ -37,9 +44,22 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
       partials: srcBase + '/email/partials/',
       helpers: srcBase + '/email/helpers/'
     }))
+    .pipe(plugins.if(!enableInliner, plugins.replace('###THEME-NAME###', themeName)))
     .pipe(plugins.inky())
+    .pipe(plugins.if(enableInliner, plugins.rename(function (path) {
+      path.basename = path.basename.replace('.email', '.email.tmp');
+
+      return path;
+    })))
+    .pipe(plugins.if(!enableInliner, plugins.rename(function (path) {
+      path.basename = path.basename.replace('.email', '');
+      path.extname = '.html';
+
+      return path;
+    })))
     .pipe(plugins.rename(adjustDestinationDirectory))
-    .pipe(plugins.multiDest(srcBase))
+    .pipe(plugins.if(enableInliner, plugins.multiDest(srcBase)))
+    .pipe(plugins.if(!enableInliner, plugins.multiDest(srcTheme)))
     .pipe(plugins.logger({
       display   : 'name',
       beforeEach: 'Theme: ' + name + ' ',

helper/inliner.js

@@ -32,7 +32,7 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
   }
 
   return gulp.src(
-    file || srcBase + '/**/*.email.hbs',
+    file || srcBase + '/**/*.email.tmp.hbs',
     { base: srcBase }
   )
     .pipe(
@@ -43,6 +43,7 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
         })
       )
     )
+    .pipe(plugins.replace(`<link rel="stylesheet" href="/pub/static/frontend/###THEME-NAME###/de_DE/css/email.css">`, ''))
     .pipe(plugins.inlineCss({
       extraCss: css,
       applyStyleTags: false,
@@ -56,7 +57,7 @@ module.exports = function(gulp, plugins, config, name, file) { // eslint-disable
       minifyCSS: true
     }))
     .pipe(plugins.rename(function (path) {
-      path.basename = path.basename.replace('.email', '');
+      path.basename = path.basename.replace('.email.tmp', '');
       path.extname = '.html';
 
       return path;

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

@@ -1,11 +1,15 @@
 'use strict';
 module.exports = function() { // eslint-disable-line func-names
-  // Global variables
+                              // Global variables
   const plugins = this.opts.plugins,
         config  = this.opts.configs;
 
   // 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');
 };