Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project

gulpfile.babel.js

@@ -15,16 +15,45 @@ import colors   from 'colors';
 
 const $ = plugins();
 
+/* Enable/disable prefix workflow - allows for layouts to have different css references
+   but page names prefix must match css file name
+   e.g.  
+   > scss/__invite.scss
+        .invite { background-color:#333333; ... }
+        ...
+
+   > scss/invite.scss
+        @import 'settings';
+        @import 'foundation-emails';
+        @import '_invite';
+        ...
+
+   > layouts/invite.html
+        ...
+        <link rel="stylesheet" type="text/css" href="css/invite.css">
+        ...
+
+   > pages/invite.html, invite2.html, invite_audience1.html
+        ---
+        layout: invite
+        ---
+        ...
+
+   //So all the pages with the prefix "invite" will be inlined with the css from invite.css
+*/
+var PREFIX_WORKFLOW=true;
+var PREFIX_BUILD_INDEX=true; //prefix/true | alpha | false
+
 // Look for the --production flag
 const PRODUCTION = !!(yargs.argv.production);
 const EMAIL = yargs.argv.to;
 
-// Declar var so that both AWS and Litmus task can use it.
+// Declare 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));
+  gulp.series(clean, pages, sass, images, inline, prefixIndex));
 
 // Build emails, run the server, and watch for file changes
 gulp.task('default',
@@ -70,7 +99,7 @@ function resetPages(done) {
 
 // Compile Sass into CSS
 function sass() {
-  return gulp.src('src/assets/scss/app.scss')
+  return gulp.src('src/assets/scss/*.scss')
     .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
     .pipe($.sass({
       includePaths: ['node_modules/foundation-emails/scss']
@@ -91,16 +120,139 @@ function images() {
 }
 
 // Inline CSS and minify HTML
-function inline() {
-  return gulp.src('dist/**/*.html')
-    .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
+function inline(done) {
+
+  if (PREFIX_WORKFLOW) {
+    var files = fs.readdirSync('./dist/css');
+    var prefix = '';
+    var result = done();
+    for(var i in files) {
+      prefix = files[i].slice(0, -4);
+      result = gulp.src('dist/**/' + prefix + '*.html')
+        .pipe($.if(PRODUCTION, inliner('dist/css/' + prefix + '.css')))
+        .pipe($.if(PRODUCTION, $.replace(/<link rel="stylesheet"[^>]*>/, '')))
+        .pipe(gulp.dest('dist'));
+    }
+    return result;
+  } else {
+    return gulp.src('dist/**/*.html')
+      .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
+      .pipe($.replace(/<link rel="stylesheet"[^>]*>/, ''))
+      .pipe(gulp.dest('dist'));  
+  }
+}
+
+//generate list of links to template previews
+function prefixIndex(done) {
+
+  if (PREFIX_WORKFLOW && PREFIX_BUILD_INDEX) {
+
+    var pages = fs.readdirSync('./src/pages');
+    var files = fs.readdirSync('./dist/css');
+    var groups = [];
+    var prefixes = [];
+    var index = [];
+    for(var i in files) {
+      prefix = files[i].slice(0, -4);
+
+      prefixes.push(prefix);
+    }
+
+    var page = '';
+    var prefix = '';
+    var i = null, j = null;
+    for(i in pages) {
+
+      page = pages[i];
+      index.push(page);
+      for (j in prefixes) {
+
+        prefix = prefixes[j];
+
+        if (page.indexOf(prefix) != -1) {
+
+          if (groups[prefix] === undefined) {
+            groups[prefix] = [];
+          }
+          groups[prefix].push(page);
+          break;
+        }
+      }
+    }
+
+    var content = '';
+    content += '<container>';
+    content += '  <row>';
+    content += '    <columns small="12" large="12">';
+
+    switch(PREFIX_BUILD_INDEX) {
+      case 'alpha':
+        i = null, j = null;
+        var title = '';
+        content += '<h2>Index</h2>';
+        content += '<ul>';
+        for(i in index) {
+
+          if (index[i].indexOf('index') == -1) {
+            content += '<li><a href="' + index[i] + '">' + index[i].slice(0, -5) + '</a></li>';
+          }
+        }
+        content += '</ul>';
+        break;
+      case 'prefix':
+      case 'true':
+      case true:
+        i = null, j = null;
+        var title = '';
+        for(i in groups) {
+
+          title = i.replace(/_/g, ' ');
+          title = title.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+          content += '<h2>' + title + '</h2>';
+          content += '<ul>';
+          for (j in groups[i]) {
+
+            content += '<li><a href="' + groups[i][j] + '">' + groups[i][j].slice(0, -5) + '</a></li>';
+          }
+          content += '</ul>';
+        }
+        break;
+    }
+
+    content += '    </columns>';
+    content += '  </row>';
+    content += '</container>';
+
+    fs.writeFile("./src/pages/prefix_index.html", content, function(err) {
+      if(err) {
+        console.log('Error writing index');
+        done();
+      }
+    }); 
+
+    return gulp.src('src/pages/prefix_index.html')
+    .pipe(panini({
+      root: 'src/pages',
+      layouts: 'src/layouts',
+      partials: 'src/partials',
+      helpers: 'src/helpers'
+    }))
+    .pipe(inky())
     .pipe(gulp.dest('dist'));
+
+  } else {
+    done();
+  }
+
 }
 
 // Start a server with LiveReload to preview the site in
 function server(done) {
   browser.init({
-    server: 'dist'
+    server: {
+      baseDir: 'dist',
+      index: (PREFIX_BUILD_INDEX != false) ? "prefix_index.html" : "index.html"
+    }
   });
   done();
 }