extractMQ = require('media-query-extractor'),
inject = require('gulp-inject'),
inkyGulp = require('gulp-inky'),
+ handlebars = require('gulp-compile-handlebars'),
+ omglob = require('glob'),
+ runOrder = require('run-sequence'),
rimraf = require('rimraf');
// 2. VARIABLES
var dirs = {
styles: 'scss/*.scss',
- html: 'html/*.html',
- build: './build',
- spec: './spec'
+ dist: './dist',
+ spec: './spec',
+ src: './src',
+ temp: './temp'
};
// 3. CLEANIN' FILES
// - - - - - - - - - - - - - - -
-// Clean build directory
-gulp.task('clean', function(cb) {
- rimraf(dirs.build, cb);
+// Clean dist directory
+gulp.task('clean:dist', function(cb) {
+ rimraf(dirs.dist, cb);
+});
+
+// Clean temp directory
+gulp.task('clean:temp', function(cb) {
+ rimraf(dirs.temp, cb);
});
gulp.task('sass', function() {
return gulp.src(dirs.styles)
.pipe(sass({ "sourcemap=none": true, style: 'compact' }))
- .pipe(gulp.dest(dirs.build + '/css'))
+ .pipe(gulp.dest(dirs.dist + '/css'))
.pipe(connect.reload())
});
// Inline Styles
gulp.task('inline', function() {
- return gulp.src(dirs.build + '/*.html')
+ return gulp.src(dirs.dist + '/*.html')
.pipe(inlineCss())
.pipe(rename({
suffix: '-inline'
}))
- .pipe(gulp.dest(dirs.build))
+ .pipe(gulp.dest(dirs.dist))
});
// extract media queries into new CSS file called inkMQ.css
// any remaining styles will go into ink-noMQ.css
gulp.task('extract-mq', function () {
- extractMQ( dirs.build + '/css/ink.css', dirs.build + '/css/ink-noMQ.css', ['only screen and (max-width: 600px)|./build/css/inkMQ.css']);
+ extractMQ( dirs.dist + '/css/ink.css', dirs.dist + '/css/ink-noMQ.css', ['only screen and (max-width: 600px)|./dist/css/inkMQ.css']);
});
// inject media queries into the head of the inlined email
gulp.task('inject-mq', ['extract-mq'], function() {
- gulp.src(dirs.build + '/index-inline.html')
- .pipe(inject(gulp.src(dirs.build + '/css/inkMQ.css'), {
+ gulp.src(dirs.dist + '/index-inline.html')
+ .pipe(inject(gulp.src(dirs.dist + '/css/inkMQ.css'), {
starttag: '<!-- inject:mq-css -->',
transform: function (filePath, file) {
// return file contents as string
return "<style>\n" + file.contents.toString('utf8') + "\n</style>"
}
}))
- .pipe(gulp.dest('./build'));
+ .pipe(gulp.dest('./dist'));
})
spare: true
};
- gulp.src(dirs.build)
+ gulp.src(dirs.dist)
.pipe(minifyHTML(opts))
.pipe(connect.reload())
});
// Convert HTML to plain text, just in caseies
gulp.task('html-plaintext', function() {
- gulp.src(dirs.html)
+ gulp.src(dirs.dist)
.pipe(html2txt())
.pipe(rename(function(path) {
path.basename += '-plaintext'
}))
- .pipe(gulp.dest(dirs.build));
+ .pipe(gulp.dest(dirs.dist));
});
// Task to copy HTML directly, without minifying
gulp.task('copy-html', function() {
- return gulp.src(dirs.html)
- .pipe(gulp.dest(dirs.build))
+ return gulp.src(dirs.src + '/layouts/*.html')
+ .pipe(gulp.dest(dirs.dist))
.pipe(connect.reload())
});
+// Inject html partials into default page
+gulp.task('inject-html', function() {
+ omglob(dirs.temp + '/*.html', function(er, files) {
+ for (var i = 0; i < files.length; i++) {
+ var filePath = files[i].replace(/\\/g, '/');
+ var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
+
+ gulp.src(dirs.src + '/layouts/default.html')
+ .pipe(inject(gulp.src(files[i]), {
+ starttag: '<!-- inject:page:{{ext}} -->',
+ transform: function (filePath, file) {
+ // return file contents as string
+ return file.contents.toString('utf8')
+ }
+ }))
+ .pipe(rename({
+ basename: fileName
+ }))
+ .pipe(gulp.dest(dirs.dist));
+ }
+ })
+});
+
+// Inject handlebars partials
+gulp.task('inject-handlebars', function() {
+
+ omglob(dirs.src + '/pages/*.handlebars', function(er, files) {
+
+ for (var i = 0; i < files.length; i++) {
+ var filePath = files[i].replace(/\\/g, '/');
+ var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
+
+ var templateData = {},
+ options = {
+ batch : ['./src/partials']
+ };
+
+ gulp.src(files[i])
+ .pipe(handlebars(templateData, options))
+ .pipe(rename(fileName + '.html'))
+ .pipe(gulp.dest(dirs.temp));
+ }
+ })
+});
+
+gulp.task('compile', function() {
+ runOrder('clean:temp', 'inject-handlebars', function() {
+ // better way to do this?
+ setTimeout(function() {
+ gulp.start('inject-html')
+ }, 50);
+ });
+})
+
// 6. Syntax Transformer
// - - - - - - - - - - - - - - -
// get the HTML from the body and run it through Inky parser
gulp.task('query', function() {
- gulp.src(dirs.html)
+ gulp.src(dirs.dist + '/*.html')
.pipe(inkyGulp())
- .pipe(gulp.dest(dirs.build))
+ .pipe(gulp.dest(dirs.dist))
.pipe(connect.reload());
});
// - - - - - - - - - - - - - - -
// Wipes build folder, then compiles SASS, then minifies and copies HTML
-gulp.task('build', ['clean', 'sass', 'query'], function() {
+gulp.task('build', ['clean:dist', 'sass', 'query'], function() {
gulp.start('minify-html');
});
// Default Port: 8080
gulp.task('serve', function() {
return connect.server({
- root: dirs.build,
+ root: dirs.dist,
livereload: true
});
});
// Watch all HTML files and SCSS files for changes
// Live reloads on change
gulp.task('watch', ['serve'], function() {
- gulp.watch([dirs.html], ['query','minify-html']);
+ gulp.watch([dirs.src], ['compile','query','minify-html']);
gulp.watch([dirs.styles], ['sass']);
});
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="/css/ink.css">
- <!-- inject:mq-css -->
- <!-- endinject -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width"/>
- <style>
-
- table.facebook td {
- background: #3b5998;
- border-color: #2d4473;
- }
-
- table.facebook:hover td {
- background: #2d4473 !important;
- }
-
- table.twitter td {
- background: #00acee;
- border-color: #0087bb;
- }
-
- table.twitter:hover td {
- background: #0087bb !important;
- }
-
- table.google-plus td {
- background-color: #DB4A39;
- border-color: #CC0000;
- }
-
- table.google-plus:hover td {
- background: #CC0000 !important;
- }
-
- .template-label {
- color: #ffffff;
- font-weight: bold;
- font-size: 11px;
- }
-
- .callout .panel {
- background: #ECF8FF;
- border-color: #b9e5ff;
- }
-
- .header {
- background: #999999;
- }
-
- .footer .wrapper {
- background: #ebebeb;
- }
-
- .footer h5 {
- padding-bottom: 10px;
- }
-
- table.columns .text-pad {
- padding-left: 10px;
- padding-right: 10px;
- }
-
- table.columns .left-text-pad {
- padding-left: 10px;
- }
-
- table.columns .right-text-pad {
- padding-right: 10px;
- }
-
- @media only screen and (max-width: 600px) {
-
- table[class="body"] .right-text-pad {
- padding-left: 10px !important;
- }
-
- table[class="body"] .left-text-pad {
- padding-right: 10px !important;
- }
- }
-
- </style>
-</head>
-
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
- <row class="header">
- <columns large='12' small='12'>
- <subcolumns large='6' small='6'>
- <img src="http://placehold.it/200x50">
- </subcolumns>
- <subcolumns large='6' small='6'>
- <span class="template-label">SIDEBAR HERO</span>
- </subcolumns>
- </columns>
- </row>
- <container>
- <row>
- <columns large='12'>
- <h1>Welcome, Daneel Olivan</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
- <img width="580" height="300" src="http://placehold.it/580x300">
- </columns>
- </row>
- <row>
- <columns large='12'>
- <callout>
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! ยป</a></p>
- </callout>
- </columns>
- </row>
- <row>
- <columns large='6'>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
- <button><a href="#">Click Me!</a></button>
- </columns>
- <columns large='6'>
- <callout>
- <h6>Header Thing</h6>
- <p>Sub-head or something</p>
- <inline-list-v>
- <a href="#">Just a Plain Link »</a>
- <a href="#">Just a Plain Link »</a>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- <hr>
- <a href="#">Just a Plain Link »</a>
- </inline-list-v>
- </callout>
- </columns>
- </row>
- <row>
- <columns large='6'>
- </columns>
- <columns large='6'>
- <callout>
- <h6 style="margin-bottom:5px;">Connect With Us:</h6>
- <button class="tiny-button facebook">
- <a href='#'>Facebook</a>
- </button>
- <hr>
- <button class="tiny-button twitter">
- <a href='#'>Twitter</a>
- </button>
- <hr>
- <button class="tiny-button google-plus">
- <a href='#'>Google</a>
- </button>
- <br>
- <h6 style="margin-bottom:5px;">Contact Info:</h6>
- <p>Phone: <b>408.341.0600</b></p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </callout>
- </columns>
- </row>
- <row>
- <columns large='12'>
- <center>
- <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
- </center>
- </columns>
- </row>
- </container>
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
