Gulpfile for minifying JS and CSS files. It will also watch for changes and run the commands again after changes.

gulpfile.js

// gulp version 4 used for below
// Step (1 Install gulp CLI) If gulp cli is not installed then npm install --global gulp-cli
// Step (2 Install Dependencies) npm install --save-dev gulp gulp-uglify gulp-rename gulp-if gulp-clean-css gulp-concat
// Step (3 Run gulp) gulp
// gulp command will run the default exported task
// to run an individual command run gulp taskName, be sure to export the task

const { src, dest, watch } = require('gulp');
// const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const gulpif = require('gulp-if');
// var uglifycss = require('gulp-uglifycss');
var cleancss = require('gulp-clean-css');
// var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

function isJavaScript(file) {
  // Check if file extension is '.js'
  return file.extname === '.js';
}

function isStylesheet(file) {
  // Check if file extension is '.css'
  return file.extname === '.css';
}

function compressCss() {
  return src('src/**/*.css')
    .pipe(cleancss({compatibility: 'ie8'}))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('output/'));
}

function compressJavascript() {
  return src('src/**/*.js')
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

function compressAll() {
  return src(['src/**/*.js', 'src/**/*.css'])
    .pipe(gulpif(isJavaScript, uglify()))
    // .pipe(gulpif(isStylesheet, uglifycss({
    //   "maxLineLen": 80,
    //   "uglyComments": true
    // })))
    .pipe(gulpif(isStylesheet, cleancss({compatibility: 'ie8'})))
    .pipe(gulpif(isJavaScript, rename({ extname: '.min.js' })))
    .pipe(gulpif(isStylesheet, rename({ extname: '.min.css' })))
    .pipe(dest('output/'));
}

function combineJs() {
  return src('output/**/*.min.js')
    .pipe(concat('all.min.js'))
    .pipe(dest('output/'));
}

exports.default = compressAll;
// exports.compressCss = compressCss;
// exports.compressJavascript = compressJavascript;
exports.combineJs = combineJs;

// You can use a single task
// watch(['src/**/*.js', 'src/**/*.css'], compress);
watch('src/**/*.css', compressCss);
watch('src/**/*.js', compressJavascript);