Gulp4 : pug + l11n + scss + babel + react + + express

gulpfile.js

const gulp = require('gulp')
const batch = require('gulp-batch')
const plumber = require('gulp-plumber')
const notify = require('gulp-notify')
const gutil = require('gulp-util')
const source = require('vinyl-source-stream')
const buffer = require('vinyl-buffer')
const pug = require('gulp-pug')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const minifyCSS = require('gulp-csso')
const sourcemaps = require('gulp-sourcemaps')
const babel = require('gulp-babel')
const browserify = require('browserify')
const babelify = require('babelify')
const uglify = require('gulp-uglify')
const browserSync = require('browser-sync').create()
const gls = require('gulp-live-server');
const fs = require('fs');


const locals = {}
const local = gutil.env.lang ? gutil.env.lang : 'fr_FR'

gulp.task('locals', function(done) {
  fs.readFile(`./app/templates/locals/${local}.json`, 'utf8', function (err, data) {  
    if (err) throw err;
    locals[local] = JSON.parse(data);
    done()
  })
})

gulp.task('pug', gulp.series('locals', function(){
  return gulp.src('app/templates/page/*.pug')
    .pipe(plumber({errorHandler: notify.onError({
        message: "<%= error.message %>",
        title: "Template compilation"
      })}))
    .pipe(pug({
      basedir: '.',
      locals: locals[local]
    }))
    .pipe(gulp.dest(`dist/${local}/.`))
    .pipe(browserSync.stream())
}))

gulp.task('scss', function(){
  return gulp.src('app/scss/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError({
        message: "<%= error.message %>",
        title: "CSS preprocessing"
      })}))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(postcss([autoprefixer({browsers: ['last 3 version']})]))
    .pipe(minifyCSS())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(`./dist/${local}/css`))
    .pipe(browserSync.stream({match: '**/*.css'}))
})

gulp.task('js', () => {
  return browserify({
    entries: './app/js/main.js',
    debug: true
  })
    .transform(babelify.configure({presets: [
      ["env", {
        "targets": { "ie": 9 }
      }],
      "react"
    ], sourceMapsAbsolute: true}))
    .on('error', notify.onError({
        message: "<%= error.message %>",
        title: "Babelify JS"
      }))
    .bundle()
    .on('error', notify.onError({
        message: "<%= error.message %>",
        title: "JS compilation"
      }))
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    // .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(`dist/${local}/js`))
    .pipe(browserSync.stream())
})

gulp.task('image', function() {
  return gulp.src('./app/img/**')
    .pipe(gulp.dest(`dist/${local}/img`))
})

gulp.task('serve', function() {

    browserSync.init({
      server: {
        baseDir: `dist/${local}`
      },
      open: false,
    })

    const server = gls('./server/app.js', 'static', false);

    let watcher = {
      scss : gulp.watch('app/scss/**/*.scss'),
      js : gulp.watch('app/js/**/*.js'),
      pug : gulp.watch('app/templates/**/*.pug'),
      locals : gulp.watch('app/templates/locals/*.json'),
      img : gulp.watch('app/img/**/*'),
      server : gulp.watch('server/**/*.js'),
    }

    watcher.scss.on('all', gulp.parallel('scss'))
    watcher.js.on('all', gulp.parallel('js'))
    watcher.pug.on('all', gulp.parallel('pug'))
    watcher.locals.on('all', gulp.parallel('pug'))
    watcher.img.on('all', gulp.series('image', browserSync.reload))
    watcher.server.on('all', gulp.parallel(function() {
      return server.start.bind(server)().then(null, null, browserSync.reload)
    }))

    gulp.parallel('scss')

    return server.start();
})

gulp.task('build', gulp.parallel('image', 'pug', 'scss', 'js'))
gulp.task('default', gulp.parallel('serve', 'build'))

package.json

{
  "main": "server/app.js",
  "devDependencies": {
    "autoprefixer": "^6.7.3",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.6",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-babel": "^6.1.2",
    "gulp-batch": "^1.0.5",
    "gulp-browserify": "^0.5.1",
    "gulp-csso": "^2.0.0",
    "gulp-live-server": "^0.0.30",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.3.0",
    "gulp-pug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "uglify": "^0.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "express": "^4.15.3",
    "node-fetch": "^1.7.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "request-promise": "^4.2.1"
  }
}