HTML email compilation with SASS & inlined css

gulpfile.js

/* 
# 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']);