Gulp Build Starter

gulp-config.js

var src             = 'src/',
    dest            = 'dist/',
    tmp             = 'tmp/',
    htmlFiles       = [ src + '*.html' ],
    htmlTemplates   = [ src + 'tpl/*.html' ],
    appData         = [ src + 'data/*' ],
    fontFiles       = [ src + 'fonts/*' ],
    mediaPath       = [ src + 'images/*' ],
    appJS           = [ src + 'scripts/main.js'];

var gssKey          = '1NOjxsyEjDqfzdy5uc2NBQ8Cc0ncEP6I_z-519EgQDfc',
    gssLocal        = '';

var appCSS          = [
                        src + 'style/main.scss',
                        src + 'style/media-queries.scss'
                        ];

var vendorJS        = [
                        'bower_components/jquery/dist/jquery.js',
                        'bower_components/queue-async/queue.js',
                        'bower_components/d3/d3.js',
                        'bower_components/topojson/topojson.js'
                        ];

var vendorCSS       = [
                        src + 'style/vendor/www-css-core.css',
                        src + 'style/vendor/www-css-embeddable.css',
                        src + 'style/vendor/global.fonts.css>'
                        ];

module.exports = {
    src: src,
    dest: dest,
    tmp: tmp,
    htmlFiles: htmlFiles,
    htmlTemplates: htmlTemplates,
    appData: appData,
    gssKey: gssKey,
    gssLocal: gssLocal,
    fontFiles: fontFiles,
    mediaPath: mediaPath,
    appJS: appJS,
    appCSS: appCSS,
    vendorJS: vendorJS,
    vendorCSS: vendorCSS
}

gulpfils.js

var gulpConfig = require('./package.json'),
    projectConfig = require('./gulp-config.js');

var gulp = require('gulp'),
    debug = require('gulp-debug'),
    clean = require('gulp-clean'),
    gutil = require('gulp-util'),
    fs =  require('fs'),
    ifElse = require('gulp-if-else'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    del = require('del'),
    fileinclude = require('gulp-file-include'),
    imagemin = require('gulp-imagemin'),

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

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

    inline = require('gulp-inline'),

    browserSync = require('browser-sync').create(),
    reload = browserSync.reload;

// set gssKey & gssLocal in gulp-config as required, tested below before trying
var GoogleSpreadsheet = require("google-spreadsheet");

var gulpLoadPlugins = require('gulp-load-plugins'),
    $ = require('gulp-load-plugins')();

var debug = false;


/******************************
* Empty and remove dist/ & tmp/
******************************/
gulp.task('clean', function(cb) {

    gulp.src(projectConfig.dest)
    .pipe(clean());

    gulp.src(projectConfig.tmp)
    .pipe(clean());

});


/******************************
* Javascript
******************************/
gulp.task('lint', function() {

    return gulp.src(projectConfig.src + 'scripts/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));

});

gulp.task('appScripts', function() {

    gulp.src(projectConfig.appJS)
        .pipe(include())
        .pipe(concat('main.js'))
        .pipe(gulp.dest(projectConfig.dest + '/scripts'))
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(projectConfig.dest + '/scripts'))
        .pipe(browserSync.reload({
            stream: true
        }));

});

gulp.task('vendorScripts', function() {

    gulp.src(projectConfig.vendorJS)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(projectConfig.dest + '/scripts'))
        .pipe(rename('vendor.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(projectConfig.dest + '/scripts'));

});


/******************************
* Styles
******************************/
gulp.task('appStyle', function() {

    gulp.src(projectConfig.appCSS)
        .pipe(concat('main-concat.scss'))
        .pipe(gulp.dest(projectConfig.dest + '/style'))

    .pipe(sass({
            errLogToConsole: true,
            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('main.css'))
        .pipe(gulp.dest(projectConfig.dest + '/style'))

    .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest(projectConfig.dest + '/style'))
        .pipe(browserSync.reload({
            stream: true
        }));

});

gulp.task('vendorStyle', function() {

    gulp.src(projectConfig.vendorCSS)
        .pipe(concat('vendor.css'))
        .pipe(gulp.dest(projectConfig.dest + '/style'))

    .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest(projectConfig.dest + '/style'));

});


/******************************
* Assets
******************************/
gulp.task('optimizeImages', function() {
    return gulp.src(projectConfig.src + 'images/**/*')
        .pipe(cache(imagemin({
            optimizationLevel: 5,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest(projectConfig.dest + 'images'));
});

gulp.task('getGSSData', function(cb) {

    var useGSS = false,
        googleSheet,
        dataFilePath,
        gssLocalFile = 'gssData.json';

    if(projectConfig.gssKey !== ''){
        useGSS = true;
        googleSheet = new GoogleSpreadsheet(projectConfig.gssKey);

        if(projectConfig.gssLocal !== ''){
            gssLocalFile = projectConfig.gssLocal;
        }
    }

    ifElse(useGSS, getGSS);

    function getGSS(){
        dataFilePath = projectConfig.src + 'data/' + gssLocalFile;
        googleSheet.getRows( 1, function(err, data){
            fs.writeFile(dataFilePath, JSON.stringify(data, null, 4), function(err) {
                if(err) {
                  console.log("Error writing file: " + dataFilePath);
                }
            });
        });
    }

});

gulp.task('copyData', function() {
    return gulp.src(projectConfig.appData)
        .pipe(gulp.dest(projectConfig.dest + 'data/'));
});

gulp.task('copyTemplates', function() {
    return gulp.src(projectConfig.htmlTemplates)
        .pipe(gulp.dest(projectConfig.dest + 'tpl/'));
});

gulp.task('copyFonts', function() {
    return gulp.src(projectConfig.fontFiles)
        .pipe(gulp.dest(projectConfig.dest + 'fonts/'));
});


/******************************
* HTML partials and processing
******************************/
gulp.task('htmlPartials', function() {

    gulp.src(projectConfig.htmlFiles)
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(projectConfig.tmp))
        .pipe(gulp.dest(projectConfig.dest));

});

gulp.task('inlineResources', ['htmlPartials'], function() {

    gulp.src(projectConfig.htmlFiles)
        .pipe(inline({
            base: projectConfig.tmp,
            js: uglify(),
            css: minifycss()
        }))
        .pipe(gulp.dest(projectConfig.dest));

});


// inject bower components
// gulp.task('wiredep', function() {
//     var wiredep = require('wiredep').stream;

//     gulp.src('src/styles/*.scss')
//         .pipe(wiredep({
//             ignorePath: /^(\.\.\/)+/
//         }))
//         .pipe(gulp.dest('src/styles'));

//     gulp.src('src/*.html')
//         .pipe(wiredep({
//             ignorePath: /^(\.\.\/)*\.\./
//         }))
//         .pipe(gulp.dest('dist'));
// });


/******************************
* Browser Sync
******************************/
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: projectConfig.dest
        }
    });

    /* Watch for changes and reload */
    gulp.watch(projectConfig.src + "style/*.scss", ['style'], browserSync.reload);
    gulp.watch(projectConfig.src + "scripts/*.js", ['scripts'], browserSync.reload);
    gulp.watch(projectConfig.src + "**/*.html", ['processHTML'], browserSync.reload);

});




