first

gulpfile.js/private-tasks/backup--chunk-scripts.js

@@ -0,0 +1,15 @@
+const { src, dest } = require('gulp');
+const rename = require('gulp-rename');
+
+const { filesChunkJs, outputChunkScripts } = require('../config/directories');
+const { backup } = require('../config/rename');
+
+function backupChunkScripts() {
+  return src(filesChunkJs)
+    .pipe(rename(backup))
+    .pipe(dest(outputChunkScripts));
+}
+
+backupChunkScripts.displayName = 'backup:chunk-scripts';
+
+module.exports = backupChunkScripts;

gulpfile.js/private-tasks/build--assets.js

@@ -0,0 +1,20 @@
+const { series } = require('gulp');
+const buildLocales = require('./build--locales');
+const copyAssets = require('./copy--assets');
+const lintScripts = require('./lint--scripts');
+const buildScriptsES6 = require('./build--scripts-es6');
+const buildScriptsExternal = require('./build--scripts-external');
+const buildStyles = require('./build--styles');
+const buildStylesRtl = require('./build--styles-rtl');
+
+const buildAssets = series(
+  buildLocales,
+  copyAssets,
+  lintScripts,
+  buildScriptsES6,
+  buildScriptsExternal,
+  buildStyles,
+  buildStylesRtl,
+);
+
+module.exports = buildAssets;

gulpfile.js/private-tasks/build--locales.js

@@ -0,0 +1,37 @@
+const { src, dest, parallel } = require('gulp');
+const merge = require('gulp-merge-json');
+
+const { srcLocales } = require('../config/directories');
+const { getFolders } = require('../utils');
+const { handleError } = require('../utils/errors');
+
+function generateBuildTmpFn(folder) {
+  function buildLocale() {
+    return src(`${srcLocales}/${folder}/**/*.json`)
+      .pipe(merge({
+        fileName: `${folder}.json`,
+        jsonSpace: '  ',
+      }))
+      .on('error', handleError)
+      .pipe(dest(srcLocales));
+  }
+
+  buildLocale.displayName = `build:locale:${folder}`;
+
+  return buildLocale;
+}
+
+function buildLocales(cb) {
+  const folders = getFolders(srcLocales);
+
+  if (folders[0]) {
+    process.env.MULTI_LANGUAGE = folders;
+    return parallel(...folders.map(generateBuildTmpFn))(cb);
+  }
+
+  return cb();
+}
+
+buildLocales.displayName = 'build:locales';
+
+module.exports = buildLocales;

gulpfile.js/private-tasks/build--scripts-es6.js

@@ -0,0 +1,24 @@
+const { src, dest } = require('gulp');
+const gulpWebpack = require('webpack-stream');
+const webpack = require('webpack');
+const vinylNamed = require('vinyl-named');
+
+const { filesJsES6, outputScript } = require('../config/directories');
+const option = require('../config/webpack');
+const { list, handleError } = require('../utils/errors');
+
+function buildScriptsES6(cb) {
+  if (!list.isJSValid) {
+    return cb();
+  }
+
+  return src(filesJsES6)
+    .pipe(vinylNamed())
+    .pipe(gulpWebpack(option, webpack))
+    .on('error', handleError)
+    .pipe(dest(outputScript));
+}
+
+buildScriptsES6.displayName = 'build:scripts-es6';
+
+module.exports = buildScriptsES6;

gulpfile.js/private-tasks/build--scripts-external.js

@@ -0,0 +1,22 @@
+const { src, dest } = require('gulp');
+const concat = require('gulp-concat');
+
+const jsExternalPaths = require('../config/externals-js');
+const { outputScript } = require('../config/directories');
+const { handleError } = require('../utils/errors');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+/**
+ * Building libraries scripts
+ */
+function buildScriptsExternal () {
+  return src(jsExternalPaths, { sourcemaps: isDevelopment })
+    .pipe(concat('externals.js'))
+    .on('error', handleError)
+    .pipe(dest(outputScript, { sourcemaps: isDevelopment && '.' }));
+}
+
+buildScriptsExternal.displayName = 'build:scripts-external';
+
+module.exports = buildScriptsExternal;

