mshillam
/
responsive-html-email-signature
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

😋 Rework build & add postcss #12, #11

This commit is contained in:
Dan Mindru 2016-05-24 22:03:03 +02:00
parent b3aa899ffa
commit 293ed731ae
14 changed files with 570 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
dist/dark/signature-dark.html vendored
View File

File diff suppressed because one or more lines are too long

70
dist/dark/signature-reply-dark.html vendored
View File

@ -1 +1,69 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media only screen and (max-width:560px){.footer__main__col1,.footer__main__col2{width:100%!important}.footer td{font-size:12px!important}.footer__main__col1__td{text-align:left}.footer__main__col1__td>span{margin-bottom:10px}.footer__main__col2__td{text-align:left;padding-bottom:20px}.footer__main__col2__td__img{padding-left:0!important}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Best regards,<br>The dark mail team<br></td></tr></table></td></tr></table></body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
/*
* ================
* 4. Basic responsive stuff.
* ================
*/
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>
</head>
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
<br> <!-- <br/> Makes it easier to add text when composing -->
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr>
<tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
<td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF">
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">
Best regards,<br>
The dark mail team<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>

126
dist/light/full-mail-light.html vendored
View File

File diff suppressed because one or more lines are too long

111
dist/light/signature-light.html vendored
View File

File diff suppressed because one or more lines are too long

84
dist/light/signature-reply-light.html vendored
View File

@ -1 +1,83 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media only screen and (max-width:480px){.footer td{font-size:12px!important}.footer__main__col1,.footer__main__col2{width:100%!important}.footer__main__col2__td{text-align:left;padding-bottom:20px}.footer__main__col2__td__img{padding-left:0!important}.gray-hr hr{margin-bottom:10px!important;margin-top:10px!important}}@media only screen and (min-width:1025px){.background,.body-with-bg{background-color:#F1F1F1}.body-with-bg .main{border:1px solid #E9E9E9!important;max-width:960px;margin:0 auto}.background{padding:30px}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>The light mail team<br></td></tr></table></td></tr></table></body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
/*
* ================
* 4. Basic responsive stuff.
* ================
*/
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
.gray-hr hr{
margin-bottom:10px!important;
margin-top:10px!important;
}
}
@media only screen and (min-width:1025px){
/* After iPad size */
.body-with-bg{
background-color: #F1F1F1;
}
.body-with-bg .main{
border:1px solid #E9E9E9!important; /* Sorry! */
max-width:960px;
margin:0 auto;
}
.background{
padding:30px;
background-color: #F1F1F1;
}
}
</style>
</head>
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
<br>
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr>
<tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">
<td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF">
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">
Yours truly,<br>
The light mail team<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>

12
gulpfile.js
View File

@ -1,12 +1,16 @@
'use strict'; 'use strict';
var gulp = require('gulp'), var gulp = require('gulp'),
wrench = require('wrench'); wrench = require('wrench'),
plumber = require('gulp-plumber');
var options = { var options = {
src: 'src', source: 'src',
dist: 'dist', dist: 'dist',
workingDir: 'tmp' workingDir: 'tmp',
src: function plumbedSrc(){
return gulp.src.apply(gulp, arguments).pipe(plumber());
}
}; };
/** Load tasks from the '/tasks' directory. /** Load tasks from the '/tasks' directory.
@ -23,4 +27,4 @@ wrench
}); });
/** By default templates will be built into '/dist', then gulp will watch for changes in '/src'. */ /** By default templates will be built into '/dist', then gulp will watch for changes in '/src'. */
gulp.task('default', ['dupe', 'postcss', 'less', 'sass', 'build', 'clean', 'watch']); gulp.task('default', ['dupe', 'less', 'sass', 'postcss', 'build', 'watch']);

4
package.json
View File

@ -24,18 +24,18 @@
"homepage": "https://github.com/fadeit/responsive-html-email-signature#readme", "homepage": "https://github.com/fadeit/responsive-html-email-signature#readme",
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.3.6", "autoprefixer": "^6.3.6",
"del": "~2.2.0", "del": "^2.2.0",
"gulp": "~3.9.1", "gulp": "~3.9.1",
"gulp-david": "~0.4.2", "gulp-david": "~0.4.2",
"gulp-inline-css": "~3.1.0", "gulp-inline-css": "~3.1.0",
"gulp-inline-image-html": "~0.2.1", "gulp-inline-image-html": "~0.2.1",
"gulp-minify-html": "~1.0.5", "gulp-minify-html": "~1.0.5",
"gulp-minify-inline": "~0.2.1", "gulp-minify-inline": "~0.2.1",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.1", "gulp-postcss": "^6.1.1",
"gulp-preprocess": "~2.0.0", "gulp-preprocess": "~2.0.0",
"gulp-rename": "~1.2.2", "gulp-rename": "~1.2.2",
"q": "~1.4.1", "q": "~1.4.1",
"run-sequence": "~1.1.5",
"wrench": "~1.5.8" "wrench": "~1.5.8"
}, },
"dependencies": {} "dependencies": {}

23
tasks/build.js
View File

