gulpfile.js

/**
 * Gulp file to automate the various tasks
 * */

const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const csscomb = require('gulp-csscomb');
const cleanCss = require('gulp-clean-css');
const del = require('del');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const wait = require('gulp-wait');
const sourcemaps = require('gulp-sourcemaps');

// Define paths

const paths = {
  dist: {
    base: 'dist',
    img: 'dist/img',
    libs: 'dist/vendor',
    fonts: 'dist/fonts',
    css: 'dist/css',
    js: 'dist/js',
    vendor: 'dist/vendor',
  },
  base: {
    base: './public',
    node: 'node_modules',
  },
  src: {
    base: './public',
    css: 'public/css/**/*.css',
    js: 'public/js/**/*.js',
    html: '**/*.html',
    img: 'public/img/**/*.+(png|jpg|gif|svg)',
    ejs: 'views/**/*.ejs',
    fonts: 'public/fonts/**/*.+(eot|svg|ttf|woff|woff2)',
    vendor: 'public/vendor/**/*',
    scss: 'public/scss/**/*.scss',
  },
};

// Compile SCSS for dev
function scssDev() {
  return gulp
    .src(paths.src.scss)
    .pipe(wait(500))
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([require('postcss-flexbugs-fixes')])) // eslint-disable-line
    .pipe(
      autoprefixer({
        browsers: ['> 1%'],
      })
    )
    .pipe(csscomb())
    .pipe(sourcemaps.init())
    .pipe(cleanCss())
    .pipe(sourcemaps.write())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(`${paths.src.base}/css`))
    .pipe(browserSync.stream({ match: '**/*.css' }));
}

// Compile SCSS for prod
function scssProd() {
  return gulp
    .src(paths.src.scss)
    .pipe(wait(500))
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([require('postcss-flexbugs-fixes')])) // eslint-disable-line
    .pipe(
      autoprefixer({
        browsers: ['> 1%'],
      })
    )
    .pipe(csscomb())
    .pipe(gulp.dest(`${paths.dist.base}/css`));
}

// Minify CSS
function minifyCSS() {
  return gulp
    .src([`${paths.dist.css}/argon.css`])
    .pipe(cleanCss())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(`${paths.dist.base}/css`));
}

// Minify JS
function minifyJS() {
  return gulp
    .src([`${paths.src.base}/js/argon.js`])
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(`${paths.dist.base}/js`));
}

// Live reload
function serve(done) {
  browserSync.init({
    files: ['public/**/*', 'views/**/*'],
    proxy: 'http://0.0.0.0:8000',
  });

  done();
}

// Watch for changes
function watch() {
  gulp.watch(paths.src.scss, scssDev);
  gulp.watch(paths.src.js, browserSync.reload);
  gulp.watch(paths.src.html, browserSync.reload);
  gulp.watch(paths.src.ejs, browserSync.reload);
}

// Clean
async function cleanDist(done) {
  await del.sync(paths.dist.base);
  done();
}

// Copy JS
async function copyJS(done) {
  gulp.src([`${paths.src.js}`]).pipe(gulp.dest(`${paths.dist.js}`));
  done();
}

// Copy images
async function copyImages(done) {
  gulp.src([`${paths.src.img}`]).pipe(gulp.dest(`${paths.dist.img}`));
  done();
}

// Copy fonts
async function copyFonts(done) {
  gulp.src([`${paths.src.fonts}`]).pipe(gulp.dest(`${paths.dist.fonts}`));
  done();
}

// Copy vendor
async function copyVendor(done) {
  gulp.src([`${paths.src.vendor}`]).pipe(gulp.dest(`${paths.dist.vendor}`));
  done();
}

// Build
const build = gulp.series(
  cleanDist,
  scssProd,
  copyJS,
  copyImages,
  copyFonts,
  copyVendor,
  minifyJS,
  minifyCSS
);

// Default
const defaultTask = gulp.series(scssDev, serve, watch);

module.exports = {
  scssDev,
  scssProd,
  minifyCSS,
  minifyJS,
  serve,
  watch,
  cleanDist,
  copyJS,
  copyImages,
  copyFonts,
  copyVendor,
  build,
  default: defaultTask,
};