gulpfile.js

var browserify = require('browserify');
var gulp = require('gulp') ;
var sass = require('gulp-sass') ;
var watch = require('gulp-watch') ;
var sourcemaps = require('gulp-sourcemaps') ;
var browserSync = require('browser-sync');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var terser = require('gulp-terser');
var combiner = require('stream-combiner2');


gulp.task('watch', function () {
    gulp.watch('./src/sass/**.scss', gulp.series(['sass']));
    gulp.watch('./src/js/**.js', gulp.series(['scripts']));
});

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

    return gulp.src('./src/sass/**.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.stream()) ;

}) ;

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

    return gulp.src(['./src/js/react.js',  './src/js/react-dom.js',  './src/js/main.js' ])
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('./js'))
        .pipe(terser(
            {
                keep_fnames : true,
                mangle : false
            }
        ))
        .pipe(rename('scripts.min.js'))
        .pipe(gulp.dest('./js')) ;
});

gulp.task('serve', function() {
    browserSync({
        server : true,
        open : false
    });

    gulp.watch("./js/**").on('change', browserSync.reload);

});

gulp.task(
    'default',
    gulp.parallel(['serve', 'sass', 'scripts','watch'])
) ;