The best Gulpfile for using React (JSX) and Sass with an Express Server.

file-structure.txt

src/
┣╸server/
┃ ┗╸index.js
┣╸client/
┃ ┣╸public/
┃ ┃ ┣╸styles/
┃ ┃ ┃ ┗╸ *.scss
┃ ┃ ┗╸js/
┃ ┃   ┣╸components/
┃ ┃   ┃ ┗╸*.js
┃ ┃   ┗╸*.js
┃ ┗╸views/
┃   ┗╸*.html
┗╸build/
  ┣╸css/
  ┃ ┣╸bundle.css
  ┃ ┗╸bundle.map.css
  ┣╸js/
  ┃ ┣╸*.js
  ┃ ┗╸*.map.js
  ┗╸*.html

gulpfile.js

const gulp = require('gulp');
const log = require('gulplog');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');

const babel = require('gulp-babel');
const babelify = require('babelify');
const shim = require('browserify-shim');
const browserify = require('browserify');
const buffer = require('vinyl-buffer');
const rollup = require('gulp-rollup');
const uglify = require('gulp-uglify');
const tap = require('gulp-tap');

function generateJavascript() {
  return gulp.src('client/**/*.js')
    .pipe(tap((file) => {
    log.info('[JS] Bundling File:', file.path.replace(process.cwd(), ''));
    file.contents = browserify(file.path, {
      debug: true,
        transform: [
          babelify,
          [shim, { global: true }]
        ]
      }).bundle();
		}))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(uglify())
    .pipe(rollup({
      // Add entrypoints here
      input: ['./client/public/js/index.js'],
      output: {
        format: 'iife'
      }
    }))
    .pipe(rename({
      dirname: ''
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/js'));
};

const postcss = require('gulp-postcss');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

function generateCSS() {
  return gulp.src('client/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([
      autoprefixer(),
      cssnano()
    ]))
    .pipe(concat('bundle.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/css'));
};

const htmlmin = require('gulp-htmlmin');

function generateHTML() {
  return gulp.src('client/views/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('build'));
}

const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache');

function generateImages() {
  return gulp.src('client/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin({
      interlaced: true
    })))
    .pipe(gulp.dest('build/images'))
}

const del = require('del');

function clean () {
  return new Promise(function(resolve, reject) {
    del.sync('build');
    resolve();
  });
}

exports.js = generateJavascript;
exports.css = generateCSS;
exports.html = generateHTML;
exports.images = generateImages;
exports.clean = clean;

exports.default = gulp.series(clean, gulp.parallel(generateJavascript, generateCSS, generateHTML, generateImages));