Sample gulpfile.js

gulpfile.js

var gulpConfig      = require('./package.json'),
    src             = 'src/',
    dest            = 'dist/',
    deployPath      = '~/Sites/cbc-ca/news2/interactives/' + gulpConfig.name;      

var htmlFiles       = [
                       src + 'index.html', 
                       src + 'embed.html', 
                       src + 'generator.html'
                    ];

var htmlTemplates   = [ 
                        src + 'tpl/single.html' 
                    ];                  

var appConfig       = [ 
                        src + 'config/config.js' 
                    ];

var appData         = [
                       src + 'data/sample.csv',  
                       src + 'data/sample.json'
                    ];
                                         

var vendorJS        = [ 
                        'bower_components/jquery/dist/jquery.js',
                        'bower_components/foundation/js/foundation.js',
                        'bower_components/handlebars/handlebars.js',
                    ];

var vendorCSS       = [ 
                        'bower_components/foundation/css/normalize.css',
                        'bower_components/foundation/css/foundation.css'
                    ];


var gulp            = require('gulp'),
    gutil           = require('gulp-util'),
    rename          = require('gulp-rename'),
    concat          = require('gulp-concat'),
    clean           = require('gulp-clean'),
    notify          = require('gulp-notify'),    
    livereload      = require('gulp-livereload'),
    cache           = require('gulp-cache'),

    jshint          = require('gulp-jshint'),
    uglify          = require('gulp-uglify'),

    sass            = require('gulp-sass'),
    autoprefixer    = require('gulp-autoprefixer'),
    uncss           = require('gulp-uncss'),
    minifycss       = require('gulp-minify-css'),

    imagemin        = require('gulp-imagemin');


// Load gulp plugins automatically
var gulpLoadPlugins = require('gulp-load-plugins'),
    gulpPlugins     = gulpLoadPlugins();


// Clean the dist directory
gulp.task('clean', function(cb) {
    return gulp.src(dest + '/*')
    .pipe(clean())
    .pipe(notify({ message: 'Clean task complete.' }), cb);

});


// JS Lint Task
gulp.task('lint', function() {
    return gulp.src(src + 'js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(notify({ message: 'lint task complete.' }));

});


// JS 
// Concatenate & Minify APP JS
gulp.task('app-scripts', function() {
    return gulp.src(src + '/js/*.js')
        .pipe(concat('app.js'))
        .pipe(gulp.dest(dest + '/js'))
        .pipe(rename('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest + '/js'))
        .pipe(notify({ message: 'app-scripts task complete.' }));

});


// Concatenate & Minify Vendor JS
gulp.task('vendor-scripts', function() {
    return gulp.src(vendorJS)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(dest + '/js'))
        .pipe(rename('vendor.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest + '/js'))
        .pipe(notify({ message: 'vendor-scripts task complete.' }));

});
// JS 


// CSS
// Compile Our Sass
gulp.task('app-sass', function() {
    return gulp.src(src + 'scss/*.scss')
        .pipe(concat('app-concat.scss'))

        .pipe(sass({ style: 'expanded' }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .on('error', function(err){ console.log(err.message); })

        .pipe(rename('app.css'))
        .pipe(gulp.dest(dest + '/css'))

        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(dest + '/css'))
        .pipe(notify({ message: 'app-sass task complete.' }));        

});


// vendorCSS
gulp.task('vendor-style', function() {
    return gulp.src(vendorCSS)
        
        .pipe(concat('vendor.css'))
        .pipe(gulp.dest(dest + '/css'))
        
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(dest + '/css'))
        .pipe(notify({ message: 'vendor-style task complete.' }));

});
// CSS


// Copy the project assets to dist/
gulp.task('copyAssets', function(){

    gulp.src(appConfig)
        .pipe(gulp.dest(dest + 'config/'));

    gulp.src(htmlTemplates)
        .pipe(gulp.dest(dest + 'tpl/'));

    gulp.src(htmlFiles)
        .pipe(gulp.dest(dest));

    gulp.src(appData)
        .pipe(gulp.dest(dest + 'data/'));

});
// Copy the project assets to dist/


// Compress images
gulp.task('images', function() {
  return gulp.src(src + 'gfx/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
    .pipe(gulp.dest(dest + 'gfx/**/*'))
    .pipe(notify({ message: 'Images task complete.' }));

});


// Watch Files For Changes
gulp.task('watch', function() {
    
    gulp.watch(src + 'js/*.js', ['lint', 'app-scripts']);
    gulp.watch(src + 'scss/*.scss', ['style']);
    gulp.watch(src + 'gfx/**/*', ['images']);

    // Create LiveReload server
    livereload.listen();

    // Watch any files in dist/, reload on change
    gulp.watch(['dist/**']).on('change', livereload.changed);

});


// Copy dist to local preview server path
gulp.task('deploy', function(){
    gulp.src('dist/**')
        .pipe(gulp.dest(deployPath))
        .pipe(notify({ message: 'Deploy task complete.' }));
});


// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});


// Default Task
gulp.task('default', ['lint', 'app-sass', 'vendor-style', 'app-scripts', 'vendor-scripts', 'copyAssets']);

// Deploy local preview
gulp.task('deployPreview', [ 'clean', 'default', 'images', 'deploy']);

// Watcher Task
gulp.task('watcher', ['watch', 'default']);