gulp browserify babelify babel browsersync

FINALgulpfile.babel.js

import autoprefixer from "gulp-autoprefixer";
import babelify from "babelify";
import browserify from "browserify";
import browserSync from "browser-sync";
import buffer from "vinyl-buffer";
import cleanCSS from "gulp-clean-css";
import del from "del";
import gulp from "gulp";
import rename from "gulp-rename";
import sass from "gulp-sass";
import sourcemaps from "gulp-sourcemaps";
import source from "vinyl-source-stream";
import uglify from "gulp-uglify";

const paths = {
    styles: {
        main: "static/scss/style.scss",
        src: "static/scss/**/*.scss",
        dest: "static/dist/",
    },
    scripts: {
        main: "static/js/index.js",
        src: "static/js/**/*.js",
        dest: "static/dist/",
    },
    markup: {
        src: "**/*.{html,php}",
    },
    includes: {
        node_modules: ["./node_modules"],
    },
};

const server = browserSync.create();

/*
 * For small tasks you can export arrow functions
 */
export const clean = () => del(["static/dist"]);

/*
 * You can also declare named functions and export them as tasks
 */
export function watchStyles() {
    return gulp.src(paths.styles.src)
        .pipe(sourcemaps.init())
        .pipe(sass({ includePaths: paths.includes.node_modules }))
        .pipe(sass().on("error", sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(server.stream());
}

export function buildStyles() {
    return gulp.src(paths.styles.src)
        .pipe(sass({ includePaths: paths.includes.node_modules }))
        .pipe(sass().on("error", sass.logError))
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(rename({
            basename: "style",
        }))
        .pipe(gulp.dest(paths.styles.dest));
}

export function watchScripts() {
    return browserify({
        entries: [paths.scripts.main],
        transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
    })
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(buffer())
        .pipe(sourcemaps.init({ "loadMaps": true }))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(paths.scripts.dest))
        .pipe(server.stream());
}

export function buildScripts() {
    return browserify({
        entries: [paths.scripts.main],
        transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
    })
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(buffer())
        .pipe(uglify({
            compress: {
                drop_console: true,
            },
        }))
        .pipe(gulp.dest(paths.scripts.dest));
}

export function reload(done) {
    server.reload();
    done();
}

export function serve(done) {
    server.init({
        server: {
            baseDir: "./",
        },
    });
    done();
}

export function watchFiles() {
    gulp.watch(paths.styles.src, gulp.series(watchStyles));
    gulp.watch(paths.scripts.src, gulp.series(watchScripts, reload));
    gulp.watch(paths.markup.src, reload);
}

const watch = gulp.series(clean, gulp.parallel(watchStyles, watchScripts), serve, watchFiles);

export const build = gulp.series(clean, gulp.parallel(buildStyles, buildScripts));

/*
 * Export a default task
 */
export default watch;