From 78a039b68c46abb4893076b83c5bbd2b6fa86bdd Mon Sep 17 00:00:00 2001 From: Dan Mindru Date: Mon, 19 Oct 2015 03:25:38 +0200 Subject: [PATCH] Load multiple configs and build templates keeping the dir --- dist/fadeit/full-mail-dan.html | 28 ++++ .../{full-mail.html => full-mail-lars.html} | 0 dist/fadeit/signature-dan.html | 28 ++++ .../{signature.html => signature-lars.html} | 0 dist/fadeit/signature-reply-dan.html | 28 ++++ ...e-reply.html => signature-reply-lars.html} | 0 dist/play/full-mail-play-lars.html | 28 ++++ dist/play/signature-play-lars.html | 28 ++++ dist/play/signature-reply-play-lars.html | 28 ++++ package.json | 1 + src/fadeit/conf.js | 28 ++++ src/play/base.css | 147 ++++++++++++++++++ src/play/conf.js | 15 ++ src/play/footer.inc.html | 38 +++++ src/play/full-mail.html | 25 +++ src/play/head.inc.html | 37 +++++ src/play/signature-reply.html | 23 +++ src/play/signature.html | 14 ++ tasks/build.js | 55 ++++--- tasks/watch.js | 2 +- 20 files changed, 528 insertions(+), 25 deletions(-) create mode 100644 dist/fadeit/full-mail-dan.html rename dist/fadeit/{full-mail.html => full-mail-lars.html} (100%) create mode 100644 dist/fadeit/signature-dan.html rename dist/fadeit/{signature.html => signature-lars.html} (100%) create mode 100644 dist/fadeit/signature-reply-dan.html rename dist/fadeit/{signature-reply.html => signature-reply-lars.html} (100%) create mode 100644 dist/play/full-mail-play-lars.html create mode 100644 dist/play/signature-play-lars.html create mode 100644 dist/play/signature-reply-play-lars.html create mode 100644 src/fadeit/conf.js create mode 100644 src/play/base.css create mode 100644 src/play/conf.js create mode 100644 src/play/footer.inc.html create mode 100644 src/play/full-mail.html create mode 100644 src/play/head.inc.html create mode 100644 src/play/signature-reply.html create mode 100644 src/play/signature.html diff --git a/dist/fadeit/full-mail-dan.html b/dist/fadeit/full-mail-dan.html new file mode 100644 index 0000000..956c611 --- /dev/null +++ b/dist/fadeit/full-mail-dan.html @@ -0,0 +1,28 @@ +
Hi adsadsada,
MAAAN
Med venlig hilsen / best regards,
Dan Mindru
Call dsadasdazzzz or email us at info@fadeit.dk
Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/fadeit/full-mail.html b/dist/fadeit/full-mail-lars.html similarity index 100% rename from dist/fadeit/full-mail.html rename to dist/fadeit/full-mail-lars.html diff --git a/dist/fadeit/signature-dan.html b/dist/fadeit/signature-dan.html new file mode 100644 index 0000000..8ed7a94 --- /dev/null +++ b/dist/fadeit/signature-dan.html @@ -0,0 +1,28 @@ +
Med venlig hilsen / best regards,
Dan Mindru
Call dsadasdazzzz or email us at info@fadeit.dk
Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/fadeit/signature.html b/dist/fadeit/signature-lars.html similarity index 100% rename from dist/fadeit/signature.html rename to dist/fadeit/signature-lars.html diff --git a/dist/fadeit/signature-reply-dan.html b/dist/fadeit/signature-reply-dan.html new file mode 100644 index 0000000..6fad5ed --- /dev/null +++ b/dist/fadeit/signature-reply-dan.html @@ -0,0 +1,28 @@ +
Med venlig hilsen / best regards,
Dan Mindru
\ No newline at end of file diff --git a/dist/fadeit/signature-reply.html b/dist/fadeit/signature-reply-lars.html similarity index 100% rename from dist/fadeit/signature-reply.html rename to dist/fadeit/signature-reply-lars.html diff --git a/dist/play/full-mail-play-lars.html b/dist/play/full-mail-play-lars.html new file mode 100644 index 0000000..03e0bad --- /dev/null +++ b/dist/play/full-mail-play-lars.html @@ -0,0 +1,28 @@ +
Hi there,
Thanks for writing up this email.
We are delighted to reply with a custom footer template.
Med venlig hilsen / best regards,
Lars Normark Holmgaard
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/play/signature-play-lars.html b/dist/play/signature-play-lars.html new file mode 100644 index 0000000..6746aca --- /dev/null +++ b/dist/play/signature-play-lars.html @@ -0,0 +1,28 @@ +
Med venlig hilsen / best regards,
Lars Normark Holmgaard
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/play/signature-reply-play-lars.html b/dist/play/signature-reply-play-lars.html new file mode 100644 index 0000000..5f0d520 --- /dev/null +++ b/dist/play/signature-reply-play-lars.html @@ -0,0 +1,28 @@ +
Med venlig hilsen / best regards,
Lars Normark Holmgaard
\ No newline at end of file diff --git a/package.json b/package.json index acb12ec..3d2908a 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "gulp-inline-css": "^3.0.0", "gulp-minify-html": "^1.0.4", "gulp-preprocess": "^1.2.0", + "gulp-rename": "^1.2.2", "run-sequence": "^1.1.4", "wrench": "^1.5.8" } diff --git a/src/fadeit/conf.js b/src/fadeit/conf.js new file mode 100644 index 0000000..3843805 --- /dev/null +++ b/src/fadeit/conf.js @@ -0,0 +1,28 @@ +module.exports = [ + { + id: 'lars', + signature: 'Med venlig hilsen / best regards,', + name: 'Lars Normark Holmgaard', + welcome: 'Hi there,', + introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a custom footer template.', + contactMain: 'Call 81100200 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'info@fadeit.dk', + contactSecondary: 'Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
', + logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', + logoAlt: 'fadeit logo', + website: 'http://fadeit.dk' + }, + { + id: 'dan', + signature: 'Med venlig hilsen / best regards,', + name: 'Dan Mindru', + welcome: 'Hi adsadsada,', + introParagraph: 'MAAAN', + contactMain: 'Call dsadasdazzzz or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'info@fadeit.dk', + contactSecondary: 'Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
', + logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', + logoAlt: 'fadeit logo', + website: 'http://fadeit.dk' + } +] \ No newline at end of file diff --git a/src/play/base.css b/src/play/base.css new file mode 100644 index 0000000..e64cfc4 --- /dev/null +++ b/src/play/base.css @@ -0,0 +1,147 @@ +/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */ + +/* + * ===================================== + * 1. Common styles for general table things. + * ===================================== + */ +tr{ + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + box-sizing: border-box; + font-size: 14px; +} + +.main{ + /* @todo gulp-inline-css can't use width in percentages */ + /* This style property fucks up the width on OS X, needs to be *JUST* attribute -> + width:100%; */ + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #ffffff; +} + +.rbcc{ + /* + * rbcc -> reset - border - cellspacing - cellpading + * + * Resets table attributes. + */ + border:0; + cellpadding:0; + cellspacing:0; +} + +.sp{ + /* Separator tr */ + /* @todo gulp-inline-css doesn't add height attrs */ + height: 30px; +} + +.gray-hr{ + border-bottom:1px solid #E4E4E4; + border-top:none; + margin-bottom:20px; + margin-top:20px; +} + +a{ + text-decoration: none; + color: #0fade1; +} + +/* + * ================= + * 2. Content styles. + * ================== + */ +.main__welcome{ + color: #000; + padding: 10px 30px 0 30px; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 22px; +} + +.main__content{ + color: #000; + padding: 10px 30px 0 30px; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; +} + + +/* + * ================ + * 3. Footer styles. + * ================ + */ +.footer{ + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #f5f5f5; + padding: 20px 30px 0px 30px; + color: #888; + border-top: 8px solid #EAEAEA; +} + +.footer a{ + color: #888; +} + +.footer--simple{ + padding-bottom: 20px; + /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ + background-color: #FFFFFF; +} + +.footer__main{ + /* @todo gulp-inline-css can't use width in percentages */ + /* This style property fucks up the width on OS X, needs to be *JUST* attribute -> + width:100%; */ +} + +.footer__main__signature{ + font-size: 14px; + color: #888; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col1{ + /* @todo gulp-inline-css can't use width in percentages */ + width:70%; + margin-bottom:30px; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main__col1__td{ + font-size: 14px; + color: #888; + /* @todo gulp-inline-css doesn't parse align */ + align:left; +} + +.footer__main a > span{ + /* Revert apple blue-link style. */ + color: #888!important; + text-decoration:none!important; +} + +.footer__main__col2{ + /* @todo gulp-inline-css can't use width in percentages */ + width:30%; + /* @todo gulp-inline-css doesn't parse align */ + align:right; +} + +.footer__main__col2__td{ + font-size: 14px; + color: #888; +} + +.footer__main__col2__td__img{ + border: 0; + padding-left:10px; + max-width: 100%; + max-height:38px; + height: auto; +} \ No newline at end of file diff --git a/src/play/conf.js b/src/play/conf.js new file mode 100644 index 0000000..ab362db --- /dev/null +++ b/src/play/conf.js @@ -0,0 +1,15 @@ +module.exports = [ + { + id: 'play-lars', + signature: 'Med venlig hilsen / best regards,', + name: 'Lars Normark Holmgaard', + welcome: 'Hi there,', + introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a custom footer template.', + contactMain: 'Call 81100200 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'info@fadeit.dk', + contactSecondary: 'Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
', + logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', + logoAlt: 'fadeit logo', + website: 'http://fadeit.dk' + } +] \ No newline at end of file diff --git a/src/play/footer.inc.html b/src/play/footer.inc.html new file mode 100644 index 0000000..53034ae --- /dev/null +++ b/src/play/footer.inc.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt --> + +
+ + + \ No newline at end of file diff --git a/src/play/full-mail.html b/src/play/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/src/play/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/src/play/head.inc.html b/src/play/head.inc.html new file mode 100644 index 0000000..1fb0a59 --- /dev/null +++ b/src/play/head.inc.html @@ -0,0 +1,37 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/play/signature-reply.html b/src/play/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/src/play/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/src/play/signature.html b/src/play/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/src/play/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/tasks/build.js b/tasks/build.js index 015174f..c63e155 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -3,34 +3,41 @@ var gulp = require('gulp'), inlineCss = require('gulp-inline-css'), minifyHTML = require('gulp-minify-html'), - preprocess = require('gulp-preprocess'); + preprocess = require('gulp-preprocess'), + rename = require('gulp-rename'), + wrench = require('wrench'); function buildTask(options){ gulp.task('build', function() { - gulp.src([options.src + '/**/*.html', '!' + options.src + '/**/*.inc.html']) - .pipe(preprocess({ - context: { - signature: 'Med venlig hilsen / best regards,', - name: 'Lars Normark Holmgaard', - welcome: 'Hi there,', - introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a custom footer template.', - contactMain: 'Call 81100200 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. - contactMail: 'info@fadeit.dk', - contactSecondary: 'Anelystparken 31D  ●  DK-8381 Tilst  ●  Aarhus
', - logoUrl: 'http://fadeit.dk/!email/fadeit-logo.png', - logoAlt: 'fadeit logo', - website: 'http://fadeit.dk' - } - })) - .pipe(inlineCss({ - applyTableAttributes: true, - applyWidthAttributes: true, - preserveMediaQueries: true, - removeStyleTags: false - })) - .pipe(minifyHTML({quotes: true})) - .pipe(gulp.dest('./dist/')) + wrench.readdirSyncRecursive('./src').filter(function(file) { + return (!file.match('/') && !file.match(/^\.+/g)) ? file : false + }).forEach(function(dir){ + var confPath = './../' + options.src + '/' + dir + '/conf.js' + makeTemplates(dir, require(confPath)); + }); + + function makeTemplates(dir, confItems){ + confItems.forEach(function(item){ + gulp.src([options.src + '/' + dir + '/**/*.html', '!' + options.src + '/**/*.inc.html']) + .pipe(preprocess({ + context: item + })) + .pipe(inlineCss({ + applyTableAttributes: true, + applyWidthAttributes: true, + preserveMediaQueries: true, + removeStyleTags: false + })) + .pipe(minifyHTML({quotes: true})) + .pipe(rename(function rename(path){ + path.dirname = dir; + path.basename += '-' + item.id; + return path; + })) + .pipe(gulp.dest('./dist/')); + }); + } }); } diff --git a/tasks/watch.js b/tasks/watch.js index d8fa827..fea38ed 100644 --- a/tasks/watch.js +++ b/tasks/watch.js @@ -4,7 +4,7 @@ var gulp = require('gulp'); function watchTask(options){ gulp.task('watch', function(){ - gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css'], ['build']); + gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css', options.src + '/**/conf.js'], ['build']); }); };