gulpfile.js/private-tasks/build--styles-rtl.js

@@ -0,0 +1,27 @@
+const { src, dest, lastRun } = require('gulp');
+const rtlcss = require('gulp-rtlcss');
+const rename = require('gulp-rename');
+
+const {
+  outputStyle,
+  filesCssBuilt,
+} = require('../config/directories');
+const { rtl: renameOpts } = require('../config/rename');
+const browserSync = require('../utils/browser-sync');
+const { handleError } = require('../utils/errors');
+
+function buildStylesRtl() {
+  return src(filesCssBuilt, {
+    since: lastRun(buildStylesRtl),
+  })
+    .pipe(rtlcss())
+    .on('error', handleError)
+    .pipe(rename(renameOpts))
+    .on('error', handleError)
+    .pipe(dest(outputStyle))
+    .pipe(browserSync.stream());
+}
+
+buildStylesRtl.displayName = 'build:styles-rtl';
+
+module.exports = buildStylesRtl;

gulpfile.js/private-tasks/build--styles.js

@@ -0,0 +1,35 @@
+const { src, dest } = require('gulp');
+// const sass = require('sass');
+// const gulpSass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
+const cached = require('gulp-cached');
+const sassUnicode = require('gulp-sass-unicode');
+const autoprefixer = require('gulp-autoprefixer');
+// const header = require('gulp-header');
+
+// gulpSass.compiler = sass;
+
+const {
+  filesScssBuilt,
+  outputStyle,
+} = require('../config/directories');
+const sassOpts = require('../config/sass');
+const browserSync = require('../utils/browser-sync');
+const { handleError } = require('../utils/errors');
+
+function buildStyles() {
+  return src(filesScssBuilt)
+    .pipe(cached('scss'))
+    .pipe(sass(sassOpts))
+    .on('error', handleError)
+    .pipe(sassUnicode())
+    .on('error', handleError)
+    .pipe(autoprefixer())
+    .on('error', handleError)
+    .pipe(dest(outputStyle))
+    .pipe(browserSync.stream());
+}
+
+buildStyles.displayName = 'build:styles';
+
+module.exports = buildStyles;

gulpfile.js/private-tasks/build--views-min.js

@@ -0,0 +1,20 @@
+const gulp = require('gulp');
+const htmlReplace = require('gulp-html-replace');
+
+const useminOpts = require('../config/usemin');
+const { output } = require('../config/directories');
+const { handleError } = require('../utils/errors');
+
+function buildViewsMin() {
+  return gulp
+    .src(`${output}**/*.html`)
+    .pipe(htmlReplace(useminOpts, {
+      resolvePaths: true,
+    }))
+    .on('error', handleError)
+    .pipe(gulp.dest(output));
+}
+
+buildViewsMin.displayName = 'build:views-min';
+
+module.exports = buildViewsMin;

gulpfile.js/private-tasks/build--views.js

@@ -0,0 +1,47 @@
+const { src, dest, parallel } = require('gulp');
+const pug = require('gulp-pug');
+
+const { srcLocales, filesPugBuilt, output } = require('../config/directories');
+const options = require('../config/pug');
+const { handleError } = require('../utils/errors');
+
+function generateBuildTmpFn(lang) {
+  let outputPath = output;
+  const pugOpts = {
+    ...options,
+    locals: {
+      $translator: {},
+      $localeName: lang,
+    },
+  };
+
+  if (lang) {
+    outputPath = `${output + lang}/`;
+    /* eslint-disable-next-line */
+    pugOpts.locals.$translator = require(`../../${srcLocales + lang}.json`);
+  }
+
+  function buildView() {
+    return src(filesPugBuilt)
+      .pipe(pug(pugOpts))
+      .on('error', handleError)
+      .pipe(dest(outputPath));
+  }
+
+  buildView.displayName = `build:views:${lang || 'single-lang'}`;
+  return buildView;
+}
+
+function buildViews(cb) {
+  const folders = process.env.MULTI_LANGUAGE;
+
+  if (folders) {
+    return parallel(...folders.split(',').map(generateBuildTmpFn))(cb);
+  }
+
+  return generateBuildTmpFn()();
+}
+
+buildViews.displayName = 'build:views';
+
+module.exports = buildViews;

