Created
August 23, 2014 14:27
-
-
Save toonvandenbos/5d56552342e95cad8b91 to your computer and use it in GitHub Desktop.
HTML email compilation with SASS & inlined css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
# HTML email gulpfile - workflow | |
This is my standard file for an e-mailing project. Useful for : | |
- creating e-mail templates using SASS | |
- automatically minify your images | |
- inline generated css in your html file | |
## How to install | |
### Prerequisites | |
THis file uses gulp-premailer. It uses the Premailer gem to inline styles, and is required for core functionality. | |
You can install via RubyGems package management framework for Ruby: | |
`` | |
gem install premailer | |
`` | |
Or you can add it to your project's Gemfile and run `bundle install`. | |
### Install with npm | |
`` | |
npm install --save-dev gulp-util gulp-compass gulp-minify-css gulp-imagemin gulp-rename gulp-clean gulp-cache gulp-premailer gulp-livereload tiny-lr gulp-plumber | |
`` | |
## Project setup | |
This gulpfile requires the following structure : | |
`` | |
Main Project Folder | |
| | |
- gulpfile.js (this file) | |
- build | |
| | | |
| - css (compiled sass files, to include in ../html/*.html | content automatically cleaned !) | |
| - html (css-inlined html templates | content automatically cleaned !) | |
| - img (minified images) | |
- html (Raw html template with <style> or <link> tags. Css can be found in build/css) | |
- sass (Raw sass. will be compiled to build/css) | |
- img (Uncompressed images. Will be minified to build/img) | |
`` | |
See ya ! | |
*/ | |
var gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
compass = require('gulp-compass'), | |
minifycss = require('gulp-minify-css'), | |
imagemin = require('gulp-imagemin'), | |
rename = require('gulp-rename'), | |
clean = require('gulp-clean'), | |
cache = require('gulp-cache'), | |
premailer = require('gulp-premailer'), | |
refresh = require('gulp-livereload'), | |
lr = require('tiny-lr'), | |
server = lr(), | |
plumber = require('gulp-plumber'); | |
// Livereload | |
gulp.task('livereload', function() { | |
server.listen(35729, function(err) { | |
if (err) console.log(err); | |
}); | |
}); | |
// Styles | |
gulp.task('styles', function() { | |
return gulp.src('sass/*.scss') | |
.pipe(plumber()) | |
.pipe(compass({ | |
sass: 'sass', | |
css: 'build/css', | |
image: 'img', | |
style: 'expanded', | |
comments: false | |
})) | |
.pipe(rename({suffix: '.min'})) | |
.pipe(minifycss()) | |
.pipe(gulp.dest('build/css')); | |
}); | |
// Images | |
gulp.task('images', function() { | |
return gulp.src('img/**/*') | |
.pipe(plumber()) | |
.pipe(cache(imagemin({ | |
optimizationLevel: 3, | |
progressive: true, | |
interlaced: true | |
}))) | |
.pipe(gulp.dest('build/img')) | |
.pipe(refresh(server)); | |
}); | |
// Inline css | |
gulp.task('inlineCss', ['clean','styles'], function() { | |
return gulp.src('html/*.html') | |
.pipe(premailer()) | |
.pipe(gulp.dest('build/html/')) | |
.pipe(refresh(server)); | |
}); | |
// Clean | |
gulp.task('clean', function() { | |
return gulp.src(['build/css/*.css','build/html/*.html'], {read: false}) | |
.pipe(clean()); | |
}); | |
// Compile | |
gulp.task('compile', ['clean'], function() { | |
gulp.run('styles', 'images', 'inlineCss'); | |
}); | |
// Watch | |
gulp.task('watch', function() { | |
// Watch .html & .scss files | |
gulp.watch(['html/*.html','sass/**/*.scss'], ['inlineCss']); | |
// Watch image files | |
gulp.watch('img/**/*', ['images']); | |
}); | |
// Default | |
gulp.task('default', ['watch']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment