update bootstrap 4.3.1, update gulpfile, npm start script added, change SCSS file names for proper compiling

gulpfile.js

@@ -1,13 +1,19 @@
+"use strict";
+
 // Load plugins
 const autoprefixer = require("gulp-autoprefixer");
 const browsersync = require("browser-sync").create();
 const cleanCSS = require("gulp-clean-css");
+const del = require("del");
 const gulp = require("gulp");
 const header = require("gulp-header");
+const merge = require("merge-stream");
 const plumber = require("gulp-plumber");
 const rename = require("gulp-rename");
 const sass = require("gulp-sass");
 const uglify = require("gulp-uglify");
+
+// Load package.json for banner
 const pkg = require('./package.json');
 
 // Set the banner content
@@ -19,65 +25,69 @@ const banner = ['/*!\n',
   '\n'
 ].join('');
 
-// Copy third party libraries from /node_modules into /vendor
-gulp.task('vendor', function(cb) {
+// BrowserSync
+function browserSync(done) {
+  browsersync.init({
+    server: {
+      baseDir: "./"
+    },
+    port: 3000
+  });
+  done();
+}
 
+// BrowserSync reload
+function browserSyncReload(done) {
+  browsersync.reload();
+  done();
+}
+
+// Clean vendor
+function clean() {
+  return del(["./vendor/"]);
+}
+
+// Bring third party dependencies from node_modules into vendor directory
+function modules() {
   // Bootstrap JS
-  gulp.src([
-      './node_modules/bootstrap/dist/js/*',
-    ])
-    .pipe(gulp.dest('./vendor/bootstrap/js'))
-
+  var bootstrapJS = gulp.src('./node_modules/bootstrap/dist/js/*')
+    .pipe(gulp.dest('./vendor/bootstrap/js'));
   // Bootstrap SCSS
-  gulp.src([
-      './node_modules/bootstrap/scss/**/*',
-    ])
-    .pipe(gulp.dest('./vendor/bootstrap/scss'))
-
+  var bootstrapSCSS = gulp.src('./node_modules/bootstrap/scss/**/*')
+    .pipe(gulp.dest('./vendor/bootstrap/scss'));
   // ChartJS
-  gulp.src([
-      './node_modules/chart.js/dist/*.js'
-    ])
-    .pipe(gulp.dest('./vendor/chart.js'))
-
-  // DataTables
-  gulp.src([
+  var chartJS = gulp.src('./node_modules/chart.js/dist/*.js')
+    .pipe(gulp.dest('./vendor/chart.js'));
+  // dataTables
+  var dataTables = gulp.src([
       './node_modules/datatables.net/js/*.js',
       './node_modules/datatables.net-bs4/js/*.js',
       './node_modules/datatables.net-bs4/css/*.css'
     ])
-    .pipe(gulp.dest('./vendor/datatables/'))
-
+    .pipe(gulp.dest('./vendor/datatables'));
   // Font Awesome
-  gulp.src([
-      './node_modules/@fortawesome/**/*',
-    ])
-    .pipe(gulp.dest('./vendor'))
-
+  var fontAwesome = gulp.src('./node_modules/@fortawesome/**/*')
+    .pipe(gulp.dest('./vendor'));
+  // jQuery Easing
+  var jqueryEasing = gulp.src('./node_modules/jquery.easing/*.js')
+    .pipe(gulp.dest('./vendor/jquery-easing'));
   // jQuery
-  gulp.src([
+  var jquery = gulp.src([
       './node_modules/jquery/dist/*',
       '!./node_modules/jquery/dist/core.js'
     ])
-    .pipe(gulp.dest('./vendor/jquery'))
-
-  // jQuery Easing
-  gulp.src([
-      './node_modules/jquery.easing/*.js'
-    ])
-    .pipe(gulp.dest('./vendor/jquery-easing'))
-
-  cb();
-
-});
+    .pipe(gulp.dest('./vendor/jquery'));
+  return merge(bootstrapJS, bootstrapSCSS, chartJS, dataTables, fontAwesome, jquery, jqueryEasing);
+}
 
 // CSS task
 function css() {
   return gulp
-    .src("./scss/*.scss")
+    .src("./scss/**/*.scss")
     .pipe(plumber())
     .pipe(sass({
-      outputStyle: "expanded"
+      outputStyle: "expanded",
+      includePaths: "./node_modules",
     }))
     .on("error", sass.logError)
     .pipe(autoprefixer({
@@ -101,7 +111,7 @@ function js() {
   return gulp
     .src([
       './js/*.js',
-      '!./js/*.min.js'
+      '!./js/*.min.js',
     ])
     .pipe(uglify())
     .pipe(header(banner, {
@@ -114,34 +124,23 @@ function js() {
     .pipe(browsersync.stream());
 }
 
-// Tasks
-gulp.task("css", css);
-gulp.task("js", js);
-
-// BrowserSync
-function browserSync(done) {
-  browsersync.init({
-    server: {
-      baseDir: "./"
-    }
-  });
-  done();
-}
-
-// BrowserSync Reload
-function browserSyncReload(done) {
-  browsersync.reload();
-  done();
-}
-
 // Watch files
 function watchFiles() {
   gulp.watch("./scss/**/*", css);
-  gulp.watch(["./js/**/*.js", "!./js/*.min.js"], js);
+  gulp.watch("./js/**/*", js);
   gulp.watch("./**/*.html", browserSyncReload);
 }
 
-gulp.task("default", gulp.parallel(css, js));
+// Define complex tasks
+const vendor = gulp.series(clean, modules);
+const build = gulp.series(vendor, gulp.parallel(css, js));
+const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync));
 
-// watch
-gulp.task("dev", gulp.parallel(watchFiles, browserSync));
+// Export tasks
+exports.css = css;
+exports.js = js;
+exports.clean = clean;
+exports.vendor = vendor;
+exports.build = build;
+exports.watch = watch;
+exports.default = build;