gulp 4 gulpfile w/babel!

gulpfile.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import {exec} from 'child_process';
import browserSync from 'browser-sync';
import webpack from 'webpack';
import webpackStream from 'webpack-stream';
import webpackConfig from './webpack.config.babel.js'

const plugins = gulpLoadPlugins();

const loc = 'node_modules/';
const reload = browserSync.reload;

const appsPath = 'project_root';
const staticPath = `${appsPath}/static`;
const destPath = `${staticPath}/public`;

/* Line command to clean .tmp caches */
export const cleanCache = () => gulp
    .src([
        `${destPath}/.tmp/jscache/*`,
        `${destPath}/.tmp/csscache/*`
    ])
    .pipe(plugins.clean());

/* Copy font-awesome webfonts to static location */
export const fonts = () => gulp
    .src([
        `${staticPath}/lib/materialize-css/dist/fonts/**`,
        `${staticPath}/fonts/Symbola.ttf`
    ])
    .pipe(gulp.dest(`${destPath}/fonts/`));


/* The Sass data is concatenated and minified then outputed. */
export const scss = () => gulp
    .src(`${staticPath}/sass/*.scss`)
    .pipe(plugins.sass())
    .pipe(plugins.concat('main.min.css'))
    .pipe(gulp.dest(`${destPath}/css`))
    .pipe(browserSync.stream());


/* Compiles Vendor Css Files.
 * CSS is concatenated and minified.
 * A cache file is create.
 * Minified CSS is outputed. */
export const vendorCss = () => {
    let cssFsCache = plugins.fsCache(`${staticPath}/.tmp/csscache`);
    return gulp
        .src([
            `${staticPath}/lib/materialize-css/sass/materialize.scss`
        ])
        .pipe(plugins.concat('vendor.min.css'))
        .pipe(plugins.sass())
        .pipe(cssFsCache)
        .pipe(plugins.cleanCss())
        .pipe(cssFsCache.restore)
        .pipe(gulp.dest(`${destPath}/css`))
        .pipe(browserSync.stream());
};

/* Compiles JavaScript.
 * JS is concatenated and minified.
 * A cache file is create.
 * Minified JS is outputed. */
export const vendorScripts = () => {
    let jsFsCache = plugins.fsCache(`${staticPath}/.tmp/jscache`);
    return gulp
        .src([
            `${loc}jquery/dist/jquery.js`,
            `${loc}jquery.formset/src/jquery.formset.js`,
            `${staticPath}/lib/materialize-css/dist/js/materialize.js`,
            `${loc}iframe-resizer/js/iframeResizer.contentWindow.js`
        ])
        .pipe(plugins.debug())
        .pipe(plugins.sourcemaps.init({largeFile: true}))
        .pipe(plugins.concat('vendor.min.js'))
        .pipe(jsFsCache)
        .pipe(plugins.uglify({
            mangle: false,
            compress: false
        }))
        .pipe(jsFsCache.restore)
        .pipe(plugins.sourcemaps.write())
        .pipe(gulp.dest(`${destPath}/js`))
        .pipe(browserSync.stream());
};


export const scripts = () => gulp
    .src([
        `${staticPath}/js/**/*.js`
    ])
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(plugins.concat('scripts.min.js'))
    .pipe(gulp.dest(`${destPath}/js`))
    .pipe(browserSync.stream());


export const watch = done => {
    /* Trigger a reload on any Django template change */
    let templateWatcher = gulp.watch(`${appsPath}/templates/**`);
    templateWatcher.on('change', (event, path, stats) => {
        reload();
    });

    /* Trigger a SCSS injection (no reload) on a scss file change */
    gulp.watch(`${staticPath}/sass/*.scss`, gulp.parallel(scss));

    /* Trigger a reaload on a js file change */
    let scriptsWatcher = gulp.watch(`${staticPath}/js/**/*.js`, gulp.parallel('scripts'));
    scriptsWatcher.on('change', (event, path, stats) => {
        reload();
    });
    done();
};


/* Main development server command
 * Runs other gulp tasks to minify CSS and JS files.
 * Moves font-awesome webfonts files to static.
 * Runs the Watch task.
 * BrowserSync loads hot-reload. */
gulp.task('start-dev', gulp.series(
    cleanCache,
    gulp.parallel(scss, vendorCss, vendorScripts, scripts, fonts, watch),
    () => {
        browserSync.init(null, {
            proxy: "localhost:5000",
            port: 8080,
            reloadDelay: 1000,
            reloadDebounce: 2000,
            reloadOnRestart: true,
            open: false
        });
    }
));

export const build = () => gulp.parallel(scss, fonts, vendorCss, vendorScripts, scripts);