Skip to content

Instantly share code, notes, and snippets.

@dshster
Created November 23, 2015 13:38
Show Gist options
  • Save dshster/0f77a1fa2ea2caa186df to your computer and use it in GitHub Desktop.
Save dshster/0f77a1fa2ea2caa186df to your computer and use it in GitHub Desktop.
/* 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": ""
}
}
@voischev
Copy link

Посмотри на этот плагин https://github.com/maltsev/posthtml-inline-css должен пригодиться для верстки писем
С ним можно верстать все стили в CSS файле, а потом они заинлайнятся

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment