gulpfile.js

'use strict';

// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var args = require('yargs').argv;
var path = require('path');
var fs = require('fs');

// Grab bower_components directory
if (fs.existsSync('./.bowerrc')) {
	var bower_config = JSON.parse(fs.readFileSync('./.bowerrc'));
	bower_path = bower_config.directory;
}
var bower_path = bower_path || './bower_components';

//
// Config
var config = {
    environment             : (args.env || args.environment || 'development'),
    browsersync_proxy       : 'dev.example.com',
    header                  : '/** DO NOT EDIT! This file is automatically generated by gulp.js **/',
    sass_path               : 'src/sass',
    source_images_path      : 'src/img',
    source_javascripts_path : 'src/js',
    source_fonts_path       : 'src/fonts',
    source_html_path        : 'src',
    http_path               : 'dest',
    javascripts_path        : 'dest/js',
    css_path                : 'dest/css',
    images_path             : 'dest/img',
    fonts_path              : 'dest/fonts',
    html_path               : 'dest',
    sass_includes           : [
        //bower_path + '/normalize-scss',
        //bower_path + '/bourbon/dist'
    ]
};

// Prepend sass path to includes
config.sass_includes.unshift(config.sass_path);

// Prepend the CWD to each SASS include (above)
config.sass_includes = config.sass_includes.map(function(includePath) {
    return path.join(process.cwd(), includePath);
});

//
// BrowserSync
gulp.task('browser-sync', function() {
    browserSync({
        // server: {
        //    baseDir: "./" + config.http_path
        // }
        // ... or ...
        proxy: config.browsersync_proxy,
        online: true,
        open: "external",
        host: config.browsersync_proxy
    });

    gulp.watch(config.html_path+'/**/*.html', reload);
    // gulp.watch(config.css_path+'/**/*.css', reload);
    gulp.watch(config.javascripts_path+'/**/*.js', reload);
    // gulp.watch(config.images_path+'/**/*', reload);
});

//
// Images
gulp.task('images', function() {
    var filter_svg   = $.filter('**/*.svg');
    var filter_other = $.filter('**/*.{png,gif,jpg,jpeg}');

    return gulp.src(config.source_images_path+'/**/*')
        .pipe(filter_other)
        .pipe($.cache($.imagemin({progressive: true, interlaced: true})))
        .pipe(filter_other.restore())
        .pipe(filter_svg)
        .pipe($.cache($.svgmin()))
        .pipe(filter_svg.restore())
        .pipe(gulp.dest(config.images_path))
        .pipe(reload({ stream: true }))
    ;
});

gulp.task('images:watch', function() {
    return gulp.watch(config.source_images_path+'/**/*', ['images']).on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

//
// SASS
gulp.task('sass', function() {
    return gulp.src(['Gemfile', 'Gemfile.lock', config.sass_path+'/**/*.scss'])
        .pipe($.rubySass({
            sourcemap: !(config.environment === 'production'),
            compass: false,
            quiet: true,
            bundleExec: true,
            style: (config.environment === 'production') ? 'compressed' : 'expanded',
            precision: 10,
            loadPath: config.sass_includes
        }))
		.pipe($.rename(function (currentPath) {
			if (currentPath.basename.indexOf('.min') === -1) {
				currentPath.basename += '.min';
			}
		}))
        .pipe(gulp.dest(config.css_path))
    ;
});

gulp.task('sass:watch', function() {
    return gulp.watch(config.sass_path+'/**/*.scss', ['sass']).on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

//
// Styles
gulp.task('styles', function() {
    return gulp.src(config.css_path+'/**/*.css')
        .pipe($.pleeease())
        .pipe($.if(config.environment === 'production', $.minifyCss()))
        .pipe($.if(config.header, $.header(config.header+'\n')))
        .pipe(gulp.dest(config.css_path))
        .pipe(reload({ stream: true }))
    ;
});

gulp.task('styles:watch', function() {
    return gulp.watch(config.css_path+'/**/*.css', ['styles']).on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

gulp.task('styles:clean', del.bind(null, [config.css_path]));

//
// Scripts
gulp.task('scripts', function() {
    return gulp.src(config.source_javascripts_path+'/**/*.js')
        .pipe($.if(config.environment === 'production', $.uglify()))
        .pipe($.if(config.environment === 'production', $.stripDebug()))
        .pipe($.header(config.header+'\n'))
        .pipe($.rename(function (currentPath) {
            if (currentPath.basename.indexOf('.min') === -1) {
                currentPath.basename += '.min';
            }
        }))
        .pipe(gulp.dest(config.javascripts_path))
    ;
});

gulp.task('scripts:watch', function() {
    return gulp.watch(config.source_javascripts_path+'/**/*.js', ['scripts']).on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

gulp.task('scripts:clean', del.bind(null, [config.javascripts_path]));

//
// HTML Fileinclude
gulp.task('html', function() {
    return gulp.src(config.source_html_path+'/*.html')
        .pipe($.fileInclude({prefix: '@@', basepath: '@file' }))
        .pipe(gulp.dest(config.html_path))
    ;
});

gulp.task('html:watch', function() {
    return gulp.watch(config.source_html_path+'/**/*.html', ['html']).on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

gulp.task('html:clean', del.bind(null, [config.html_path]));

//
// Fonts
gulp.task('fonts', function() {
return gulp.src(config.source_fonts_path+'/**/*.{eot,svg,ttf,woff}')
        .pipe(gulp.dest(config.fonts_path))
    ;
});

gulp.task('fonts:clean', del.bind(null, [config.fonts_path]));

//
// Main Tasks

// Clean
gulp.task('clean', ['styles:clean']);

// Watch
gulp.task('watch', ['images:watch', 'sass:watch', 'styles:watch', 'scripts:watch', 'html:watch']);

// Build
gulp.task('build', function(cb) {
    console.log('---');
    console.log('Building project using environment: ' + config.environment);
    console.log('---');
    runSequence('clean', ['fonts', 'images', 'scripts'], 'sass', 'styles', 'html', cb);
});

// Default
gulp.task('default', function(cb) {
    runSequence('build', 'watch', 'browser-sync', cb);
});

package.json

{
  "main": "gulpfile.js",
  "author": "Chris Jones <[email protected]>",
  "devDependencies": {
    "browser-sync": "^1.3.7",
    "del": "^0.1.3",
    "gulp": "^3.8.8",
    "gulp-bytediff": "^0.2.0",
    "gulp-cache": "^0.2.2",
    "gulp-clean": "^0.3.1",
    "gulp-file-include": "^0.5.1",
    "gulp-filter": "^1.0.2",
    "gulp-header": "^1.0.5",
    "gulp-if": "^1.2.4",
    "gulp-imagemin": "^1.0.1",
    "gulp-load-plugins": "^0.6.0",
    "gulp-minify-css": "^0.3.8",
    "gulp-pleeease": "^1.0.4",
    "gulp-rename": "^1.2.0",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-strip-debug": "^1.0.1",
    "gulp-svgmin": "^0.4.6",
    "gulp-uglify": "^1.0.1",
    "run-sequence": "^0.3.6",
    "yargs": "^1.3.1"
  },
  "private": true,
  "scripts": {
    "test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
  }
}

pleeeaserc

{
    "fallbacks": {
        "autoprefixer": [
            "last 2 versions",
            "safari 5",
            "ie 8",
            "ie 9",
            "opera 12.1",
            "ios 6",
            "android 4"
        ]
    }
}

Ultimate_Gulpfile.md

Includes:

• Configuration
• BrowserSync
• Environments (e.g.,: --environment=production)
• Image optimization (gif, jpg, png, and svg)
• Sass compilation with external libraries
• Bower installed Sass libraries example(s)
• CSS processing with Pleeease