berlinstudios gulpfile with browserify and babel

gulpfile.js

'use strict';
const gulp = require('gulp');
const minifycss = require('gulp-clean-css');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const browserify = require('browserify');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer');
const imageResize = require('gulp-image-resize');
const svgSymbols = require('gulp-svg-symbols');
const svgmin = require('gulp-svgmin');
const uglify = require('gulp-uglify');
const mode = require('gulp-mode')({
    modes: ["production", "development"],
    default: "development",
    verbose: false
});
const rename = require("gulp-rename");
const stylelint = require('gulp-stylelint');
const eslint = require('gulp-eslint');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const log = require('fancy-log');
const del = require('del');
const sourcemaps = require('gulp-sourcemaps');

// Import our configured Metalsmith instance
const metalsmith = require("./metalsmith.js");

/* set paths */
const destinationDir = './build',
    jsDir = './js',
    scssDir = './scss',
    svgSrcDir = './svg',
    svgDir = destinationDir + '/svg',
    imagesSrcDir = './images',
    imagesDir = destinationDir + '/img',
    iconsSrc = './icons/*.svg',
    iconsDir = './icons/sprite'
;

/**
 * Set the watch process and the browserSync defaults
 *
 */
gulp.task('watch', function() {
  browserSync.init({
    server: {
      baseDir: destinationDir
    }
  });
  gulp.watch(['./layouts/**/**/*.hbs', './layouts/**/**/*.js', './src/**/**/*.html'], gulp.series('metalsmith', 'browser-sync'));
  gulp.watch(jsDir + '/**/*.js', gulp.series('eslint', 'browserify', 'browser-sync'));
  gulp.watch(scssDir + '/**/*.scss', gulp.series('css', 'browser-sync'));
  gulp.watch(svgSrcDir + '/**/*', gulp.series('svg', 'browser-sync'));
  gulp.watch(imagesSrcDir + '/**/*', gulp.series('images', 'browser-sync'));
  gulp.watch(iconsSrc, gulp.series('icons', 'metalsmith', 'browser-sync'));
});

gulp.task('browser-sync', function(done) {
  browserSync.reload();
  done();
});

/**
 * Process Sass
 *
 */
gulp.task('css', function() {
  return gulp.src(scssDir + '/*.scss')
    .pipe(stylelint({
      failAfterError: false,
      reporters: [
        {formatter: 'string', console: true}
      ]
    }))
    .pipe(mode.development(sourcemaps.init({loadMaps: true})))
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(mode.production(minifycss()))
    .pipe(concat('style.css'))
    .pipe(mode.development(sourcemaps.write('.')))
    .pipe(gulp.dest(destinationDir));
});

/**
 * Bundle all the files you need in browserify.
 *
 * @note: This will browserify all you have listed in app.js
 * See: https://blog.revathskumar.com/2016/02/browserify-with-gulp.html
 */

gulp.task('eslint', function (done) {
    return gulp.src([
        jsDir + '/**/*.js'
    ])
        .pipe(eslint({
            fix: false, // just fixes in the stream
        }))
        .pipe(eslint.format());
    done();
});

gulp.task('browserify', function (done) {

  browserify({
    entries: jsDir + '/app.js',
    debug: true
  })
    .transform('babelify', {presets: ['@babel/preset-env']})
    .bundle()
    .on('error', err => {
      log.error("Browserify Error" + err.message)
    })
    .pipe(source('app.bundle.js'))
    .pipe(buffer())
    .pipe(mode.production(uglify()))
    .pipe(mode.development(sourcemaps.init({loadMaps: true})))
    .pipe(mode.development(sourcemaps.write('.')))
    .pipe(gulp.dest(destinationDir));
  done();
});

/**
 * Optimize and create images
 * https://gist.github.com/ryantbrown/239dfdad465ce4932c81
 *
 * following breakpoints do not same as for CSS
 *
 */

const images = [
    // { name: 'xs', width: 30 },
    // { name: 's', width: 150 },
    { name: 'm', width: 500 },
    { name: 'l', width: 800 },
    { name: 'xl', width: 1200 },
    { name: 'xxl', width: 2500 }
];

// @todo: do not create bigger images unresized, how to check if bigger images exist on metalsmith task?
gulp.task('images', function (done) {

    // loop through image groups
    images.map((type) => {
        // build the resize object
        const resize_settings = {
            width: type.width
        };

        gulp.src(imagesSrcDir + '/**/*.{jpg,png}')
            .pipe(rename(function (path) {
                path.basename += '-' + type.name;
            }))
            .pipe(newer(imagesDir))
            .pipe(imageResize(resize_settings))

            .pipe(imagemin([
                imagemin.gifsicle({ interlaced: true }),
                imagemin.jpegtran({ progressive: true }),
                imagemin.optipng({ optimizationLevel: 8 }),
            ]))
            .pipe(gulp.dest(imagesDir))
    });

    done();
});

/**
 * copy favicons stuff to build dir
 * metalsmith is ill-forming the images
 */
gulp.task('favicons', function (done) {

    gulp.src('./favicons/*')
        .pipe(gulp.dest(destinationDir));

    done()
});

/**
 * handle svg images
 *
 */
gulp.task('svg', function () {
    return gulp.src(svgSrcDir + '/**/*.svg')
        .pipe(newer(svgDir))

        .pipe(imagemin([
            imagemin.svgo({
                plugins: [
                    {
                        removeViewBox: false,
                        collapseGroups: true
                    }
                ]
            })
        ]))
        .pipe(gulp.dest(svgDir))
});

/**
 * SVG icon sprite
 *
 */
gulp.task('icons', function() {
    return gulp
        .src(iconsSrc)
        .pipe(svgmin({
            plugins: [{
                removeViewBox: false
            }]
        }))
        .pipe(svgSymbols({
            svgAttrs: {
                class: 'svg-icon-lib',
                'aria-hidden': 'true',
                'data-enabled': true,
            }
        }))
        .pipe(gulp.dest(iconsDir))
});

/**
 * Start the Metalsmith build.
 *
 */
gulp.task('metalsmith', function(done){
  metalsmith.build(function(err, files){
    if (err) throw err;
    //console.log(files);
    done();
  });
});

gulp.task('clean', function(done){
    // delete build files for cleanup
    del(['build/index.html','build/**/*','!build/img','!build/img/**/*','!build/svg','!build/svg/**/*']);

    done();
});

/**
 * The build task.
 *
 * @info: do not clean on every build. causes short 404 issue!
 * */
gulp.task('build', gulp.series(gulp.parallel('favicons', 'images', 'svg', 'icons',  'css', 'eslint', 'browserify'), 'metalsmith'));

/**
 * The dev task.
 *
 * */
gulp.task('dev', gulp.series('build', 'watch'));

/**
 * The default gulp task.
 *
 * */
gulp.task('default', gulp.series('dev'));