INIT

gulpfiles/build.js

@@ -0,0 +1,383 @@
+/*
+* Gulp Builder (Build)
+* @version: 1.0.0 (Fri, 08 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+
+const del = require('del');
+
+const {
+  config,
+  context,
+  pathLevel,
+  shieldingVariables,
+  shieldingFunctions,
+  additionNames,
+  gulpLighten,
+  gulpDarken,
+  gulpRGBA
+} = require('./core');
+const paths = require('./paths');
+const {svgCompiler} = require('./svg-compiler')
+
+const gulp = require('gulp');
+const fileinclude = require('gulp-file-include');
+const replace = require('gulp-replace');
+const deleteLines = require('gulp-delete-lines');
+const concat = require('gulp-concat');
+const cleanCSS = require('gulp-clean-css');
+const uglify = require('gulp-uglify-es').default;
+const rtlcss = require("gulp-rtlcss");
+const rename = require('gulp-rename');
+const prettify = require("gulp-prettify");
+
+let css = [],
+  minifyCSSFiles = [],
+  js = [],
+  vendor_css = [],
+  vendor_js = [],
+  skippedNodeFiles = [],
+  skippedFiles = [],
+  images = [];
+
+function fileInclude() {
+  return gulp
+    .src([
+      paths.build.html.files,
+      '!' + paths.src.assets.files,
+      '!' + paths.src.tmp.files,
+      '!' + paths.src.partials.files
+    ])
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file',
+      indent: true,
+      context: context
+    }))
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(replace(new RegExp('(.*?)(\\.+\\/)+' + `(${additionNames.vendor}|node_modules)` + '\/.*\\.(js|css)', 'g'), function (match, p1, p2, p3, p4) {
+      if (p1.search(/(&gt|&lt|<!--|\/\/)/g) >= 0) return match;
+
+      path = match.replace(/(\.+\/)+/, '').replace(p1, '')
+
+      // Node Modules Vendor
+      if (path.search('node_modules') === 0) {
+        if (config.skipFilesFromBundle.build.indexOf(path) < 0) {
+          if (p4 === "css") {
+            vendor_css.push(path)
+          } else {
+            vendor_js.push(path)
+          }
+
+          return match + " " + config.deleteLine
+        } else {
+          if (path in config.replacePathsToCDN) {
+            return config.replacePathsToCDN[path]
+          } else {
+            splitedPath = path.split('/')
+
+            skippedNodeFiles.push(splitedPath[0] + '/*' + splitedPath[1] + '/**')
+          }
+        }
+
+        return match.replace('node_modules', paths.build.vendor.dir.replace(paths.build.base.dir + '/', ''))
+      }
+
+      // Local Vendor
+      else {
+        if (config.skipFilesFromBundle.build.indexOf(path) < 0) {
+          if (p4 === "css") {
+            vendor_css.push(paths.src.base.dir + "/" + path)
+          } else {
+            vendor_js.push(paths.src.base.dir + "/" + path)
+          }
+
+          return match + " " + config.deleteLine
+        } else {
+          if (path in config.replacePathsToCDN) {
+            return config.replacePathsToCDN[path]
+          } else {
+            splitedPath = path.split('/')
+
+            skippedFiles.push(paths.src.base.dir + '/*' + splitedPath[0] + '/' + splitedPath[1] + '/' + splitedPath[2] + '/**')
+          }
+        }
+
+        return match
+      }
+    }))
+    .pipe(replace(new RegExp('(.*?)(\\.+\\/)+' + `(${additionNames.js}|${additionNames.css})` + '\/.*\\.(js|css)', 'g'), function (match, p1, p2, p3, p4) {
+      if (p1.search(/(&gt|&lt|<!--|\/\/)/g) >= 0) return match;
+
+      path = match.replace(/(\.+\/)+/, '').replace(p1, '')
+
+      if (config.skipFilesFromBundle.build.indexOf(path) < 0) {
+        if (p4 === "css") {
+          css.push(paths.src.base.dir + "/" + path)
+        } else {
+          js.push(paths.src.base.dir + "/" + path)
+        }
+
+        return match + " " + config.deleteLine
+      } else {
+        if (config.minifyCSSFiles.indexOf(path) > -1) {
+          minifyCSSFiles.push(paths.src.base.dir + "/" + path)
+          return match.replace('.css', '.min.css')
+        }
+        if (path in config.replacePathsToCDN) {
+          return config.replacePathsToCDN[path]
+        } else {
+          skippedFiles.push(paths.src.base.dir + "/*" + path)
+        }
+      }
+
+      return match
+    }))
+    .pipe(replace(new RegExp('(.*?)(\\.+\\/)+(.*?)\\.' + '(' + config.fileTypes + '|html' + ')', 'g'), function (match, p1, p2) {
+      if (p1.search(/(&gt|&lt|<!--|\/\/|\.html)/g) >= 0) return match
+      if (match.search(/\.html/g) >= 0) return match
+
+      path = match.replace(/(\.+\/)+/, '').replace(p1, '')
+
+      if (path.search('node_modules') >= 0) {
+        splitedPath = path.split('/')
+
+        skippedNodeFiles.push(splitedPath[0] + '/*' + splitedPath[1] + '/**')
+
+        return match.replace('node_modules', paths.build.vendor.dir.replace(paths.build.base.dir + '/', ''))
+      } else {
+        images.push(paths.src.base.dir + "/*" + path)
+      }
+
+      return match
+    }))
+    .pipe(replace(/gulpLighten\[(.*?)\]/g, function (math, p1) {
+      return gulpLighten(p1)
+    }))
+    .pipe(replace(/gulpDarken\[(.*?)\]/g, function (math, p1) {
+      return gulpDarken(p1)
+    }))
+    .pipe(replace(/gulpRGBA\[(.*?)\]/g, function (math, p1) {
+      return gulpRGBA(p1)
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        new RegExp(config.deleteLine, 'i')
+      ]
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        new RegExp(config["deleteLine:build"], 'i')
+      ]
+    }))
+    .pipe(replace(new RegExp(config["deleteLine:dist"], 'g'), ''))
+    .pipe(replace(/<!-- bundlecss:vendor \[(.*?)\](.*)-->/g, function (math, p1, p2) {
+      return `<link rel="stylesheet" href="${p1}/${paths.build.build.css}/${config.fileNames.build.vendorCSS}${p2.trim()}">`;
+    }))
+    .pipe(replace(/<!-- bundlecss:theme \[(.*?)\](.*)-->/g, function (math, p1, p2) {
+      return `<link rel="stylesheet" href="${p1}/${paths.build.build.css}/${config.fileNames.build.css}${p2.trim()}">`;
+    }))
+    .pipe(replace(/<!-- bundlejs:vendor \[(.*?)\](.*)-->/g, function (math, p1, p2) {
+      return `<script src="${p1}/${paths.build.build.js}/${config.fileNames.build.vendorJS}${p2.trim()}"></script>`;
+    }))
+    .pipe(replace(/<!-- bundlejs:theme \[(.*?)\](.*)-->/g, function (math, p1, p2) {
+      return `<script src="${p1}/${paths.build.build.js}/${config.fileNames.build.js}${p2.trim()}"></script>`;
+    }))
+    .pipe(replace(/(\[\@\@\]).*?/g, function (match, p1) {
+      return shieldingVariables(match, p1);
+    }))
+    .pipe(replace(/(\[@\@F\]).*?/g, function (match, p1) {
+      return shieldingFunctions(match, p1);
+    }))
+    .pipe(replace(/\<\/head\>/g, function (math, p1) {
+      const visablilityStyles = `<style>[data-hs-theme-appearance]:not([data-hs-theme-appearance='${config.themeAppearance.layoutSkin}']){display:none;}</style>`
+      return `
+        <script>
+        window.hs_config = ${JSON.stringify(config)}
+        window.hs_config.gulpRGBA = ${gulpRGBA}
+        window.hs_config.gulpDarken = ${gulpDarken}
+        window.hs_config.gulpLighten = ${gulpLighten}
+        </script>${!config.layoutBuilder.extend.switcherSupport ? visablilityStyles : ''}                
+      </head>`
+    }))
+    .pipe(replace(/\<\!\-\- ONLY DEV \-\-\>(.|\n)*?\<\!\-\- END ONLY DEV \-\-\>\s+/g, ''))
+    .pipe(replace(/\/\/ ONLY DEV(.|\n)*?\/\/ END ONLY DEV\s+/g, ''))
+    .pipe(prettify({
+      indent_inner_html: false,
+      unformatted: ['pre', 'code', 'script'],
+      preserve_newlines: true
+    }))
+    .pipe(gulp.dest(paths.build.base.dir))
+};
+
+function buildCSS() {
+  css = new Set(css)
+
+  if ([...css].length) {
+    return gulp
+      .src([...css])
+      .pipe(cleanCSS({compatibility: 'ie11'}))
+      .pipe(concat(config.fileNames.build.css))
+      .pipe(gulp.dest(paths.build.css.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function buildMinifyCSSFiles() {
+  minifyCSSFiles = new Set(minifyCSSFiles)
+
+  if ([...minifyCSSFiles].length) {
+    return gulp
+      .src([...minifyCSSFiles])
+      .pipe(cleanCSS({compatibility: 'ie11'}))
+      .pipe(rename({suffix: '.min'}))
+      .pipe(gulp.dest(paths.build.css.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function buildJS() {
+  js = new Set(js)
+
+  if ([...js].length) {
+    return gulp
+      .src([...js], {
+        allowEmpty: true,
+      })
+      .pipe(concat(config.fileNames.build.js))
+      .pipe(uglify())
+      .pipe(gulp.dest(paths.build.js.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function buildVendorCSS() {
+  vendor_css = new Set(vendor_css)
+
+  if ([...vendor_css].length) {
+    return gulp
+      .src([...vendor_css])
+      .pipe(cleanCSS({compatibility: 'ie11'}))
+      .pipe(concat(config.fileNames.build.vendorCSS))
+      .pipe(gulp.dest(paths.build.css.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function rtlCSS() {
+  return gulp
+    .src(paths.build.build.css)
+    .pipe(rtlcss())
+    .pipe(cleanCSS({compatibility: 'ie11'}))
+    .pipe(rename({suffix: '-rtl'}))
+    .pipe(gulp.dest(paths.build.build.css))
+}
+
+function buildVendorJS() {
+  vendor_js = new Set(vendor_js)
+
+  if ([...vendor_js].length) {
+    return gulp
+      .src([...vendor_js], {
+        allowEmpty: true,
+      })
+      .pipe(concat(config.fileNames.build.vendorJS))
+      .pipe(uglify())
+      .pipe(gulp.dest(paths.build.js.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copeImages() {
+  images = new Set(images)
+
+  if ([...images].length) {
+    return gulp
+      .src([...images])
+      .pipe(gulp.dest(paths.build.base.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copySkippedFiles() {
+  skippedFiles = new Set(skippedFiles)
+
+  if ([...skippedFiles].length) {
+    return gulp
+      .src([...skippedFiles])
+      .pipe(gulp.dest(paths.build.base.dir))
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copySkippedNodeFiles() {
+  skippedNodeFiles = new Set(skippedNodeFiles)
+
+  if ([...skippedNodeFiles].length) {
+    return gulp
+      .src([...skippedNodeFiles])
+      .pipe(gulp.dest(paths.build.vendor.dir))
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copyDependencies() {
+  for (var k in config.copyDependencies.build) {
+    path = k;
+
+    if (k.search('node_modules') !== 0) {
+      path = './src' + '/' + k
+    }
+
+    gulp
+      .src(path)
+      .pipe(gulp.dest(paths.build.base.dir + '/' + config.copyDependencies.build[k]))
+  }
+
+  return new Promise(function (resolve, reject) {
+    resolve();
+  });
+}
+
+function copyFavicon() {
+  return gulp
+    .src(paths.src.base.dir + "/favicon.ico")
+    .pipe(gulp.dest(paths.build.base.dir));
+}
+
+function clean() {
+  return del(paths.build.base.dir, {force: true});
+}
+
+gulp.task('build', gulp.series(clean, fileInclude, buildCSS, buildMinifyCSSFiles, buildVendorCSS, buildJS, buildVendorJS, svgCompiler, copeImages, copySkippedFiles, copySkippedNodeFiles, copyDependencies, copyFavicon));

gulpfiles/core.js

@@ -0,0 +1,165 @@
+/*
+* Gulp Builder (Core)
+* @version: 1.0.0 (Fri, 27 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+
+const userConfig = require('../config');
+
+// Replace container with container-fluid if set default header
+if (userConfig.layoutBuilder.header.layoutMode === 'default' && userConfig.layoutBuilder.header.containerMode === 'container') {
+  userConfig.layoutBuilder.header.containerMode = 'container-fluid';
+}
+
+// Mutatuin
+const mutator = {
+  autopath: "@@autopath",
+  deleteLine: "hs-builder:delete",
+  "deleteLine:build": "hs-builder:build-delete",
+  "deleteLine:dist": "hs-builder:dist-delete",
+  previewMode: false,
+}
+
+const additionNames = {
+  assets: "assets",
+  css: "assets/css",
+  js: "assets/js",
+  scss: "assets/scss",
+  svg: "assets/svg",
+  vendor: "assets/vendor"
+}
+
+module.exports.additionNames = additionNames;
+
+module.exports.config = {...mutator, ...userConfig}
+
+const context = {
+  buildFolder: userConfig.buildFolder,
+  fileNames: userConfig.fileNames,
+  vars: userConfig.vars,
+  themeAppearance: userConfig.themeAppearance,
+  startPath: userConfig.startPath,
+  directoryNames: userConfig.directoryNames,
+  layoutBuilder: userConfig.layoutBuilder,
+  languageDirection: userConfig.languageDirection
+}
+
+module.exports.context = {...mutator, ...context}
+
+// Lighten color fucntion
+module.exports.gulpLighten = (p1) => {
+  const options = p1.split(',')
+
+  let col = options[0].toString()
+  let amt = parseInt(options[1])
+  var usePound = false
+
+  if (col[0] == "#") {
+    col = col.slice(1)
+    usePound = true
+  }
+  var num = parseInt(col, 16)
+  var r = (num >> 16) + amt
+  if (r > 255) {
+    r = 255
+  } else if (r < 0) {
+    r = 0
+  }
+  var b = ((num >> 8) & 0x00FF) + amt
+  if (b > 255) {
+    b = 255
+  } else if (b < 0) {
+    b = 0
+  }
+  var g = (num & 0x0000FF) + amt
+  if (g > 255) {
+    g = 255
+  } else if (g < 0) {
+    g = 0
+  }
+  return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
+}
+
+// Darken color fucntion
+module.exports.gulpDarken = (p1) => {
+  const options = p1.split(',')
+
+  let col = options[0].toString()
+  let amt = -parseInt(options[1])
+  var usePound = false
+
+  if (col[0] == "#") {
+    col = col.slice(1)
+    usePound = true
+  }
+  var num = parseInt(col, 16)
+  var r = (num >> 16) + amt
+  if (r > 255) {
+    r = 255
+  } else if (r < 0) {
+    r = 0
+  }
+  var b = ((num >> 8) & 0x00FF) + amt
+  if (b > 255) {
+    b = 255
+  } else if (b < 0) {
+    b = 0
+  }
+  var g = (num & 0x0000FF) + amt
+  if (g > 255) {
+    g = 255
+  } else if (g < 0) {
+    g = 0
+  }
+  return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
+}
+
+// Rgba convert fucntion
+module.exports.gulpRGBA = (p1) => {
+  const options = p1.split(',')
+  const hex = options[0].toString()
+  const transparent = options[1].toString()
+
+  var c;
+  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+    c= hex.substring(1).split('');
+    if(c.length== 3){
+      c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+    }
+    c= '0x'+c.join('');
+    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
+  }
+  throw new Error('Bad Hex');
+}
+
+// Path level function
+module.exports.pathLevel = (file) => {
+  relativePathLevels = file.relative.split(/\/|\\/).length - 1;
+
+  let level = '';
+
+  if (relativePathLevels) {
+    for (let i = 0; i < relativePathLevels; i++) {
+      if (relativePathLevels === i + 1) {
+        level = level + '..'
+      } else {
+        level = level + '../'
+      }
+    }
+  }
+  else {
+    level = '.'
+  }
+
+  return level;
+}
+
+module.exports.shieldingVariables = (match, p1) => {
+  return match.replace(p1, '@@');
+}
+
+module.exports.shieldingFunctions = (match, p1) => {
+  return match.replace(p1, 'gulp');
+}

gulpfiles/debuger.js

@@ -0,0 +1,32 @@
+const puppeteer = require('puppeteer');
+var glob = require("glob")
+resolve = require('path').resolve
+const paths                                                             = require('./paths');
+const {config} = require('./core');
+
+const host = 'http://localhost:3000'
+
+glob(`${resolve('../')}/${paths.src.tmp.files.replace('./', '')}.html`, async function (er, files) {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+  page
+    .on('pageerror', ({message}) => {
+      console.log('=JAVASCRIPT ERROR===========================================')
+      console.log(message)
+      console.log(' ')
+    })
+    .on('response', response => {
+      if (response._resourceType !== 'xhr' && response.status() === 404) {
+        console.log('=MEDIA ERROR===========================================')
+        console.log(`ReferenceError: Not found ${response._request._resourceType} ${response._request._url}`)
+        console.log(`    at: ${response._request._frame._url}`)
+        console.log(' ')
+      }
+    })
+
+  for (const url in files) {
+    await page.goto(`${host}${files[url].replace(`${resolve('../')}${config.directoryNames.src.replace('.', '')}/.tmp`, '')}`)
+  }
+
+  await browser.close()
+})

gulpfiles/dist.js

@@ -0,0 +1,242 @@
+/*
+* Gulp Builder (Dist)
+* @version: 1.0.0 (Fri, 08 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+const del                             = require('del');
+
+const {config, context, pathLevel, shieldingVariables, shieldingFunctions, additionNames, gulpLighten, gulpDarken, gulpRGBA}   = require('./core');
+const paths                                                             = require('./paths');
+const {svgCompiler}                                                     = require('./svg-compiler')
+
+const gulp                                                              = require('gulp');
+const fileinclude                                                       = require('gulp-file-include');
+const replace                                                           = require('gulp-replace');
+const deleteLines                                                       = require('gulp-delete-lines');
+const concat                                                            = require('gulp-concat');
+const uglify                                                            = require('gulp-uglify-es').default;
+const sass                                                              = require('gulp-sass')
+const cleanCSS                                                          = require('gulp-clean-css');
+const rename                                                            = require('gulp-rename');
+const autoprefixer                                                      = require('gulp-autoprefixer');
+var rtlcss                                                              = require('gulp-rtlcss');
+var prettify                                                            = require('gulp-prettify');
+
+let node = [],
+  skipedFiles = [];
+
+function fileInclude() {
+  return gulp
+    .src([
+      paths.src.html.files,
+      '!' + paths.src.assets.files,
+      '!' + paths.src.tmp.files,
+      '!' + paths.src.partials.files
+    ])
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file',
+      indent: true,
+      context: context
+    }))
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(replace(new RegExp('(\\.+\\/)+' + additionNames.js + '\/.*\\.js', 'g'), function (match) {
+      path = match.replace(/(\.+\/)+/, '')
+
+      if (config.skipFilesFromBundle.dist.indexOf(path) < 0) {
+        return match + " " + config.deleteLine
+      } else {
+        skipedFiles.push(paths.src.base.dir + "/*" + path)
+      }
+
+      return match
+    }))
+    .pipe(replace(new RegExp('(\\.+\\/)+' + additionNames.css + '\/.*\\.css', 'g'), function (match) {
+      return match.replace('.css', '.min.css')
+    }))
+    .pipe(replace(new RegExp('(\\.+\\/)+' + "node_modules" + '\/.*\\.*', 'g'), function (match, p1) {
+      path = match.replace(/(\.+\/)+/, '')
+      splitedPath = path.split('/')
+
+      node.push('./' + splitedPath[0] + '/*' + splitedPath[1] + '/**')
+
+      return match.replace('node_modules', paths.dist.vendor.dir.replace(paths.dist.base.dir + '/', ''))
+    }))
+    .pipe(replace(/gulpLighten\[(.*?)\]/g, function (math, p1) {
+      return gulpLighten(p1)
+    }))
+    .pipe(replace(/gulpDarken\[(.*?)\]/g, function (math, p1) {
+      return gulpDarken(p1)
+    }))
+    .pipe(replace(/gulpRGBA\[(.*?)\]/g, function (math, p1) {
+      return gulpRGBA(p1)
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        new RegExp(config.deleteLine, 'i')
+      ]
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        new RegExp(config["deleteLine:dist"], 'i')
+      ]
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        /<!-- bundlecss:vendor \[(.*?)\](.*)-->/i
+      ]
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        /<!-- bundlecss:theme \[(.*?)\](.*)-->/i
+      ]
+    }))
+    .pipe(deleteLines({
+      'filters': [
+        /<!-- bundlejs:vendor \[(.*?)\](.*)-->/i
+      ]
+    }))
+    .pipe(replace(new RegExp(config["deleteLine:build"], 'g'), ''))
+    .pipe(replace(/<!-- bundlejs:theme \[(.*?)\](.*)-->/g, function (math, p1, p2) {
+      return `<script src="${p1}/${paths.dist.build.js}/${config.fileNames.dist.js}${p2.trim()}"></script>`;
+    }))
+    .pipe(replace(/(\[\@\@\]).*?/g, function (match, p1) {
+      return shieldingVariables(match, p1);
+    }))
+    .pipe(replace(/(\[@\@F\]).*?/g, function (match, p1) {
+      return shieldingFunctions(match, p1);
+    }))
+    .pipe(replace(/\<\/head\>/g, function (math, p1) {
+      const visablilityStyles = `<style>[data-hs-theme-appearance]:not([data-hs-theme-appearance='${config.themeAppearance.layoutSkin}']){display:none;}</style>`
+      return `
+        <script>
+            window.hs_config = ${JSON.stringify(config)}
+            window.hs_config.gulpRGBA = ${gulpRGBA}
+            window.hs_config.gulpDarken = ${gulpDarken}
+            window.hs_config.gulpLighten = ${gulpLighten}
+            </script>${!config.layoutBuilder.extend.switcherSupport ? visablilityStyles : ''}                
+      </head>`
+    }))
+    .pipe(replace(/\<\!\-\- ONLY DEV \-\-\>(.|\n)*?\<\!\-\- END ONLY DEV \-\-\>\s+/g, ''))
+    .pipe(replace(/\/\/ ONLY DEV(.|\n)*?\/\/ END ONLY DEV\s+/g, ''))
+    .pipe(prettify({
+      indent_inner_html: false,
+      unformatted: ['pre', 'code', 'script'],
+      preserve_newlines: true
+    }))
+    .pipe(gulp.dest(paths.dist.base.dir))
+};
+
+function minCSS() {
+  return gulp
+    .src(paths.src.css.files)
+    .pipe(cleanCSS({compatibility: 'ie11'}))
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest(paths.dist.css.dir))
+}
+
+function rtlCSS() {
+  return gulp
+    .src(paths.src.css.files)
+    .pipe(rtlcss())
+    .pipe(cleanCSS({compatibility: 'ie11'}))
+    .pipe(rename({ suffix: '-rtl' }))
+    .pipe(gulp.dest(paths.dist.css.dir))
+}
+
+function minJS() {
+  let bundle = [paths.src.js.dir + '/hs.core.js', paths.src.js.files];
+
+  config.skipFilesFromBundle.dist.forEach(file => {
+    bundle.push("!" + paths.src.base.dir + "/*" + file)
+  })
+
+  if (bundle.length) {
+    return gulp
+      .src(bundle)
+      .pipe(concat(config.fileNames.dist.js))
+      .pipe(uglify())
+      .pipe(gulp.dest(paths.dist.js.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copy() {
+  return gulp
+    .src([
+      paths.src.assets.dir + '/**',
+      '!' + paths.src.scss.dir + '/**',
+      '!' + paths.src.svg.dir + '/**',
+      '!' + paths.src.css.dir + '/**',
+      '!' + paths.src.js.dir + '/**',
+    ])
+    .pipe(gulp.dest(paths.dist.assets.dir))
+}
+
+function copyNode() {
+  node = new Set(node)
+
+  if ([...node].length) {
+    return gulp
+      .src([...node])
+      .pipe(gulp.dest(paths.dist.vendor.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copySkipedFiles() {
+  skipedFiles = new Set(skipedFiles)
+
+  if ([...skipedFiles].length) {
+    return gulp
+      .src([...skipedFiles])
+      .pipe(gulp.dest(paths.dist.base.dir));
+  } else {
+    return new Promise(function (resolve, reject) {
+      resolve();
+    });
+  }
+}
+
+function copyDependencies() {
+  for (var k in config.copyDependencies.dist) {
+    path = k;
+
+    if (k.search('node_modules') !== 0) {
+      path = './src' + '/' + k
+    }
+
+    gulp
+      .src(path)
+      .pipe(gulp.dest(paths.dist.base.dir + '/' + config.copyDependencies.dist[k]))
+  }
+
+  return new Promise(function (resolve, reject) {
+    resolve();
+  });
+}
+
+function copyFavicon() {
+  return gulp
+    .src(paths.src.base.dir + "/favicon.ico")
+    .pipe(gulp.dest(paths.dist.base.dir));
+}
+
+function clean() {
+  return del(paths.dist.base.dir, {force: true});
+}
+
+gulp.task('dist', gulp.series(clean, fileInclude, minCSS, rtlCSS, minJS, svgCompiler, copy, copyNode, copySkipedFiles, copyDependencies, copyFavicon));

gulpfiles/paths.js

@@ -0,0 +1,104 @@
+/*
+* Gulp Builder (Paths)
+* @version: 1.0.0 (Fri, 08 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+
+const config                            = require('../config');
+const {additionNames}                   = require('./core');
+
+config.directoryNames = {...config.directoryNames, ...additionNames}
+
+module.exports = {
+  root: "./",
+  node: {
+    dir: "node_modules"
+  },
+  dist: {
+    base: {
+      dir: config.directoryNames.dist,
+    },
+    build: {
+      css: config.directoryNames.css,
+      js: config.directoryNames.js
+    },
+    css: {
+      dir: config.directoryNames.dist + "/" + config.directoryNames.css,
+      files: config.directoryNames.dist + "/" + config.directoryNames.css + "/*.css"
+    },
+    js: {
+      dir: config.directoryNames.dist + "/" + config.directoryNames.js,
+      files: config.directoryNames.dist + "/" + config.directoryNames.js + "/*.js"
+    },
+    vendor: {
+      dir: config.directoryNames.dist + "/" + config.directoryNames.vendor
+    },
+    assets: {
+      dir: config.directoryNames.dist + "/" + config.directoryNames.assets
+    },
+  },
+  src: {
+    base: {
+      dir: config.directoryNames.src,
+      files: config.directoryNames.src + "/**/*"
+    },
+    assets: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.assets,
+      files: config.directoryNames.src + "/" + config.directoryNames.assets + "/**/*"
+    },
+    vendor: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.vendor
+    },
+    css: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.css,
+      files: config.directoryNames.src + "/" + config.directoryNames.css + "/**/*"
+    },
+    scss: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.scss,
+      files: config.directoryNames.src + "/" + config.directoryNames.scss + "/**/*.scss"
+    },
+    js: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.js,
+      files: config.directoryNames.src + "/" + config.directoryNames.js + "/*.js"
+    },
+    partials: {
+      files: config.directoryNames.src + "/partials/**/*"
+    },
+    html: {
+      dir: config.directoryNames.src,
+      files: config.directoryNames.src + "/**/*.html",
+    },
+    tmp: {
+      dir: config.directoryNames.src + "/.tmp",
+      files: config.directoryNames.src + "/.tmp/**/*"
+    },
+    svg: {
+      dir: config.directoryNames.src + "/" + config.directoryNames.assets + "/svg-src",
+      files: config.directoryNames.src + "/" + config.directoryNames.assets + "/svg-src/**/*.svg"
+    }
+  },
+  build: {
+    base: {
+      dir: config.directoryNames.build
+    },
+    html: {
+      dir: config.directoryNames.src + "/" + config.buildFolder,
+      files: config.buildFolder.length ? config.directoryNames.src + "/*" + config.buildFolder + "/**/*.html" : config.directoryNames.src + "/**/*.html",
+    },
+    build: {
+      css: config.directoryNames.css,
+      js: config.directoryNames.js
+    },
+    css: {
+      dir: config.directoryNames.build + "/" + config.directoryNames.css
+    },
+    js: {
+      dir: config.directoryNames.build + "/" + config.directoryNames.js
+    },
+    vendor: {
+      dir: config.directoryNames.build + "/" + config.directoryNames.vendor
+    }
+  }
+}

