Skip to content

Instantly share code, notes, and snippets.

@brachycera

brachycera/gulpfile.js

Last active March 22, 2017 17:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brachycera/42b2e3332648626614300df7eff23d8a to your computer and use it in GitHub Desktop.
Save brachycera/42b2e3332648626614300df7eff23d8a to your computer and use it in GitHub Desktop.
Download ZIP
Zurb Inky setup with watcher, grunt and minify
Raw
gulpfile.js
module.exports = function (grunt) {
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
var siphon = require('siphon-media-query');
var fs = require('fs');
var nl_css = fs.readFileSync('PATH/TO/foundation-emails.css').toString();
var mq_css = siphon(nl_css);
// Filename for created template
var template = grunt.option('template') || 'rename_me';
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* Who watches the Watchmen
* dont forget the template param
* grunt watch:email --template='my_new_template'
*/
watch: {
email: {
files: ['master_template.html'],
tasks: ['email'],
options: {
spawn: true,
livereload: true
}
}
},
inky: {
base: {
options: {
cheerio: {
decodeEntities: false
}
},
files: [{
cwd: '/',
src: 'master_template.html',
dest: 'templates/',
filter: 'isFile',
expand: true,
rename: function () {
return 'templates/' + template + '.html';
}
}]
}
},
inlinecss: {
main: {
options: {
// applyStyleTags: false,
// removeLinkTags: false
removeStyleTags: true,
preserveMediaQueries: false,
webResources: {
images: false
}
},
files: [{
expand: true,
src: 'templates/' + template + '.html'
}]
}
},
htmlmin: {
main: {
files: [{
expand: true,
src: 'templates/' + template + '.html'
}],
options: {
collapseWhitespace: true,
minifyCSS: true,
}
}
},
'string-replace': {
main: {
files: [{
expand: true,
src: 'templates/' + template + '.html'
}],
options: {
replacements: [{
pattern: '<!-- <style> -->',
replacement: '<style>' + mq_css + '</style>'
},
{
pattern: '<!-- <tracker> -->',
replacement: '{this_is_my_smarty_tag}'
}]
}
}
}
});
grunt.registerTask('default', []);
grunt.registerTask('email', ['inky', 'inlinecss', 'string-replace', 'htmlmin']);
};
Raw
master_template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{subject}</title>
<meta property="og:title" content="{subject}" />
<link rel="stylesheet" href="PATH_TO_LOCAL/foundation-emails.css" />
</head>
<style>
body {
background-color: #fff;
}
a {
color: #3e86ab;
}
h1 {
color: #3e86ab;
font-weight: bold;
}
</style>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<container>
<row>
<columns>
<h3>Lorem ipsum dolor sit amet.</h3>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, dignissimos.</h1>
<row>
<columns large="4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis unde quo, repellendus odit nobis minus optio voluptatibus numquam animi distinctio.</p>
</columns>
<columns large="8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis unde quo, repellendus odit nobis minus optio voluptatibus numquam animi distinctio.</p>
</columns>
</row>
</columns>
</row>
</container>
</center>
</td>
</tr>
</table>
{tracker}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment