Boilerplate to setup project with support of Bootstrap 4, ES6 and Live Reload using Gulp

gulpfile.js

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync').create();
const htmlmin = require('gulp-htmlmin');
const inject = require('gulp-inject');
const minifyJS 	= require("gulp-uglify");
const postcss = require('gulp-postcss');
const pxtorem = require('postcss-pxtorem');
const cssnano = require('cssnano');


const jsstream = gulp.task('js', () =>
    gulp.src('app/assets/js/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('bundle.js'))
        .pipe(minifyJS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/js'))
        .pipe(browserSync.stream())
);

const sassStream = gulp.task('sass',['js'], ()=> {
  const postCssPlugins = [
	autoprefixer({browsers: ['last 1 version']}),
	cssnano(),
    pxtorem({
        replace: false
    })
  ];

  return gulp.src('app/assets/scss/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(postcss(postCssPlugins))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build/css'))
      .pipe(browserSync.stream())
});

gulp.task('html',['sass'],()=>{
  return gulp.src('app/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('build'));
});

gulp.task('inject',['html'], ()=> {
  const target = gulp.src('./build/index.html');
  const sources = gulp.src(['./build/**/*.js', './build/**/*.css'], {read: false});

  return target.pipe(inject(sources, {relative: true}))
    .pipe(gulp.dest('./build'));
});



gulp.task('serve',['inject'], ()=>{
    browserSync.init({
        server: {
            baseDir: "./build"
        }
    });

    gulp.watch("app/assets/scss/**/*.scss", ['sass']);
    gulp.watch("app/assets/js/**/*.js", ['js']);
    gulp.watch("app/**/*.html",['inject']);
    gulp.watch("build/index.html").on('change', browserSync.reload);
});


gulp.task('default', ['serve']);

package.json

{
  "name": "Project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ronit Mukherjee",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "autoprefixer": "^9.1.5",
    "browser-sync": "^2.24.7",
    "cssnano": "^4.1.3",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-inject": "^4.3.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "postcss-pxtorem": "^4.0.1"
  },
  "dependencies": {
    "bootstrap": "^4.1.3"
  }
}