GulpJS is "a toolkit to automate & enhance your workflow". 
With GulpJS you can combine multiple css,js files into one main smaller file for each....
Compile your style sheets, etc...

If you are in a hurry to minify stuff: https://www.minifier.org/

Here is my GulpJS - Framework builder.

This is not a Turtorial of sort, more an Example of what you can build with GulpJS.
I will show a few modules: gulp-combine.js, gulp-extend, and gulp-when. These are samples,
for how one can reuse code in other projects that will use Gulp....

Feel free to rework all of these sample files to be more simple or for your use case....
It's purpose is to compress and transform into compatible native JS code with the aid of Babel.

If your new to JavaScript sorry, goto: https://www.w3schools.com/js
If you have not seen GulpJS before goto: gulpjs.com

GulpJS is a powerful tool to watch for changes in source files like typescript, javascript or CSS files
It is great for minimizing, compiling, etc...

NOTE: npm is not as secure or newer as Deno. See: https://deno.land/
Deno is a work in progress, built on V8, Rust, and Tokio. I think its cool and hope more people will contribute code to it...

# Install node and npm
$  sudo apt update
$  sudo apt install nodejs npm

# Install Gulp JS
$  npm install --global gulp-cli

# Make your project
$  mkdir /var/www/myproject
$  cd /var/www/myproject

# Build npm package.json
$  npm init

# Add gulp to local npm package dependencies
$  npm install --save-dev gulp

# Make a git ignore file
$  nano .gitignore
node_modules/
assets/dist/
package-lock.json
nbproject/

# Make a Babel file
$  nano .babelrc
{
  "presets": [ 
      ["@babel/preset-env", { 
        "forceAllTransforms": true,
        "modules": false,
      }] 
  ],
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "spec": true,
      "loose": true
    }]
  ]
}

# A complex - Example - Gulp File
$  nano gulpfile.js
/* My Plug-Ins */
const extend = require('./gulp_deps/gulp-extend');
const when = require('./gulp_deps/gulp-when');
const combine = require('./gulp_deps/gulp-combine');
/* Terser Ugilfy Settings */
const ecma_latest = 8;
const ecma_ie = 5;
const warn_level = { warnings: true };
const compress = { compress: { dead_code: true, drop_debugger:  false, arrows: false, properties: false } };
const mangle = { mangle: false }; // { properties: { keep_quoted: true } }
const options = { module: false, keep_classnames: true, keep_fnames: true, toplevel: false, safari10: false };
const common = extend( warn_level, compress, mangle, options );
const uglify_latest_e = { ecma: ecma_latest, ie8: false };
const uglify_ie_e = { ecma: ecma_ie, ie8: true };
const uglify_latest = extend( uglify_latest_e, common );
const uglify_ie = extend( uglify_ie_e, common );
/* Gulp Add-Ons */
const { src, dest, series, parallel, watch } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-terser');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const sourcemaps = require("gulp-sourcemaps");
/* Core coolJS JS */
const coolJS_files = [ 
    'core/begin.js', 
    'core/core.js', 
    'core/addons/*.js',
    'core/end.js' 
];
const coolJS_files_polyfill_ie = [ 'core/polyfill/*.js' ];
const coolJS_files_ie = combine(coolJS_files, coolJS_files_polyfill_ie);
/* Destination Folders for JS */
const js_dest = 'assets/dist/';
const js_dest_ie = js_dest + 'ie/';
/* Use Map instead of .js.map */
const map = { mapFile: function(mapFilePath) { return mapFilePath.replace('.js.map', '.map'); } };

function coolJS() {
   return when([
     new Promise(function(resolve, reject) {    
        src( coolJS_files )
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(concat( 'coolJS.js' ))
            .pipe(dest( js_dest ))
            .pipe(rename( { extname: '.min.js' } ))
            .pipe(uglify( uglify_latest ) )
            .pipe(sourcemaps.write(".", map ))
            .pipe(dest( js_dest ))
            .on('end', resolve);
     }),
     new Promise(function(resolve, reject) {
        src( coolJS_files_ie )
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(concat( 'coolJS.js' ))
            .pipe( babel() )
            .pipe(dest( js_dest_ie ))
            .pipe(rename( { extname: '.min.js' } ))
            .pipe(uglify( uglify_ie ).on('error', console.error) )
            .pipe(sourcemaps.write(".", map ))
            .pipe(dest( js_dest_ie ))
            .on('end', resolve);
     })
   ]);  
}

function watch_js() {
  watch(coolJS_files_ie, coolJS);
}

exports.js = parallel(coolJS);
exports.all = parallel(coolJS);
//exports.css = css;
//exports.html = html;
exports.default = series( parallel(coolJS), watch_js );



# My Gulp deps
$  mkdir gulp_deps
$  nano gulp_deps/gulp-extend.js
var extend = function () {

  // Variables
  var extended = {};
  var deep = false;
  var i = 0;
  var length = arguments.length;

  // Check if a deep merge
  if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
    deep = arguments[0];
    i++;
  }

  // Merge the object into the extended object
  var merge = function (obj) {
    for (var prop in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // If deep merge and property is an object, merge properties
        if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
          extended[prop] = extend(true, extended[prop], obj[prop]);
        } else {
          extended[prop] = obj[prop];
        }
      }
    }
  };

  // Loop through each object and conduct a merge
  for (; i < length; i++) {
    var obj = arguments[i];
    merge(obj);
  }

  return extended;

};

module.exports = extend;


# gulp-when
$ nano gulp_deps/gulp-when
when = function (arrayOfPromises) {
  return new Promise(function (resolve, reject) {
    Promise.all(arrayOfPromises).then(values => {
      resolve(values);
    }).catch(errors => {
      reject(errors);
    });
  });
};

module.exports = when;


# gulp-combine
$  nano gulp_deps/gulp-combine.js
combine = function (source, dest) {

  for (var i = 0; i < source.length; i++) {
    dest.push(source[i]);
  }

  return dest;

};

module.exports = combine;


# update package.json
$  nano package.json
{
  "name": "coolJS",
  "version": "1.0.0",
  "description": "Micro JS Framwork Builder",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Robert S. (TryingToScale.com)",
  "license": "public domain",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/preset-env": "^7.7.1",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.4.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "custom-event-polyfill": "^1.0.7",
    "gulp-terser": "^1.2.0",
    "gulp-uglifyes": "^0.2.1"
  }
}


# Update the dependencies
$  npm install

# My project here will require these files to exist to be compiled:
    core/begin.js 
    core/core.js 
    core/addons/*.js
    core/end.js 
    
# Once those files have been made, Run Gulp
$  gulp

# This Advanched Gulp example will compile your JavaScript into assets/dist/coolJS.js