gulpfile.js/private-tasks/bundle--scripts.js

@@ -0,0 +1,27 @@
+const { src, dest } = require('gulp');
+const concat = require('gulp-concat');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+
+const { outputScript } = require('../config/directories');
+const { handleError } = require('../utils/errors');
+const { min } = require('../config/rename');
+
+function bundleScripts() {
+  return src([`${outputScript}externals.js`, `${outputScript}*.js`])
+    .pipe(concat('scripts.js'))
+    .on('error', handleError)
+    .pipe(dest(outputScript))
+    .pipe(rename(min))
+    .pipe(uglify({
+      mangle: {
+        keep_fnames: true,
+      },
+    }))
+    .on('error', handleError)
+    .pipe(dest(outputScript));
+}
+
+bundleScripts.displayName = 'bundle:scripts';
+
+module.exports = bundleScripts;

gulpfile.js/private-tasks/bundle--styles.js

@@ -0,0 +1,25 @@
+const { src, dest } = require('gulp');
+const concat = require('gulp-concat');
+
+const { outputStyle } = require('../config/directories');
+const { handleError } = require('../utils/errors');
+
+function bundleStyles(isRTL) {
+  const suffix = isRTL ? '-rtl' : '';
+  const libsCss = `${outputStyle}$libs${suffix}.css`;
+  const appsCss = `${outputStyle}apps${suffix}.css`;
+  const concatCss = `styles${suffix}.css`;
+
+  function bundleStyle() {
+    return src([libsCss, appsCss])
+      .pipe(concat(concatCss))
+      .on('error', handleError)
+      .pipe(dest(outputStyle));
+  }
+
+  bundleStyle.displayName = `bundle:styles:${isRTL ? 'rtl' : 'origin'}`;
+
+  return bundleStyle;
+}
+
+module.exports = bundleStyles;

gulpfile.js/private-tasks/clean--output.js

@@ -0,0 +1,9 @@
+const del = require('del');
+
+const { output } = require('../config/directories');
+
+const cleanOutput = () => del(output);
+
+cleanOutput.displayName = 'clean:output';
+
+module.exports = cleanOutput;

gulpfile.js/private-tasks/clean--temp-scripts.js

@@ -0,0 +1,14 @@
+const del = require('del');
+
+const { outputScript } = require('../config/directories');
+
+const cleanTempScripts = () => del([
+  `${outputScript}*.js`,
+  `${outputScript}*.map`,
+  `!${outputScript}scripts.js`,
+  `!${outputScript}scripts.min.js`,
+]);
+
+cleanTempScripts.displayName = 'clean:temp-scripts';
+
+module.exports = cleanTempScripts;

gulpfile.js/private-tasks/clean--temp-styles.js

@@ -0,0 +1,14 @@
+const del = require('del');
+
+const { outputStyle } = require('../config/directories');
+
+const cleanTempStyles = () => del([
+  `${outputStyle}$libs.css`,
+  `${outputStyle}$libs-rtl.css`,
+  `${outputStyle}apps.css`,
+  `${outputStyle}apps-rtl.css`,
+]);
+
+cleanTempStyles.displayName = 'clean:temp-styles';
+
+module.exports = cleanTempStyles;

gulpfile.js/private-tasks/copy--assets.js

@@ -0,0 +1,12 @@
+const { src, dest, lastRun } = require('gulp');
+const { filesAssets, output } = require('../config/directories');
+
+function copyAssets() {
+  return src(filesAssets, {
+    since: lastRun(copyAssets),
+  }).pipe(dest(output));
+}
+
+copyAssets.displayName = 'copy:assets';
+
+module.exports = copyAssets;

gulpfile.js/private-tasks/lint--scripts.js

