A base gulp file that with margin for improvement.

gulpfile.js

/*=====================================*\
  Trippy Build Tasks
\*=====================================*/

/*
* TODO: Optimize build process to inject HTML & Javascript with browserSync
*/

const gulp         = require('gulp');
const scss         = require('gulp-sass');
const browserSync  = require('browser-sync');
const concat       = require('gulp-concat');
const uglify       = require('gulp-uglify');
const cssnano      = require('gulp-cssnano');
const rename       = require('gulp-rename');
const del          = require('del');
const imagemin     = require('gulp-imagemin');
const pngquant     = require('imagemin-pngquant');
const cache        = require('gulp-cache');
const autoprefixer = require('gulp-autoprefixer');
const gulpif       = require('gulp-if');
const argv         = require('yargs').argv;
const browserify   = require('browserify');
const source       = require('vinyl-source-stream');
const buffer       = require('vinyl-buffer');
const sourcemaps   = require('gulp-sourcemaps');
const babel        = require('babelify');

/*
* Compile Scss
*/
gulp.task('scss', () =>{
    return gulp.src('app/scss/**/*.scss')
        .pipe(scss())
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulpif(argv.prod, cssnano()))
        .pipe(gulpif(argv.prod, rename({suffix: '.min'})))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({stream: true}))
});

/*
* Build Javascript
*/
gulp.task('js', () => {
  const bundler = browserify('app/js/app.js',{
    // entries: './js/*/**.js',
    debug: true,
  });

  bundler.transform(babel.configure({
    presets: ['env']
  }));

  bundler.bundle()
    .on('error', function(err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(gulpif(argv.prod, uglify()))
      .pipe(gulpif(argv.prod, rename({ suffix: '.min' })))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/js'));
})

/*
* Build HTML files
*/
gulp.task('html', () => {
  return gulp.src('app/*.html')
    .pipe(gulp.dest('dist/'));
})

/*
* Build the Json files
*/
gulp.task('json', () => {
  return gulp.src('app/*.json')
    .pipe(gulp.dest('dist/'));
})

/*
* Optimize Images
*/
gulp.task('img', () => {
    return gulp.src('app/img/**/*')
        .pipe(cache(imagemin({
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

/*
* I See You => Watch the project for changes
*/
gulp.task('watch', ['browser-sync','clean', 'img', 'scss', 'html', 'js', 'json'], () => {
    gulp.watch('app/scss/**/*.scss', ['scss']);
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/js/**/*.js', ['js']);
});

gulp.task('browser-sync', () => {
    browserSync({
        server: {
            baseDir: './dist'
        },
        notify: false
    });
});

gulp.task('clean', () => {
    return del.sync('dist');
});

// $ gulp clear
gulp.task('clear', () => {
    return cache.clearAll();
})

// $ gulp build
gulp.task('build', ['clean', 'img', 'html', 'scss', 'js', 'json']);

// $ gulp
gulp.task('default', ['watch']);