/******************************
* Tasks grouping
******************************/
gulp.task('scripts', ['lint', 'appScripts', 'vendorScripts']);
gulp.task('style', ['appStyle', 'vendorStyle']);
gulp.task('assets', ['optimizeImages', 'getGSSData', 'copyData', 'copyTemplates', 'copyFonts']);
gulp.task('processHTML', ['htmlPartials', 'inlineResources']);

gulp.task('default', ['style', 'scripts', 'assets', 'processHTML', 'serve']);

package.json

{
  "name": "app",
  "version": "0.0.9",
  "description": "Description of this app",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Developer <[email protected]>",
  "dependencies": {
    "gulp": "~3.9.0",
    "bower": "~1.4.1",
    "browser-sync": "~2.6.4",
    "del": "^1.1.1",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-postcss": "^3.0.0",
    "gulp-cache": "^0.2.8",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-file-include": "^0.9.0",
    "gulp-google-spreadsheets": "^1.2.0",
    "gulp-imagemin": "^2.2.1",
    "gulp-include": "~1.1.1",
    "gulp-inline-source": "^1.2.0",
    "gulp-jshint": "^1.10.0",
    "jshint-stylish": "^1.0.0",
    "gulp-load-plugins": "^0.10.0",
    "gulp-minify-css": "^1.0.0",
    "gulp-minify-html": "^0.1.6",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^1.3.3",
    "gulp-uglify": "^1.2.0",
    "gulp-size": "^1.1.0",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-useref": "^1.1.2",
    "gulp-util": "^3.0.4",
    "node-sass": "^2.1.1",
    "tablesaw": "~1.0.3",
    "wiredep": "^2.0.0",
    "autoprefixer-core": "~5.2.1",
    "csso": "~1.3.11",
    "google-spreadsheet": "~1.0.1",
    "fs": "0.0.2",
    "gulp-if-else": "~1.0.3",
    "gulp-inline": "0.0.11"
  },
  "devDependencies": {
    "gulp-debug": "~2.0.1"
  }
}