gulp.js

// BASE SETUP
// =============================================================================
var gulp           = require('gulp');
var fs             = require('fs');
var path           = require('path');

// CALL THE PACKAGES -----------------------------------------------------------
var browserSync    = require('browser-sync');
var autoPrefixer   = require('gulp-autoprefixer');
var bower          = require('gulp-bower');
var changed        = require('gulp-changed');
var debug          = require('gulp-debug');
var concat         = require('gulp-concat');
var gulpif         = require('gulp-if');
var jshint         = require('gulp-jshint');
var uglify         = require('gulp-uglify');
var rename         = require('gulp-rename');
var pxtorem        = require('gulp-pxtorem');
var plumber        = require('gulp-plumber');
var sass           = require('gulp-sass');
var size           = require('gulp-size');
var runSequence    = require('run-sequence');
var reload         = browserSync.reload;

// APP CONFIGURATION -----------------------------------------------------------
var pxtoremOptions = {
    replace: true
};

var AUTOPREFIXER_BROWSERS = [
    'last 2 versions'
];

// Local folders to help build paths
var srcFolder = 'fifa/static/src/';
var buildFolder = 'fifa/static/build/';
var staticFolder = srcFolder;
var templateFolder = 'fifa/templates/';

var paths = {
    bower: {
        folder: srcFolder + 'libs/'
    },
    css: {
        build: buildFolder + 'css/'
    },
    html: {
        src: [
            templateFolder + '*.html',
            templateFolder + '**/*.html'
        ]
    },
    images: {
        build: buildFolder + 'img/',
        src: staticFolder + 'img/'
    },
    js: {
        build: buildFolder + 'js/',
        src: [
            staticFolder + 'js/vendor/jquery.js',
            staticFolder + 'js/*.js',
            staticFolder + 'js/**/*.js'
        ]
    },
    root: {
        folder: 'fifa/'
    },
    sass: {
        folder: staticFolder + 'sass/',
        src: [
            staticFolder + 'sass/*.scss',
            staticFolder + 'sass/**/*.scss'
        ]
    },
    vendor: {
        folder: staticFolder + 'vendor/',
        css: staticFolder + 'css/vendor/',
        js: staticFolder + 'js/vendor/',
        sass: staticFolder + 'sass/vendor/'
    }
}

// TASKS
// =============================================================================
// TODO: MOVE THE PULLED DOWN BOWER FILES TO THEIR RELEVANT PLACE --------------


// COMPILE .SCSS ---------------------------------------------------------------
gulp.task('styles', function() {
    return gulp.src(paths.sass.src)
        .pipe(changed('styles', {extension: '.scss'}))
        .pipe(sass({
            errLogToConsole: true,
            precision: 5,
            includePaths: [
                paths.bower.folder + 'normalize-scss',
                paths.bower.folder + 'font-awesome/scss'
            ],
            stats: true
        }))
        .on('error', function(e) {
            console.log(e);
        })
        .pipe(autoPrefixer({
            browsers: AUTOPREFIXER_BROWSERS
        }))
        .pipe(pxtorem(pxtoremOptions))
        .pipe(gulp.dest(paths.css.build))
        .pipe(reload({stream: true}))
        .pipe(size({title: 'styles'}));
});

// CONCAT AND MINIFY .JS -------------------------------------------------------
gulp.task('scripts', function() {
    return gulp.src(paths.js.src)
        .pipe(plumber())
        .pipe(changed(paths.js.build, {extension: '.js'}))
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(gulp.dest(paths.js.build))
        .pipe(reload({stream: true}))
        .pipe(size({title: 'js'}));
});

// START A BROWSERSYNC SERVER AND WATCH FOR ASSET FILE CHANGES -----------------
gulp.task('serve', function() {
    browserSync({
        // Do we want the notifications in the top right when things update?
        notify: false,
        // The prefix in the console for browserSync events
        logPrefix: 'FIFA',
        // Inject the changes instead of a reload
        injectChanges: true,
        // The directory to serve HTML files from
        // server: ['./']
        // Uncomment this and comment the above line if you want to tie
        // browserSync to an already existing server
        proxy: '0.0.0.0:8000'
    });

    gulp.watch(paths.html.src, reload);
    gulp.watch(paths.images.folder + '**/*', reload);
    gulp.watch(paths.js.src, ['scripts']);
    gulp.watch(paths.sass.src, ['styles']);
});

// TODO: REMOVE // READS THE BOWER.JSON AND GETS OUR DEPENDENCIES --------------
gulp.task('bower', function() {
    return bower()
        .pipe(gulp.dest(paths.bower.folder));
});

// GETS THE ICON FONTS FROM FONT-AWESOME ---------------------------------------
gulp.task('icons', function() {
    return gulp.src(paths.bower.folder + 'font-awesome/fonts/**.*')
        .pipe(gulp.dest(buildFolder + 'fonts'))
        .pipe(gulp.dest(srcFolder + 'fonts'));
});

// DEFAULT ---------------------------------------------------------------------
gulp.task('default', function(cb) {
    runSequence('bower', 'bower-files', 'serve', cb);
});