gulpfiles/svg-compiler.js

@@ -0,0 +1,36 @@
+/*
+* SVG Compiler (Build)
+* @version: 1.0.0 (Fri, 08 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+
+const {config, context, additionNames, gulpDarken, gulpLighten, gulpRGBA}                                 = require('./core');
+const paths                                                            = require('./paths');
+
+const gulp                                                             = require('gulp');
+const fileinclude                                                      = require('gulp-file-include');
+const replace                                                          = require('gulp-replace');
+
+module.exports.svgCompiler = function() {
+  return gulp
+    .src([
+      paths.src.svg.files
+    ])
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file',
+      context: context
+    }))
+    .pipe(replace(/gulpLighten\[(.*?)\]/g, function (math, p1) {
+      return gulpLighten(p1)
+    }))
+    .pipe(replace(/gulpDarken\[(.*?)\]/g, function (math, p1) {
+      return gulpDarken(p1)
+    }))
+    .pipe(replace(/gulpRGBA\[(.*?)\]/g, function (math, p1) {
+      return gulpRGBA(p1)
+    }))
+    .pipe(gulp.dest(config.directoryNames.src + "/" + additionNames.svg))
+};

gulpfiles/watch.js

@@ -0,0 +1,232 @@
+/*
+* Gulp Builder (Watch)
+* @version: 1.0.0 (Fri, 08 May 2020)
+* @author: HtmlStream
+* @license: Htmlstream (https://htmlstream.com/licenses)
+* Copyright 2020 Htmlstream
+*/
+
+const fs = require('fs');
+const del = require('del');
+
+const {
+  config,
+  context,
+  pathLevel,
+  shieldingVariables,
+  shieldingFunctions,
+  gulpRGBA,
+  gulpLighten,
+  gulpDarken
+} = require('./core');
+const paths = require('./paths')
+const {svgCompiler} = require('./svg-compiler')
+
+const gulp = require('gulp');
+const browsersync = require('browser-sync').create();
+const fileinclude = require('gulp-file-include');
+const rename = require('gulp-rename');
+const cached = require('gulp-cached')
+const replace = require('gulp-replace');
+const sass = require('gulp-sass')
+const autoprefixer = require('gulp-autoprefixer');
+const rtlcss = require('gulp-rtlcss');
+
+var url = null;
+
+function browserSync(done) {
+  browsersync.init({
+    files: './*.html',
+    startPath: config.startPath,
+    server: {
+      baseDir: [paths.src.tmp.dir, paths.src.base.dir, paths.root],
+      middleware: function (req, res, next) {
+        if (/\.json|\.txt|\.html/.test(req.url) && req.method.toUpperCase() == 'POST') {
+          req.method = 'GET';
+        }
+
+
+        url = req.url;
+        var index = 0;
+        index = req.url.indexOf('?');
+
+        if (index == -1) {
+          index = req.url.indexOf('#');
+        }
+        if (index != -1) {
+          url = req.url.substring(0, index);
+        }
+
+        var filename = __dirname.replace('gulpfiles', '') + paths.src.tmp.dir.replace('./', '') + url;
+        if (url.split('.').pop() === 'html') {
+          fileInclude(() => {
+            if (fs.existsSync(filename)) {
+              var html = fs.readFileSync(filename, 'utf8');
+              res.end(html)
+            } else {
+              res.end('Oops, page not found.')
+            }
+          })
+        } else {
+          next();
+        }
+      }
+    }
+  });
+  done();
+}
+
+function browserSyncReload(done) {
+  browsersync.reload();
+  done();
+}
+
+function fileIncludeAll() {
+  return gulp
+    .src([
+      paths.src.html.files,
+      '!' + paths.src.assets.files,
+      '!' + paths.src.tmp.files,
+      '!' + paths.src.partials.files,
+    ])
+    .pipe(cached())
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(fileinclude({
+      prefix: '@@',
+      basepath: '@file',
+      indent: true,
+      context: context
+    }))
+    .pipe(replace(/@@autopath/g, function (match) {
+      return pathLevel(this.file)
+    }))
+    .pipe(replace(/gulpLighten\[(.*?)\]/g, function (math, p1) {
+      return gulpLighten(p1)
+    }))
+    .pipe(replace(/gulpDarken\[(.*?)\]/g, function (math, p1) {
+      return gulpDarken(p1)
+    }))
+    .pipe(replace(/gulpRGBA\[(.*?)\]/g, function (math, p1) {
+      return gulpRGBA(p1)
+    }))
+    .pipe(replace(/\<\/head\>/g, function (math, p1) {
+      const visablilityStyles = `<style>[data-hs-theme-appearance]:not([data-hs-theme-appearance='${config.themeAppearance.layoutSkin}']){display:none;}</style>`
+      return `
+            <script>
+            window.hs_config = ${JSON.stringify(config)}
+            window.hs_config.gulpRGBA = ${gulpRGBA}
+            window.hs_config.gulpDarken = ${gulpDarken}
+            window.hs_config.gulpLighten = ${gulpLighten}
+            </script>${!config.layoutBuilder.extend.switcherSupport ? visablilityStyles : ''}
+          </head>`
+    }))
+    .pipe(replace(/(\[\@\@\]).*?/g, function (match, p1) {
+      return shieldingVariables(match, p1);
+    }))
+    .pipe(replace(/(\[@\@F\]).*?/g, function (match, p1) {
+      return shieldingFunctions(match, p1);
+    }))
+    .pipe(gulp.dest(paths.src.tmp.dir))
+};
+
+function fileInclude(callback = {}) {
+  return Promise.all([
+    new Promise(function (resolve, reject) {
+      gulp
+        .src([
+          paths.src.html.dir + url.slice(0, 1) + '*' + url.slice(1),
+          '!' + paths.src.assets.files,
+          '!' + paths.src.tmp.files,
+          '!' + paths.src.partials.files
+        ])
+        .pipe(replace(/@@autopath/g, function (match) {
+          return pathLevel(this.file)
+        }))
+        .pipe(fileinclude({
+          prefix: '@@',
+          basepath: '@file',
+          indent: true,
+          context: context
+        }))
+        .pipe(replace(/@@autopath/g, function (match) {
+          return pathLevel(this.file)
+        }))
+        .pipe(replace(/gulpLighten\[(.*?)\]/g, function (math, p1) {
+          return gulpLighten(p1)
+        }))
+        .pipe(replace(/gulpDarken\[(.*?)\]/g, function (math, p1) {
+          return gulpDarken(p1)
+        }))
+        .pipe(replace(/gulpRGBA\[(.*?)\]/g, function (math, p1) {
+          return gulpRGBA(p1)
+        }))
+        .pipe(replace(/\<\/head\>/g, function (math, p1) {
+          const visablilityStyles = `<style>[data-hs-theme-appearance]:not([data-hs-theme-appearance='${config.themeAppearance.layoutSkin}']){display:none;}</style>`
+          return `
+            <script>
+            window.hs_config = ${JSON.stringify(config)}
+            window.hs_config.gulpRGBA = ${gulpRGBA}
+            window.hs_config.gulpDarken = ${gulpDarken}
+            window.hs_config.gulpLighten = ${gulpLighten}
+            </script>${!config.layoutBuilder.extend.switcherSupport ? visablilityStyles : ''}
+          </head>`
+        }))
+        .pipe(replace(/(\[\@\@\]).*?/g, function (match, p1) {
+          return shieldingVariables(match, p1);
+        }))
+        .pipe(replace(/(\[@\@F\]).*?/g, function (match, p1) {
+          return shieldingFunctions(match, p1);
+        }))
+        .pipe(gulp.dest(paths.src.tmp.dir))
+        .on('end', resolve)
+    })
+  ]).then(function () {
+    callback()
+  });
+};
+
+function scss() {
+  return gulp
+    .src(paths.src.scss.files)
+    .pipe(sass({outputStyle: 'expanded', includePaths: [paths.node.dir]}))
+    .pipe(gulp.dest(paths.src.css.dir))
+    .on('error', sass.logError)
+    .pipe(autoprefixer([
+      'last 1 major version',
+      '>= 1%',
+      'Chrome >= 45',
+      'Firefox >= 38',
+      'Edge >= 12',
+      'Explorer >= 10',
+      'iOS >= 9',
+      'Safari >= 9',
+      'Android >= 4.4',
+      'Opera >= 30'], {cascade: true}))
+    .pipe(gulp.dest(paths.src.css.dir))
+    .pipe(browsersync.stream());
+}
+
+function rtlCSS() {
+  return config.languageDirection.isRTL ? gulp
+      .src(paths.src.css.files)
+      .pipe(rtlcss())
+      .pipe(rename({suffix: '-rtl'}))
+      .pipe(gulp.dest(paths.src.css.dir))
+    : new Promise(function (resolve, reject) {
+      resolve()
+    })
+}
+
+
+function clean() {
+  return del(paths.src.tmp.dir + '/**', {force: true});
+}
+
+function watch() {
+  gulp.watch(paths.src.scss.files, scss);
+  gulp.watch([paths.src.html.files, paths.src.partials.files], gulp.series(fileInclude, browserSyncReload));
+}
+
+gulp.task('default', gulp.series(clean, fileIncludeAll, svgCompiler, scss, rtlCSS, browserSync, watch))