From 6f9179613ba52e59ae9c6cd27b6c1ed21b5707ef Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Fri, 26 Aug 2016 17:09:51 +0200 Subject: [PATCH 1/7] Upgrade/fix allows multiple app.css files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Allows multiple “app.css” files, which allows each layout to have a different look and feel in a single project. --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index a5b016b..9660c02 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -65,7 +65,7 @@ function resetPages(done) { // Compile Sass into CSS function sass() { - return gulp.src('src/assets/scss/app.scss') + return gulp.src('src/assets/scss/app*.scss') .pipe($.if(!PRODUCTION, $.sourcemaps.init())) .pipe($.sass({ includePaths: ['node_modules/foundation-emails/scss'] From 323733eca34aaf6461eeb87f9efa83350d686342 Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Fri, 26 Aug 2016 19:20:41 +0200 Subject: [PATCH 2/7] Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project 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 ... ... > 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 --- gulpfile.babel.js | 54 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 9660c02..c327469 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -15,10 +15,38 @@ 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 + ... + + ... + + > 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; + // Look for the --production flag const PRODUCTION = !!(yargs.argv.production); -// 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 @@ -65,7 +93,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'] @@ -82,10 +110,24 @@ function images() { } // Inline CSS and minify HTML -function inline() { - return gulp.src('dist/**/*.html') - .pipe($.if(PRODUCTION, inliner('dist/css/app.css'))) - .pipe(gulp.dest('dist')); +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(gulp.dest('dist')); + } + return result; + } else { + 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 From fde4312cbf9d545dd0fa3ca663259a2f25c3ae4c Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Tue, 20 Dec 2016 23:00:48 +0200 Subject: [PATCH 3/7] Removed the stylesheet reference when inlining to prevent an error https://github.com/zurb/foundation-emails-template/pull/25 --- gulpfile.babel.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index c327469..23ed7d5 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -120,12 +120,14 @@ function inline(done) { prefix = files[i].slice(0, -4); result = gulp.src('dist/**/' + prefix + '*.html') .pipe($.if(PRODUCTION, inliner('dist/css/' + prefix + '.css'))) + .pipe($.replace(/]*>/, '')) .pipe(gulp.dest('dist')); } return result; } else { return gulp.src('dist/**/*.html') .pipe($.if(PRODUCTION, inliner('dist/css/app.css'))) + .pipe($.replace(/]*>/, '')) .pipe(gulp.dest('dist')); } } From 0344b045503dd28840566820a8dab1a0adde3d59 Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Mon, 23 Jan 2017 18:25:42 +0200 Subject: [PATCH 4/7] fixed issue with prod https://github.com/zurb/foundation-emails-template/pull/25#pullrequestre view-14872615 --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 23ed7d5..7bc522a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -120,7 +120,7 @@ function inline(done) { prefix = files[i].slice(0, -4); result = gulp.src('dist/**/' + prefix + '*.html') .pipe($.if(PRODUCTION, inliner('dist/css/' + prefix + '.css'))) - .pipe($.replace(/]*>/, '')) + .pipe($.if(PRODUCTION, $.replace(/]*>/, ''))) .pipe(gulp.dest('dist')); } return result; From 09025fb7317efea4dce18d2a8a5595ddda4fcb85 Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Tue, 24 Jan 2017 13:15:33 +0200 Subject: [PATCH 5/7] Synced with Zurb & Added new index generator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Synced the differences with the Zurb master. Auto-generate an index page with links to all your template previews. You can choose to group the links by their prefix (default) or just list them alphabetically. Options: true/‘prefix’ | ‘alpha’ | false --- gulpfile.babel.js | 105 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 104 insertions(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index b65f318..9d7db8a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -42,6 +42,7 @@ const $ = plugins(); //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); @@ -52,7 +53,6 @@ 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', @@ -141,6 +141,109 @@ function inline(done) { } } +//generate list of links to template previews + + 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 += ''; + content += ' '; + content += ' '; + + switch(PREFIX_BUILD_INDEX) { + case 'alpha': + i = null, j = null; + var title = ''; + content += '

Index

'; + content += ''; + 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 += '

' + title + '

'; + content += ''; + } + break; + } + + content += ' '; + content += ' '; + content += ''; + + fs.writeFile("./src/pages/index.html", content, function(err) { + if(err) { + console.log('Error writing index'); + done(); + } + }); + + return gulp.src('src/pages/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({ From 5488a25c7eb086a4401b43c5413fe0f289c35730 Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Tue, 24 Jan 2017 13:24:06 +0200 Subject: [PATCH 6/7] renamed function prefixIndex --- gulpfile.babel.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 9d7db8a..5f62c6d 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -53,6 +53,7 @@ var CONFIG; // Build the "dist" folder by running all of the above tasks gulp.task('build', + gulp.series(clean, pages, sass, images, inline, prefixIndex)); // Build emails, run the server, and watch for file changes gulp.task('default', @@ -142,6 +143,7 @@ function inline(done) { } //generate list of links to template previews +function prefixIndex(done) { if (PREFIX_WORKFLOW && PREFIX_BUILD_INDEX) { From f100e0ea96e6d25a4be37bcfec6ee08558107c27 Mon Sep 17 00:00:00 2001 From: Andrew Quan Date: Tue, 24 Jan 2017 13:35:36 +0200 Subject: [PATCH 7/7] renamed index to not override any existing index.html --- gulpfile.babel.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 5f62c6d..a8fa113 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -223,14 +223,14 @@ function prefixIndex(done) { content += ' '; content += ''; - fs.writeFile("./src/pages/index.html", content, function(err) { + fs.writeFile("./src/pages/prefix_index.html", content, function(err) { if(err) { console.log('Error writing index'); done(); } }); - return gulp.src('src/pages/index.html') + return gulp.src('src/pages/prefix_index.html') .pipe(panini({ root: 'src/pages', layouts: 'src/layouts', @@ -249,7 +249,10 @@ function prefixIndex(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(); }