Sample gulpfile

gulpfile.js

/*
Key parts of gulpfile.js
---------------------------------------------------

This is a gulpfile that I've gradually improved on over time.

Can be run from the terminal (or as part of CI build).

`gulp watch` runs a browserSyn session with non minified, sourcemapped CSS and js
`gulp build` simply generates the built CSS and js
add `--production` to either of the above to generate production ready code - all minified, no sourcemaps.

Every time there is a change, `$.rev()` generates a new CSS and JS file with a new, unique filename, and updates
the rev-manifest.json file with a reference to it. That way when it comes to deploying we don't have to worry about
old, cached files being referenced.

I use a PHP helper like this to output the correct reference:

// Usage
$this->Content->assetPath('css', 'style.css')

public function assetPath($type, $filename) {
    $manifest_path = $_SERVER['DOCUMENT_ROOT'] . '/' . $type .'/rev-manifest.json';

    if (file_exists($manifest_path)) {
        $manifest = json_decode(file_get_contents($manifest_path), TRUE);
    } else {
        $manifest = [];
    }

    if (array_key_exists($filename, $manifest)) {
        return $manifest[$filename];
    }

    return $filename;
}
*/

require('es6-promise').polyfill();

var gulp        = require("gulp"),
    argv        = require('yargs').argv,
    $           = require('gulp-load-plugins')(),
    del         = require('del'),
    revDel      = require('rev-del'),
    ifElse      = require('gulp-if-else'),
    browserSync = require("browser-sync").create();

var conf = {
    src: {
        stylesVendor: [],
        styles:       [
            './scss/style.scss',
            './scss/admin.scss'
        ],
        scriptsVendor: [],
        scripts: [
            './node_modules/babel-polyfill/dist/polyfill.js',

            './node_modules/jquery/dist/jquery.min.js',
            './node_modules/js-cookie/src/js.cookie.js',

            './node_modules/bootstrap/js/dist/util.js',
            './node_modules/bootstrap/js/dist/collapse.js',

            './js-src/components/debounce.js',
            './js-src/components/basket.js',
            './js-src/components/lazyload.js',
            './js-src/components/checkout.js',
            './js-src/components/payment.js',
            './js-src/scripts.js',
        ],
    },
    dest: {
        root:          './',
        stylesVendor:  './scss/_vendor',
        styles:        './css',
        scriptsVendor: './js/_vendor',
        scripts:       './js',
    },
    watch: {
        styles: ['./scss/style.scss', './scss/**/*.scss'],
        scripts: ['./js-src/scripts.js', './js-src/**/*.js'],
    },
    production: argv.production
};

/**
 * Error handling
 */
onError = function (err) {
    console.log(err);
    this.emit('end');
};

/**
 * Clear out /library directory
 */
gulp.task('clean', function() {
    return del([
        conf.dest.styles + '/**/*',
        conf.dest.scripts + '/**/*',
    ]);
});

gulp.task('stylesVendor', ['lintCss'], function () {
    return gulp.src(conf.src.stylesVendor)
        .pipe($.rename({
            prefix: "_",
            extname: ".scss"
        }))
        .pipe(gulp.dest(conf.dest.stylesVendor));
});

// Documentation https://stylelint.io/user-guide/configuration/
// https://stylelint.io/user-guide/example-config/
// settings file .stylelintrc
gulp.task('lintCss', function () {
    return gulp.src(['./scss/_base/*.scss', './scss/_components/*.scss', './scss/_pages/*.scss', './scss/_partials/*.scss'])
        .pipe(ifElse(!conf.production,
            function () {
                return $.stylelint({
                    reporters: [
                        {formatter: 'string', console: true},
                    ]
                })
            }
        ));
});

/**
 * Compile with gulp-ruby-sass + source maps
 */
gulp.task('style', ['stylesVendor'], function () {
    return $.rubySass(conf.src.styles, {
            style: ifElse(conf.production, function () { return 'compressed'; }, function () { return 'expanded'; } ),
            sourcemap: ifElse(conf.production, function () { return false; }, function () { return true; } )
        })
        .pipe($.autoprefixer({
            browsers: ['ie > 10', '> 0.5%'],
            grid: 'autoplace',
            cascade: false
        }))
        .on('error', $.rubySass.logError)
        .pipe(ifElse(!conf.production,
            function () {
                return $.sourcemaps.write();
            }
        ))
        .pipe($.rev())
        .pipe(gulp.dest(conf.dest.styles))
        .pipe($.rev.manifest())
        .pipe(revDel({ dest: conf.dest.styles }))
        .pipe(gulp.dest(conf.dest.styles))
        .pipe($.notify('✅ Styles built'))
        .pipe(browserSync.stream());
});

/**
 * Copy any script dependancies into /scripts/_vendor directory
 */
gulp.task('vendorscript', function () {
    return gulp.src(conf.src.scriptsVendor)
        .pipe($.notify('✅ Vendor scripts copied'))
        .pipe(gulp.dest(conf.dest.scriptsVendor));
});

/**
 * JavaScript files including all vendors and main.js
 */
gulp.task('script', ['vendorscript'], function() {
    return gulp.src(conf.src.scripts)
        .pipe($.concat('scripts.js'))
        .pipe(ifElse(conf.production,
            function () { return $.babel({presets: ['es2015']}); }
        ))
        .pipe(ifElse(conf.production,
            function () { return $.stripDebug(); }
        ))
        .pipe(ifElse(conf.production,
            function () { return $.uglify(); }
        ))
        .on('error', $.util.log)
        .pipe($.rev())
        .pipe(gulp.dest(conf.dest.scripts))
        .pipe($.rev.manifest())
        .pipe(revDel({ dest: conf.dest.scripts }))
        .pipe(gulp.dest(conf.dest.scripts))
        .pipe($.notify('✅ Scripts built'))
        .pipe(browserSync.stream());
});

/**
 * Static Server + watching scss/html files
 */
gulp.task('build', ['style', 'script']);
gulp.task('watch', ['build'], function() {
    browserSync.init({
        proxy: 'website.test'
    });

    gulp.watch(conf.watch.scripts, ['script']);
    gulp.watch(conf.watch.styles, ['style']);
});