@@ -0,0 +1,26 @@
+const { src } = require('gulp');
+const eslint = require('gulp-eslint');
+const cached = require('gulp-cached');
+
+const { filesJs } = require('../config/directories');
+const { handleESLintError } = require('../utils/errors');
+const stream = require('../utils/browser-sync');
+
+function lintScripts() {
+  const gulpInstance = src(filesJs)
+    .pipe(cached('eslint'))
+    .pipe(eslint())
+    .pipe(eslint.results(handleESLintError));
+
+  if (stream.isStreaming) {
+    return gulpInstance;
+  }
+
+  return gulpInstance
+    .pipe(eslint.format())
+    .pipe(eslint.failOnError());
+}
+
+lintScripts.displayName = 'lint:scripts';
+
+module.exports = lintScripts;

gulpfile.js/private-tasks/minify--chunk-scripts.js

@@ -0,0 +1,20 @@
+const { src, dest } = require('gulp');
+const uglify = require('gulp-uglify');
+
+const { filesChunkJs, outputChunkScripts } = require('../config/directories');
+const { handleError } = require('../utils/errors');
+
+function minifyChunkScripts() {
+  return src(filesChunkJs)
+    .pipe(uglify({
+      mangle: {
+        keep_fnames: true,
+      },
+    }))
+    .on('error', handleError)
+    .pipe(dest(outputChunkScripts));
+}
+
+minifyChunkScripts.displayName = 'minify:chunk-scripts';
+
+module.exports = minifyChunkScripts;

gulpfile.js/private-tasks/minify--styles.js

@@ -0,0 +1,19 @@
+const { src, dest } = require('gulp');
+const rename = require('gulp-rename');
+const cleanCss = require('gulp-clean-css');
+
+const { outputStyle } = require('../config/directories');
+const { min } = require('../config/rename');
+const { handleError } = require('../utils/errors');
+
+function minifyStyles() {
+  return src(`${outputStyle}**/*.css`)
+    .pipe(rename(min))
+    .pipe(cleanCss())
+    .on('error', handleError)
+    .pipe(dest(outputStyle));
+}
+
+minifyStyles.displayName = 'minify:styles';
+
+module.exports = minifyStyles;

gulpfile.js/private-tasks/print--results.js

@@ -0,0 +1,64 @@
+const notify = require('gulp-notify');
+const stripIndent = require('strip-indent');
+
+const { pluralText } = require('../utils');
+const errors = require('../utils/errors');
+
+const { log } = console;
+
+notify.logLevel(0);
+
+function printResults(cb) {
+  const errList = errors.list;
+  const {
+    totalError, totalWarning, totalIssue, data,
+  } = errList;
+  const errorString = `${totalError} ${pluralText('error', totalError)}`;
+  const warningString = `${totalWarning} ${pluralText('warning', totalWarning)}`;
+  const resultString = `The project has ${errorString} & ${warningString}`;
+  const resultStr = resultString; // Improve Performance Node
+  const dashChar = ''.padEnd(resultStr.length + 4, '=');
+
+  log(stripIndent(`
+    ${dashChar}
+
+      ${resultStr}
+
+    ${dashChar}
+  `));
+
+  if (!totalIssue) {
+    return cb();
+  }
+
+  const infoLogs = stripIndent(data.map(({
+    message, code, title, type,
+  }, i) => {
+    if (type !== 'Warning') {
+      notify.onError({
+        title,
+        message,
+      })();
+    }
+
+    return `
+    ---[ ${type} ${i + 1} ]-------------------------
+    |  Path : ${message}
+    |  ${code}
+    `;
+  }).join(`
+  `));
+
+  log((`
+  ${infoLogs}
+  ${dashChar}
+  `).replace(/^ {2}/gm, ''));
+
+  errors.resetError();
+
+  return cb();
+}
+
+printResults.displayName = 'print:results';
+
+module.exports = printResults;

gulpfile.js/private-tasks/reload.js

@@ -0,0 +1,10 @@
+const browserSync = require('../utils/browser-sync');
+
+function reload(cb) {
+  browserSync.reload();
+  cb();
+}
+
+reload.displayName = 'reload';
+
+module.exports = reload;

gulpfile.js/private-tasks/run--dev-server.js

@@ -0,0 +1,8 @@
+const { parallel } = require('gulp');
+
+const runViews = require('./run--views');
+const runWatchers = require('./run--watchers');
+
+const runDevServer = parallel(runViews, runWatchers);
+
+module.exports = runDevServer;

gulpfile.js/private-tasks/run--views.js

@@ -0,0 +1,35 @@
+const nodemon = require('gulp-nodemon');
+
+const browserSync = require('../utils/browser-sync');
+const options = require('../config/nodemon');
+const browserSyncOpts = require('../config/browser-sync');
+
+function runViews(cb) {
+  let started = false;
+
+  nodemon({
+    ...options,
+    env: {
+      MULTI_LANGUAGE: process.env.MULTI_LANGUAGE,
+    },
+  })
+    .on('start', () => {
+      if (started) {
+        cb();
+        return;
+      }
+
+      started = true;
+
+      setTimeout(() => {
+        browserSync.isStreaming = true;
+        browserSync.init(browserSyncOpts);
+
+        cb();
+      }, 1000);
+    });
+}
+
+runViews.displayName = 'run:views';
+
+module.exports = runViews;

gulpfile.js/private-tasks/run--watchers.js

@@ -0,0 +1,71 @@
+const { series, parallel, watch } = require('gulp');
+const cached = require('gulp-cached');
+
+const reload = require('./reload');
+const buildLocales = require('./build--locales');
+const printResults = require('./print--results');
+const buildStyles = require('./build--styles');
+const buildScriptsExternal = require('./build--scripts-external');
+const lintScripts = require('./lint--scripts');
+const buildScriptsES6 = require('./build--scripts-es6');
+const copyAssets = require('./copy--assets');
+
+const {
+  filesPug,
+  srcLocales,
+  filesScssBuilt,
+  filesScssPartial,
+  filesJs,
+  filesAssets,
+} = require('../config/directories');
+const jsExternalPaths = require('../config/externals-js');
+
+function runWatchers(cb) {
+  const reloadAndShowResults = parallel(printResults, reload);
+
+  // HTML --------------------
+  watch(filesPug, reload);
+
+  // LOCALE --------------------
+  watch(`${srcLocales}*/*.json`, series(
+    buildLocales,
+    reloadAndShowResults,
+  ));
+
+  // CSS --------------------
+  watch(filesScssBuilt, series(
+    buildStyles,
+    printResults,
+  ));
+
+  watch(filesScssPartial, series(
+    buildStyles,
+    printResults,
+  )).on('change', () => delete cached.caches.scss);
+
+  // JS --------------------
+  watch(jsExternalPaths, series(
+    buildScriptsExternal,
+    reloadAndShowResults
+  ));
+
+  watch(filesJs, series(
+    lintScripts,
+    buildScriptsES6,
+    reloadAndShowResults,
+  ));
+
+  // ASSETS --------------------
+  watch(filesAssets, series(
+    copyAssets,
+    reloadAndShowResults,
+  ));
+
+  if (typeof cb === 'function') {
+    cb();
+  }
+}
+
+runWatchers.displayName = 'run:watchers';
+
+module.exports = runWatchers;

gulpfile.js/private-tasks/versionfy.js

@@ -0,0 +1,15 @@
+const { src, dest } = require('gulp');
+const header = require('gulp-header');
+const dayjs = require('dayjs');
+
+const { outputScript, outputStyle } = require('../config/directories');
+
+function versionfy() {
+  return src([`${outputScript}/**/*.js`, `${outputStyle}/**/*.css`])
+    .pipe(header(`/* version: ${dayjs().format('DD-MM-YYYY HH:mm:ss')} */`))
+    .pipe(dest((file) => file.base));
+}
+
+versionfy.displayName = 'versionfy';
+
+module.exports = versionfy;