gulpfile.js

'use strict';

const gulp = require("gulp");
const sass = require('gulp-sass');
// const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const livereload = require('gulp-livereload');
const export_sass = require('node-sass-export');
const sassGlob = require('gulp-sass-glob');
const postcss = require('gulp-postcss');
const base_64 = require('postcss-inline-base64');
const minify = require("gulp-minify");
const gulpBrotli = require('gulp-brotli');
const zlib = require('zlib');
const gulpif = require('gulp-if');

let dev = false;

let theme_scss_opt = {
  src: 'web/themes/yat/scss/**/*.scss',
  dest: 'web/themes/yat/css',
  export: 'web/themes/yat',
  sp_convert: (sp) => '../' + sp.replace(/.*\./, '') + '/' + sp
};

let custom_scss_opt = {
  src: 'web/modules/custom/**/*.scss',
  dest: 'web/modules/custom',
  sp_convert: (sp) => sp.replace(/.*\//, '')
};

const catch_error = (err) => {
  console.log(err.toString());
  this.emit('end');
};

function build_scss(opt) {
  return gulp
    .src(opt.src)
    .pipe(gulpif(dev, sourcemaps.init()))
    .pipe(sassGlob())
    .pipe(sass(
      {
        outputStyle: dev ? '' : 'compressed',
        functions: export_sass(opt.export)
      }
    ))
    .on('error', catch_error)
    .pipe(postcss([
      base_64({useCache: false}),
      // autoprefixer({browsers: ['last 2 versions'], cascade: false}),
    ]))
    .pipe(gulpif(dev, sourcemaps.mapSources(opt.sp_convert)))
    .pipe(gulpif(dev, sourcemaps.write('')))
    .pipe(gulp.dest(opt.dest))
    .pipe(gulpif(dev, livereload()))
}

function compress_css(fold) {
  return gulp
    .src(`${fold}/**/*.css`)
    .pipe(gulpBrotli({
      params: {
        [zlib.constants.BROTLI_PARAM_QUALITY]: zlib.constants.BROTLI_MAX_QUALITY,
      },
    }))
    .pipe(gulp.dest(fold))
}

function compress_js_folder(fold) {
  return gulp
    .src([`${fold}/**/*.js`, `!${fold}/**/*.min.js`])
    .pipe(minify({
      ext: {
        min: '.min.js'
      },
      noSource: true
    }))
    .pipe(gulp.dest(fold))
    .pipe(gulpBrotli({
      params: {
        [zlib.constants.BROTLI_PARAM_QUALITY]: zlib.constants.BROTLI_MAX_QUALITY,
      },
    }))
    .on('error', catch_error)
    .pipe(gulp.dest(fold))
}

function watch() {
  livereload.listen();
  dev = true;
  build_scss(theme_scss_opt);
  build_scss(custom_scss_opt);
  gulp.watch(theme_scss_opt.src, gulp.series(() => build_scss(theme_scss_opt)));
  gulp.watch(custom_scss_opt.src, gulp.series(() => build_scss(custom_scss_opt)));
}

exports.theme_scss = build_scss;

exports.default = exports.build_custom = gulp.series(
  () => build_scss(theme_scss_opt),
  () => build_scss(custom_scss_opt),
  () => compress_css(theme_scss_opt.dest),
  () => compress_css(custom_scss_opt.dest),
  () => compress_js_folder('web/modules/custom'),
  () => compress_js_folder('web/libraries/lighterhtml'),
  () => compress_js_folder('web/modules/contrib/active_form'),
);

exports.watch = watch;