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 файле, а потом они заинлайнятся