Skip to content

Instantly share code, notes, and snippets.

@diegoliv
Created May 14, 2015 17:31
Show Gist options
  • Save diegoliv/80e942a1870e72b32c3e to your computer and use it in GitHub Desktop.
Save diegoliv/80e942a1870e72b32c3e to your computer and use it in GitHub Desktop.
gulpfile.js for building e-mail templates
var gulp = require( 'gulp' ),
sass = require( 'gulp-sass' ),
autoprefixer = require( 'gulp-autoprefixer' ),
minifycss = require( 'gulp-minify-css' ),
imagemin = require( 'gulp-imagemin' ),
rename = require( 'gulp-rename' ),
concat = require( 'gulp-concat' ),
plumber = require( 'gulp-plumber' ),
notify = require( 'gulp-notify' ),
inlineCss = require('gulp-inline-css'),
fs = require('fs'),
projectTitle = 'E-mail Templates';
// copy task, props to http://stackoverflow.com/users/3008741/ddprrt
gulp.task( 'copy', function() {
return gulp.src( ['templates/**/*','!templates/**/*.html'] )
.pipe( gulp.dest( 'build' ) );
});
// styles task
gulp.task( 'styles', function() {
return gulp.src( 'src/*.scss' )
.pipe( plumber() )
.pipe( sass({ paths: ['src/'] }) )
.pipe( notify( {
title: projectTitle,
message: 'File: <%= file.relative %> was compiled!'
} ) )
.pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
.pipe( gulp.dest( 'src/' ) )
.pipe( notify( {
title: projectTitle,
message: 'Minified file: <%= file.relative %> was created / updated!'
} ) )
console.log( '<%= file %>' );
} );
// html task
gulp.task( 'html-build', [ 'copy' ], function() {
return gulp.src( 'templates/**/*.html' )
.pipe( inlineCss({
applyStyleTags: false,
applyLinkTags: true,
removeStyleTags: false,
removeLinkTags: true
}) )
.pipe( gulp.dest('build/') )
.pipe( notify( {
title: projectTitle,
message: 'Template File: <%= file.relative %> was created / updated!'
} ) )
} );
// images task, props to http://stackoverflow.com/users/3008741/ddprrt
gulp.task( 'images', function( done ) {
// get all the directories inside templates. this will return
// an array of folders
var templates = fs.readdirSync( 'templates' ).filter( function( el ) {
return fs.statSync( 'templates/' + el ).isDirectory()
});
// we start our stream with all the files from images we want to have
var stream = gulp.src( 'images/**/*' )
.pipe( plumber() )
.pipe( imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }) );
// now we add a destination dir for each one of our
// templates
templates.forEach( function( el ) {
stream.pipe( gulp.dest( 'templates/' + el ) );
});
// we add the rest of our pipes
stream.pipe(notify({
title: projectTitle,
message: 'Image: <%= file.relative %> was optimized!'
}));
// returning the stream kicks it off
return stream;
});
// watch task
gulp.task( 'watch', function() {
// Watch .scss files
gulp.watch( 'src/**/*.scss', [ 'styles' ] );
// Watch .html files
gulp.watch( 'templates/**/*.html', [ 'html-build' ] );
// Watch common image files
gulp.watch( 'images/**/*', [ 'images' ] );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment