Skip to content

Instantly share code, notes, and snippets.

@toonvandenbos
Created August 23, 2014 14:27
Show Gist options
  • Save toonvandenbos/5d56552342e95cad8b91 to your computer and use it in GitHub Desktop.
Save toonvandenbos/5d56552342e95cad8b91 to your computer and use it in GitHub Desktop.
HTML email compilation with SASS & inlined css
/*
# 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