@ -12,7 +12,7 @@ var gulp = require('gulp'),
inlineimg = require('gulp-inline-image-html'); inlineimg = require('gulp-inline-image-html');
function buildTask(options){ function buildTask(options){
gulp.task('build', function build(cb) { gulp.task('build', ['dupe'], function build() {
var promises = []; var promises = [];
/** Makes templates for a given directory & its configurations. /** Makes templates for a given directory & its configurations.
@ -23,7 +23,7 @@ function buildTask(options){
function makeTemplates(dir, confItems){ function makeTemplates(dir, confItems){
confItems confItems
.forEach(function handleConf(conf){ .forEach(function handleConf(conf){
var cwd = options.src + '/' + dir; var cwd = options.workingDir + '/' + dir;
gulp gulp
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html']) .src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
@ -37,8 +37,8 @@ function buildTask(options){
preserveMediaQueries: true, preserveMediaQueries: true,
removeStyleTags: false removeStyleTags: false
})) }))
.pipe(minifyHTML({quotes: true})) //.pipe(minifyHTML({quotes: true}))
.pipe(minifyInline()) //.pipe(minifyInline())
.pipe(rename(function rename(path){ .pipe(rename(function rename(path){
path.dirname = dir; path.dirname = dir;
path.basename += '-' + conf.id; path.basename += '-' + conf.id;
@ -50,23 +50,24 @@ function buildTask(options){
/** Clean up & then read 'src' to generate templates (build entry point). */ /** Clean up & then read 'src' to generate templates (build entry point). */
del(options.dist).then(function buildStart(){ del(options.dist).then(function buildStart(){
/** Loop through dirs and load their conf files. /** Loop through dirs and load their conf files.
* Promisify all 'makeTemplate' calls and when resolved, make a call to the task `cb` to let gulp know we're done. * Promisify all 'makeTemplate' calls and when resolved, make a call to the task `cb` to let gulp know we're done.
*/ */
wrench wrench
.readdirSyncRecursive(options.src) .readdirSyncRecursive('./' + options.workingDir)
.filter(function filterFiles(file) { .filter(function filterFiles(file) {
/** Read only folders, skip files. */
/* Read only folders, skip files. */
return (!file.match('/') && !file.match(/^\.+/g)) ? file : false; return (!file.match('/') && !file.match(/^\.+/g)) ? file : false;
}) })
.forEach(function readConfigurations(dir){ .forEach(function readConfigurations(dir){
/** NB: For 'watch' to properly work, the cache needs to be deleted before each require. */ /** NB: For 'watch' to properly work, the cache needs to be deleted before each require. */
var confPath = './../' + options.src + '/' + dir + '/conf.js'; var confPath = './../' + options.workingDir + '/' + dir + '/conf.js';
delete require.cache[require.resolve(confPath)]; delete require.cache[require.resolve(confPath)];
promises.push(makeTemplates(dir, require(confPath))); promises.push(makeTemplates(dir, require(confPath)));
}); });
Q.all(promises).then(function buildReady(){ cb(); }); Q.all(promises);
}); });
}); });
} }

0
tasks/clean.js
View File

16
tasks/dupe.js
View File

@ -0,0 +1,16 @@
'use strict';
var gulp = require('gulp'),
del = require('del');
function dupeTask(options){
gulp.task('dupe', function(){
del.sync([options.workingDir]);
return options
.src(['src/**/*'])
.pipe(gulp.dest('./' + options.workingDir));
});
}
module.exports = dupeTask;

11
tasks/less.js
View File

@ -0,0 +1,11 @@
'use strict';
var gulp = require('gulp');
function lessTask(options){
gulp.task('less', function(){
//todo
});
}
module.exports = lessTask;

22
tasks/postcss.js
View File

@ -7,13 +7,27 @@ var gulp = require('gulp'),
function postcssTask(options){ function postcssTask(options){
gulp.task('postcss', function () { gulp.task('postcss', function () {
var processors = [ var processors = [
autoprefixer({browsers: ['Android', 'ChromeAndroid', 'FirefoxAndroid', 'Opera Mini', 'Chrome', 'Firefox', 'Explorer', 'Edge', 'iOS', 'Opera', 'Safari', 'ExplorerMobile']}), autoprefixer({
browsers: [
'Android',
'ChromeAndroid',
'FirefoxAndroid',
'Opera Mini',
'Chrome',
'Firefox',
'Explorer',
'Edge',
'iOS',
'Opera',
'Safari',
'ExplorerMobile'
]
})
]; ];
//@TODO src & dest return gulp.src(options.workingDir + '/*.css')
return gulp.src('./src/*.css')
.pipe(postcss(processors)) .pipe(postcss(processors))
.pipe(gulp.dest('./tmp')); .pipe(gulp.dest(options.workingDir));
}); });
} }

11
tasks/sass.js
View File

@ -0,0 +1,11 @@
'use strict';
var gulp = require('gulp');
function sassTask(options){
gulp.task('sass', function(){
//todo
});
}
module.exports = sassTask;

14
tasks/watch.js
View File

@ -3,9 +3,17 @@
var gulp = require('gulp'); var gulp = require('gulp');
function watchTask(options){ function watchTask(options){
gulp.task('watch', function(){ gulp.task('watch', ['dupe', 'build'], function(){
//@todo watch less & sass files gulp.watch(
gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css', options.src + '/**/conf.js'], ['dupe', 'postcss', 'less', 'sass', 'build', 'clean']); [
options.source + '/**/*.html',
options.source + '/**/*.css',
options.source + '/**/*.sass',
options.source + '/**/*.less',
options.source + '/**/conf.js'
],
['dupe', 'less', 'sass', 'postcss', 'build']
);
}); });
} }