My Gulpfile using ES6 (Babel), ReactJS, Browserify, BrowserSync, SASS, Sourcemaps, and more...

gulpfile.js

'use strict';


/* ----------------- */
/* Dependencies
/* ----------------- */

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const clean = require('gulp-clean');


/* ----------------- */
/* Settings variables
/* ----------------- */

const settings = {
  assets: './assets',
  build: './public'
}


/* ----------------- */
/* Static files
/* ----------------- */

gulp.task('bundle', ['js', 'scss', 'images', 'html', 'fonts'], () => {
  browserSync.init({
    server: {
      baseDir: settings.build
    },
    open: false,
    port: 3000,
    reloadDelay: 2400
  });

  gulp.watch(settings.assets + '/scss/**/*.scss', ['scss']);
  gulp.watch(settings.assets + '/images/*.*', ['images']);
  gulp.watch(settings.assets + '/*.html', ['html']);
  gulp.watch(settings.assets + '/**/*.js', ['js']).on('change', browserSync.reload);
  gulp.watch('./app/**/*').on('change', browserSync.reload);
});


/* ----------------- */
/* Scripts
/* ----------------- */

gulp.task('js', () => {
  return browserify({
      entries: settings.assets + '/js/app.js',
      debug: true
    })
    .transform("babelify", {
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
      presets: ['es2015', 'react'],
      sourceMapsAbsolute: true
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(settings.build));
});

gulp.task('jsmin', () => {
  return browserify({
      entries: settings.assets + '/js/app.js',
      debug: false
    })
    .transform("babelify", {
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
      presets: ['es2015', 'react'],
      sourceMapsAbsolute: false
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: false }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(settings.build));
});


/* ----------------- */
/* SASS
/* ----------------- */

gulp.task('scss', () => {
  return gulp.src(settings.assets + '/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(sourcemaps.write())
    .pipe(concat('bundle.css'))
    .pipe(gulp.dest(settings.build))
    .pipe(browserSync.stream());
});

gulp.task('css', () => {
  return gulp.src(settings.assets + '/scss/**/*.scss')
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(settings.build));
});


/* ----------------- */
/* Images
/* ----------------- */

gulp.task('images', () => {
  return gulp.src(settings.assets + '/img/*')
    .pipe(imagemin({
      progressive: true,
      use: [pngquant()]
    }))
    .pipe(gulp.dest(settings.build + '/img'));
});


/* ----------------- */
/* HTML
/* ----------------- */

gulp.task('html', () => {
  return gulp.src(settings.assets + '/index.html')
    .pipe(gulp.dest(settings.build));
});


/* ----------------- */
/* Fonts
/* ----------------- */

gulp.task('fonts', function() {
  return gulp.src(['node_modules/mdi/fonts/*.{eot,svg,ttf,woff,woff2}'])
    .pipe(gulp.dest(settings.build + '/fonts'));
});


/* ----------------- */
/* Clean
/* ----------------- */

gulp.task('clean', function () {
    return gulp.src('public', { read: false })
      .pipe(clean());
});


/* ----------------- */
/* Predefined
/* ----------------- */

gulp.task('default', ['bundle']);  // development
gulp.task('deploy', ['html', 'css', 'jsmin', 'images', 'fonts']);  // production