npm install
gulp
gulp inliner
gulp mail
npm install
gulp
gulp inliner
gulp mail
/* https://twitter.com/dshster */ | |
'use strict'; | |
var gulp = require('gulp'), | |
fs = require('fs'), | |
debug = require('gulp-debug'), | |
less = require('gulp-less'), | |
data = require('gulp-data'), | |
jade = require('gulp-jade'), | |
path = require('path'), | |
settingsJson = './settings.json', | |
settings = require(settingsJson), | |
posthtml = require('gulp-posthtml'), | |
inlineCss = require('gulp-inline-css'); | |
var nodemailer = require('nodemailer'), | |
smtpTransport = require('nodemailer-smtp-transport'); | |
var transporter = nodemailer.createTransport(smtpTransport({ | |
host: 'smtp.yandex.ru', | |
port: 465, | |
secure: true, | |
auth: settings.auth | |
})); | |
var mailOptions = { | |
from: '', | |
to: '', | |
subject: 'Letter subject', | |
text: 'Text format' | |
}; | |
gulp.task('mail', function() { | |
if (fs.existsSync('letter.html')) { | |
mailOptions.html = fs.readFileSync('letter.html', 'utf8'); | |
} | |
transporter.sendMail(mailOptions, function(error, info) { | |
if (error) { | |
return console.log(error); | |
} | |
console.log('Message sent: ' + info.response); | |
}); | |
}); | |
gulp.task('styles', function() { | |
return gulp.src('*.less') | |
.pipe(debug()) | |
.pipe(less({ | |
cleancss: false | |
})) | |
.on('error', function(error) { | |
console.log(error); | |
this.end(); | |
}) | |
.pipe(gulp.dest('./')); | |
}); | |
gulp.task('inliner', function() { | |
var plugins = [ | |
require('posthtml-doctype')('<!DOCTYPE html>'), | |
require('posthtml-extend-attrs')({ | |
attrsTree: { | |
'table': { | |
cellpadding: '0', | |
cellspacing: '0' | |
} | |
} | |
}) | |
]; | |
return gulp.src('*.jade') | |
.pipe(debug()) | |
.pipe(data(function(file) { | |
return require('./' + path.basename(file.path, '.jade') + '.json'); | |
})) | |
.pipe(jade({ | |
pretty: true | |
})) | |
.on('error', function(error) { | |
console.log(error); | |
this.end(); | |
}) | |
.pipe(posthtml(plugins, { | |
closingSingleTag: 'slash' | |
})) | |
.pipe(inlineCss({})) | |
.pipe(gulp.dest('./')); | |
}); | |
gulp.task('watch', ['inliner'], function() { | |
gulp.watch(['*.css', '*.jade'], ['inliner']).on('change', function(file) { | |
console.log(file.path); | |
}); | |
gulp.watch(['*.less'], ['styles']).on('change', function(file) { | |
console.log(file.path); | |
}); | |
}); | |
gulp.task('default', ['styles']); |
doctype html | |
html(lang='ru') | |
head | |
meta(charset='UTF-8') | |
link(rel='stylesheet', href='letter.css') | |
block letter-body | |
body | |
table#mailsub.outer(align='center', width='100%') | |
tr | |
td.header-row(align='center', width='100%') | |
a(href= root) | |
img(src= image) | |
{ | |
"root": "http://google.ru/", | |
"image": "https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" | |
} |
body { | |
margin: 0; | |
padding: 0; | |
} | |
table { | |
border-collapse: collapse; | |
} | |
img { | |
display: block; | |
} | |
div, p, span, strong, b, em, i, a, li, td { | |
-webkit-text-size-adjust: none; | |
} | |
a { | |
text-decoration: none; | |
} | |
p { | |
margin: 0; | |
} |
{ | |
"name": "letters", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"gulp": "^3.9.0", | |
"gulp-data": "^1.2.0", | |
"gulp-debug": "^2.1.2", | |
"gulp-inline-css": "^3.0.0", | |
"gulp-jade": "^1.1.0", | |
"gulp-less": "^3.0.5", | |
"gulp-minify-html": "^1.0.4", | |
"gulp-posthtml": "^1.5.1", | |
"posthtml": "^0.7.0", | |
"posthtml-doctype": "^1.1.1", | |
"posthtml-extend-attrs": "git+https://github.com/theprotein/posthtml-extend-attrs.git" | |
}, | |
"dependencies": { | |
"install": "^0.3.0", | |
"nodemailer": "^1.9.0", | |
"nodemailer-smtp-transport": "^1.0.4", | |
"npm": "^3.4.0" | |
} | |
} |
{ | |
"auth": { | |
"user": "", | |
"pass": "" | |
} | |
} |
Посмотри на этот плагин https://github.com/maltsev/posthtml-inline-css должен пригодиться для верстки писем
С ним можно верстать все стили в CSS файле, а потом они заинлайнятся