Gulp 4 Setup

gulpfile.js

/*jslint node: true */

'use strict';

// ============================================================================
// Config
// ============================================================================

var config = {
    projectName: 'Project',
    browserSync: true,
    basePath: {
        src: 'assets/',
        dev: '../dev/wp-content/themes/project/assets/',
        theme: '../dev/wp-content/themes/project/{,*/}*.php',
        url: '',
        proxy: '192.168.0.110'
    }
};

// ============================================================================
// Load Packages
// ============================================================================

console.time("Loaded Plugins"); // Start Measuring

// General
var gulp = require('gulp'),
    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 );

console.timeEnd("Loaded Plugins"); // Stop Measuring

// ============================================================================
// Task Configuration
// ============================================================================

// --------------------------------------------------------
// Styles
// --------------------------------------------------------

//
// SASS Compiler, Source Maps, Autoprefixer
//

function compileSCSS() {
    return gulp.src(config.basePath.src + 'scss/{,*/}/*.scss')
        .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"}) );
}

//
//  Minifier
//

function minifyCSS() {
    return gulp.src([
            config.basePath.dev + 'css/*.css',
            '!' + config.basePath.dev + 'css/*.min.css'
        ])
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cmq({
            beautify: false
        }))
        .pipe(cssnano())
        .pipe(gulp.dest(config.basePath.dev + 'css/'))
        .pipe(browserSync.stream({
            match: "**/*.css"
        }));
}

//
//  UnCSS
//
// 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/'));
// });


// --------------------------------------------------------
// Javascript
// --------------------------------------------------------

//
// Concatenation & Uglify Javascript
//
function concatJS() {
    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
//
function foundationJS() {
    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'));
}

// --------------------------------------------------------
// Images
// --------------------------------------------------------

//
// Image Compression
//
function compressImages() {
    return gulp.src([
            config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}',
            '!' + config.basePath.src + 'img/icons/*', // Negated Folder
        ])
        .pipe(imagemin({
            optimizationLevel: 4,
            multipass: true
        }))
        .pipe(gulp.dest(config.basePath.dev + 'img/'));
}

//
// SVG Sprites
//
function createSprite() {
    return gulp.src(
            config.basePath.src + 'img/icons/*.svg'
        )
        .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/'));
}

// --------------------------------------------------------
// Watch
// --------------------------------------------------------

function watch() {

    if (config.browserSync === true ) {
        browserSync.init({
            files: [config.basePath.theme],
            injectChanges: true,
            proxy: config.basePath.proxy,
            snippetOptions: {
               ignorePaths: ["/wp-admin/**", "/wp-login.php", "/manage/", "/gestion/"]
            },
        });
    } else {
        console.log('Browser Sync Disabled');
    }

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

    // Watch js files
    gulp.watch(config.basePath.src + 'js/*.js', concatJS );
    gulp.watch(config.basePath.src + 'vendor/foundation-sites/js/*.js', foundationJS );

    // Images
    gulp.watch([
        config.basePath.src + 'img/{,*/}*.{png,jpg,gif,svg}',
        '!' + config.basePath.src + 'img/icons/*'
    ], compressImages );
    gulp.watch(config.basePath.src + 'img/icons/*.svg', gulp.series(createSprite, compileSCSS) );

    //    console.log('Watching files...');
}

// ============================================================================
// Task Registration
// ============================================================================

gulp.task(compileSCSS);
gulp.task(minifyCSS);
gulp.task(concatJS);
gulp.task(foundationJS);
gulp.task('js', gulp.parallel(concatJS, foundationJS));
gulp.task(compressImages);
gulp.task(createSprite);
gulp.task('images', gulp.series(createSprite, compressImages, compileSCSS));
gulp.task('default', watch);
gulp.task(watch);