gulpfile.js

'use strict';

// ----------------------------------------------------------------------------
// Base Paths
// ----------------------------------------------------------------------------

var config = {
    projectName: 'Proj',
    browserSync: true,
    basePath: {
        src: './src/assets/',
        dev: './dev/assets/',
        url: ''
    }
}

// ----------------------------------------------------------------------------
// Load Packages
// ----------------------------------------------------------------------------

// Node
// var request = require("request");

// General
var gulp = require('gulp'),
    util = require('gulp-util'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');

// Styles
var sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    cssnano = require('gulp-cssnano'),
    cmq = require('gulp-combine-mq');
    //uncss = require('gulp-uncss');

// Javascript
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Images
var imagemin = require('gulp-imagemin');
var svgsprite = require('gulp-svg-sprite');

// Browser Sync
var browserSync = require('browser-sync').create( config.projectName );


// ----------------------------------------------------------------------------
// Task Configuration
// ----------------------------------------------------------------------------

//
// SASS Compiler, Source Maps, Autoprefixer, Minifer
//
gulp.task('styles', function() {
    return gulp.src(config.basePath.src + 'scss/{,*/}/*.scss')
        .pipe(plumber(function(error) {
            util.log(util.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 10', 'and_chr >= 2.3'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))
        .pipe( gulp.dest( config.basePath.dev + 'css/' ) )
        .pipe( browserSync.stream({match: "**/*.css"}) );
});

gulp.task('styles:min', function(){
    return gulp.src([
            config.basePath.dev + 'css/*.css',
            '!' + config.basePath.dev + 'css/*.min.css'
        ])
        .pipe(plumber(function(error) {
            util.log(util.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cmq({
            beautify: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest(config.basePath.dev + 'css/'));
        .pipe( browserSync.stream({match: "**/*.css"}) );
});

// gulp.task('styles:uncss', function() {
//     return gulp.src(config.basePath.dev + 'css/*.css')
//         .pipe(plumber(function(error) {
//             util.log(util.colors.red(error.message));
//             this.emit('end');
//         }))
//         .pipe(rename({
//             suffix: '.min'
//         }))
//         .pipe(uncss({
//             html: request({
//                 url: config.basePath.url,
//                 json: true
//             }, function(error, response, body) {
//
//                 if (!error && response.statusCode === 200) {
//                     console.log(body) // Print the json response
//                 } else {
//
//                 }
//             })
//         }))
//         .pipe(cssnano())
//         .pipe(gulp.dest(config.basePath.dev + 'css/'));
// });

//
// Concatenation & Uglify Javascript
//
gulp.task('scripts:js', function() {
    return gulp.src([
            config.basePath.src + 'js/*.js'
        ])
        .pipe(plumber())
        .pipe(concat('global.js'))
        .pipe(gulp.dest(config.basePath.dev + 'js/'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest(config.basePath.dev + '/js'))
        .pipe( browserSync.stream({match: "**/*.js"}) );
});

//
// Concatenation & Uglify Foundation Javascript
//
gulp.task('scripts:foundation', function() {
    return gulp.src([
        // Foundation core - needed if you want to use any of the components below
        config.basePath.src + 'vendor/foundation-sites/js/foundation.core.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.util.*.js',

        // Pick the components you need in your project
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.abide.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.accordion.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.accordionMenu.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.drilldown.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.dropdown.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.dropdownMenu.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.equalizer.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.interchange.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.magellan.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.offcanvas.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.orbit.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.responsiveMenu.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.responsiveToggle.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.reveal.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.slider.js',
        config.basePath.src + 'vendor/foundation-sites/js/foundation.sticky.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.tabs.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.toggler.js',
        //   config.basePath.src + 'vendor/foundation-sites/js/foundation.tooltip.js',
        ])
        .pipe(concat('foundation.js'))
        .pipe(gulp.dest(config.basePath.dev + '/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest(config.basePath.dev + '/js'));
});

gulp.task('scripts', function() {
    gulp.start('scripts:js', 'scripts:foundation');
});

//
// Image Compression
//

gulp.task('images', function() {
    return gulp.src([
            config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}',
            '!' + config.basePath.src + 'img/{icons/,icons/**}' // Negated Folder
        ])
        .pipe(plumber({
            handleError: function(err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(imagemin({
            optimizationLevel: 4,
            multipass: true
        }))
        .pipe(gulp.dest(config.basePath.dev + 'images/'));
});

//
// SVG Icons
//
gulp.task('sprites', function() {
    return gulp.src(
            config.basePath.src + 'img/icons/*.svg'
        )
        .pipe(plumber({
            handleError: function(err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(svgsprite({
            log: 'info',
            shape: {
                id: {
                    whitespace: '-'
                },
                dimension: {
                    precision: 0,
                    attributes: true
                },
                transform: [{
                    svgo: {
                        plugins : [
                            {transformsWithOnePath: {
                                floatPrecision: 0,
                            }},
                            {collapseGroups: true},
                            {sortAttrs: true},
                            {cleanupIDs: true},
                            {removeTitle: false},
                            {convertPathData: true},
                            {cleanupNumericValues: {
                                floatPrecision: 0,
                            }},
                        ]
                    }
                }]
            },
            svg: {
                xmlDeclaration: false,
                doctypeDeclaration: false,
                precision: 1,
            },
            mode: {
                css: {
                    dest: './',
                    bust: false,
                    prefix: '.icon-%s',
                    sprite: '../img/sprite.svg',
                    dimensions: true,
                    render: {
                        scss: {
                            dest:  '../scss/_sprite.scss'
                        }
                    }
                }
            }
        }))
        .pipe(gulp.dest(config.basePath.src + 'img/'));

        gulp.start('styles');
});


//
// Default Build
//
gulp.task('default', function() {
    gulp.start('styles', 'scripts', 'images');
});

//
// Watch
//
gulp.task('watch', function() {

    if (config.browserSync == true ) {
        browserSync.init({
            injectChanges: true,
            proxy: 'localhost'
        });
    } else {
        util.log(util.colors.yellow('Browser Sync Disabled') );
    }

    // Watch .scss files
    gulp.watch(config.basePath.src + 'scss/{,*/}*.scss', ['styles']);

    // Watch js files
    gulp.watch(config.basePath.src + 'js/*.js', ['scripts:js']);
    gulp.watch(config.basePath.src + 'vendor/foundation-sites/js/*.js', ['scripts:foundation']);

    // Images
    gulp.watch(config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}', ['images']);
    gulp.watch(config.basePath.src + 'img/icons/*.svg', ['sprites']);

    // sprites
    // PHP Files
    gulp.watch(config.basePath.dev + '../{,*/}*.php').on('change', browserSync.reload);
});