gulpfile.js

/**
 * Imports
 */
const {src, dest, watch, parallel} = require('gulp');
const notify = require('gulp-notify');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const nunjucks = require('gulp-nunjucks');
const color = require('gulp-color');
const nodePath = require('path');

/**
 * Configuration
 * @type {String}
 */
var cssDir = 'assets/css',
    jsDir = 'assets/js',
    htmlDir = 'sources/pages',
    sassDir = 'sources/scss',
    imgDir = 'assets/img';

/**
 * Helpers
 */

function _compile_html(path, onEnd, log=true, ret=false) {
  if(log)
    _log('[HTML] Compiling: ' + path, 'GREEN');

  let compile_html = src(path, { base: htmlDir })
  .pipe(plumber())
  .pipe(nunjucks.compile({
    version: '2.3.0',
    site_name: 'Stisla'
  },
  /**
   * Nunjucks options
   */
  {
    trimBlocks: true,
    lstripBlocks: true,
    /**
     * Nunjucks filters
     * @type {Object}
     */
    filters: {
      is_active: (str, reg, page) => {
        reg = new RegExp(reg, 'gm');
        reg = reg.exec(page);
        if(reg != null) {
          return str;
        }
      }
    }
  }))
  .on('error', console.error.bind(console))
  .on('end', () => {
    if(onEnd)
      onEnd.call(this);

    if(log)
      _log('[HTML] Finished', 'GREEN');
  })
  .pipe(dest('pages'))
  .pipe(plumber.stop());

  if(ret) return compile_html;
}

function _compile_scss(path, onEnd, log=true, ret=false) {
  if(log)
    _log('[SCSS] Compiling:' + path, 'GREEN');

  let compile_scss = src(path)
  .pipe(plumber())
  .pipe(sass({
    errorLogToConsole: true
  }))
  .on('error', console.error.bind(console))
  .on('end', () => {
    if(onEnd)
      onEnd.call(this);

    if(log)
      _log('[SCSS] Finished', 'GREEN');
  })
  .pipe(rename({
    dirname: '',
    extname: '.css'
  }))
  .pipe(postcss([autoprefixer()]))
  .pipe(dest(cssDir))
  .pipe(plumber.stop());

  if(ret) return compile_scss;
}

function _log(str, clr) {
  if(!clr) clr = 'WHITE';
  console.log(color(str, clr));
}

/**
 * End of helper
 */

/**
 * Execution
 */

function folder() {
  return src('*.*', {read: false})
  .pipe(dest('./assets'))
  .pipe(dest('./assets/css'))
  .pipe(dest('./assets/js'))
  .pipe(dest('./assets/img'));
}

function image() {
  return src(imgDir + '/**/*.*')
  .pipe(plumber())
  .pipe(imagemin([
    imageminMozjpeg({quality: 80})
  ]))
  .pipe(dest(imgDir))
  .pipe(plumber.stop());
}

function compile_scss() {
  return _compile_scss(sassDir + '/**/*.scss', null, false, true);
}

function compile_html() {
  return _compile_html(htmlDir + '/**/*.html', null, false, true);
}

function watching() {
  compile_scss();
  compile_html();

  /**
   * BrowserSync initialization
   * @type {Object}
   */
  browserSync.init({
    server:{
      baseDir: "./"
    },
    startPath: 'pages/index.html',
    port: 8080
  });

  /**
   * Watch ${htmlDir}
   */
  watch([
    htmlDir + '/**/*.html',
    sassDir + '/**/*.scss',
    jsDir + '/**/*.js',
    imgDir + '/**/*.*',
  ]).on('change', (file) => {
    file = file.replace(/\\/g, nodePath.sep);

    if(file.indexOf('.scss') > -1) {
      _compile_scss(sassDir + '/**/*.scss', () => {
        return browserSync.reload();
      });
    }

    if(file.indexOf('layouts') > -1 && file.indexOf('.html') > -1) {
      _compile_html(htmlDir + '/*.html', () => {
        return browserSync.reload();
      });
    }else if(file.indexOf('.html') > -1) {
      _compile_html(file, () => {
        return browserSync.reload();
      });
    }

    if(file.indexOf(jsDir) > -1 || file.indexOf(imgDir) > -1) {
      return browserSync.reload();
    }
  });
}

// Create folder first
exports.folder = folder;

// Minify images
exports.image = image;

// Compile SCSS
exports.scss = compile_scss;

// Compile HTML
exports.html = compile_html;

// Dist
exports.dist = parallel(folder, compile_scss, compile_html);

// Run this command for dev.
exports.default = watching;