init

build/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

build/Readme.md

@@ -0,0 +1,91 @@
+# Usage
+
+*NOTES*
+THIS NEED TO BE INSTALLED IN A SUBFOLDER!
+
+Copy buildConfig.example.json to parent directory and rename it to buildConfig.json
+
+Compiler Flags in the JS Tree are from "Google Closure Compiler"
+
+# Install
+```
+git clone https://git.vstz.dev/versustunez/gulp-dynamic.git build
+cd build
+npm install
+cp buildConfig.example.json ../buildConfig.json
+```
+
+# Config
+### Variables
+| Key   | VALUE               |
+|-------|---------------------|
+| $dir  | ROOT DIR            |
+| $src  | SRC FROM Config     |
+| $out  | OUT FROM CONFIG     |
+| $name | NAME KEY FROM BLOCK |
+| $     | BLOCK INPUT VALUE   |
+|-------|---------------------|
+
+### ROOT
+| Key  | isRequired | TYPE   |
+|------|------------|--------|
+| src  | YES        | STRING |
+| out  | YES        | STRING |
+| js   | NO         | ARRAY  |
+| scss | NO         | ARRAY  |
+
+### JS-Array
+| Key        | isRequired | TYPE   | DEFAULT               |
+|------------|------------|--------|-----------------------|
+| name       | YES        | STRING | -                     |
+| minify     | NO         | BOOL   | false                 |
+| onlyMinify | NO         | BOOL   | false                 |
+| input      | YES        | STRING | -                     |
+| output     | YES        | STRING | -                     |
+| files      | YES        | ARRAY  | -                     |
+| compiler   | NO         | OBJECT | #JS-Compiler Settings |
+
+### JS-Compiler Settings
+| Key               | isRequired | TYPE   | DEFAULT               |
+|-------------------|------------|--------|-----------------------|
+| compilation_level | NO         | STRING | SIMPLE                |
+| warning_level     | NO         | STRING | VERBOSE               |
+| language_in       | NO         | STRING | ECMASCRIPT6_STRICT    |
+| language_out      | NO         | STRING | ECMASCRIPT6_STRICT    |
+| js_output_file    | NO         | STRING | $name.min.js          |
+
+*NOTES* SEE: [Google Compiler Flags](https://github.com/google/closure-compiler/wiki/Flags-and-Options)
+
+## Example Config
+```json
+{
+  "src": "$dir/src",
+  "out": "$dir/public/out",
+  "js": [
+    {
+      "name": "main",
+      "minify": true,
+      "onlyMinify": true,
+      "input": "$src/js/",
+      "output": "$out/js/",
+      "files": [
+        "app.js"
+      ],
+      "compiler": {
+        "compilation_level": "ADVANCED",
+        "warning_level": "VERBOSE",
+        "language_in": "ECMASCRIPT6_STRICT",
+        "language_out": "ECMASCRIPT6_STRICT",
+        "js_output_file": "$name.min.js"
+      }
+    }
+  ],
+  "scss": [
+    {
+      "name": "main",
+      "input": "$src/theme/**/*.scss",
+      "output": "$out/theme/$name"
+    }
+  ]
+}
+```

build/buildConfig.example.json

@@ -0,0 +1,30 @@
+  {
+  "src": "$dir/src",
+  "out": "$dir/public/out",
+  "js": [
+    {
+      "name": "main",
+      "minify": true,
+      "onlyMinify": true,
+      "input": "$src/js/",
+      "output": "$out/js/",
+      "files": [
+        "app.js"
+      ],
+      "compiler": {
+        "compilation_level": "ADVANCED",
+        "warning_level": "VERBOSE",
+        "language_in": "ECMASCRIPT6_STRICT",
+        "language_out": "ECMASCRIPT6_STRICT",
+        "js_output_file": "$name.min.js"
+      }
+    }
+  ],
+  "scss": [
+    {
+      "name": "main",
+      "input": "$src/theme/**/*.scss",
+      "output": "$out/theme/$name"
+    }
+  ]
+}

build/gulpfile.js

@@ -0,0 +1,20 @@
+const gulp = require('gulp'),
+    config = require('./tools/buildConfig'),
+    smartJS = require('./task/smartjs'),
+    smartIcon = require('./task/smarticon'),
+    smartCss = require('./task/smartcss');
+
+config.prepare();
+smartJS.prepare(config);
+smartCss.prepare(config);
+smartIcon.prepare(config);
+
+gulp.task('watchMe', () => {
+    smartJS.startWatch();
+    smartCss.startWatch();
+    smartIcon.startWatch();
+});
+
+gulp.task('default', gulp.parallel([...smartJS.build(), ...smartCss.build(), ...smartIcon.build()]));
+
+gulp.task('watch', gulp.parallel(['watchMe', ...smartJS.build(), ...smartCss.build(), ...smartIcon.build()]));

build/index.js

@@ -0,0 +1,10 @@
+const gulp = require('gulp-cli'),
+  shouldWatch = process.argv.length > 2 && process.argv[2] === 'watch';
+
+gulp()
+require('./gulpfile')
+if (shouldWatch) {
+  gulp.series('watchMe')();
+} else {
+  gulp.series('default')();
+}

build/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "v-build",
+  "version": "1.0.0",
+  "description": "A Small Gulp Build System for Dynamic JS and SCSs",
+  "main": "index.js",
+  "scripts": {
+    "build-nm": "./node_modules/gulp-cli/bin/gulp.js",
+    "watch-nm": "./node_modules/gulp-cli/bin/gulp.js watch",
+    "build": "gulp",
+    "watch": "gulp watch"
+  },
+  "keywords": [
+    "GULP",
+    "JS",
+    "SCSS"
+  ],
+  "author": "Maurice Grönwoldt",
+  "license": "GPL-3.0-or-later",
+  "dependencies": {
+    "google-closure-compiler": "^20210202.0.0",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-cli": "^2.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-sass": "^4.1.0",
+    "node-fs-extra": "^0.8.2",
+    "svg-sprite": "^1.5.0"
+  }
+}

build/task/smartcss.js

@@ -0,0 +1,58 @@
+const gulp = require('gulp'),
+  HelperUnit = require('./../tools/helperUnit'),
+  sass = require('gulp-sass'),
+  clean = require('gulp-clean-css'),
+  path = require('path'),
+  workers = [];
+
+class SCSSWorker {
+  constructor(config, helper) {
+    this.config = config;
+    this.helper = helper.clone();
+    this.input = this.helper.replaceVariables(this.config.input);
+    this.watchInput = '.' + this.helper.replaceAbsolutePath(this.input);
+    this.helper.addConfigItem("$name", this.config.name);
+    this.helper.addConfigItem("$watch", this.watchInput);
+    this.helper.addConfigItem("$", this.input);
+    this.out = this.helper.replaceVariables(this.config.output);
+    this.watch = this.helper.replaceVariables(this.config.watch || '$watch');
+    gulp.task(this.taskName, this.work.bind(this));
+  }
+
+  startWatch() {
+    console.log(`[WATCH][${this.config.name}] >> ${this.watch}`);
+    gulp.watch(this.watch, gulp.series(this.taskName))
+  }
+
+  get taskName() {
+    return `scss-${this.config.name || 'unknown'}`;
+  }
+
+  work() {
+    return gulp.src(this.input)
+      .pipe(sass().on('error', sass.logError))
+      .pipe(clean())
+      .pipe(gulp.dest(this.out));
+  }
+}
+
+module.exports = {
+  build: function () {
+    let array = [];
+    for (let worker of workers) {
+      array.push(worker.taskName);
+    }
+    return array;
+  },
+  prepare: function (config) {
+    const scss = config.scss || [];
+    for (let scssItem of scss) {
+      workers.push(new SCSSWorker(scssItem, config.helper));
+    }
+  },
+  startWatch: function () {
+    for (let worker of workers) {
+      worker.startWatch();
+    }
+  }
+}

build/task/smarticon.js

@@ -0,0 +1,53 @@
+const gulp = require('gulp'),
+    builder = require('./../tools/iconSprite'),
+    workers = [];
+
+class IconWorker {
+    constructor(icon, helper) {
+        this.config = icon;
+        this.helper = helper.clone();
+        this.input = this.helper.replaceVariables(this.config.input);
+        this.watchInput = '.' + this.helper.replaceAbsolutePath(this.input);
+        this.helper.addConfigItem("$name", this.config.name);
+        this.helper.addConfigItem("$watch", this.watchInput);
+        this.helper.addConfigItem("$", this.input);
+        this.out = this.helper.replaceVariables(this.config.output);
+        this.watch = this.helper.replaceVariables(this.config.watch || '$watch');
+        gulp.task(this.taskName, this.work.bind(this));
+    }
+
+    startWatch() {
+        console.log(`[WATCH][${this.config.name}] >> ${this.watch}`);
+        gulp.watch(this.watch, gulp.series(this.taskName))
+    }
+
+    get taskName() {
+        return `icon-${this.config.name}`;
+    }
+
+    work() {
+        builder.buildIconSprites(this);
+        return gulp.src(this.input)
+    }
+}
+
+module.exports = {
+    build: function () {
+        let array = [];
+        for (let worker of workers) {
+            array.push(worker.taskName);
+        }
+        return array;
+    },
+    prepare: function (config) {
+        const icons = config.icons || [];
+        for (let icon of icons) {
+            workers.push(new IconWorker(icon, config.helper));
+        }
+    },
+    startWatch: function () {
+        for (let worker of workers) {
+            worker.startWatch();
+        }
+    }
+}

build/task/smartjs.js

@@ -0,0 +1,116 @@
+const closureCompiler = require('google-closure-compiler').gulp(),
+    concat = require('gulp-concat'),
+    gulp = require('gulp'),
+    path = require('path'),
+    fileInclude = require('./../tools/file-includer'),
+    workers = [];
+
+class JSWorker {
+    constructor(config, helper) {
+        this.config = config;
+        this.helper = helper.clone();
+        if (!this.config.name) {
+            throw Error("Found Empty name for JS Job...");
+        }
+        this.validateConfig();
+        this.input = this.helper.replaceVariables(this.config.input);
+        this.watchInput = '.' + this.helper.replaceAbsolutePath(this.input);
+        this.helper.addConfigItem("$name", this.config.name);
+        this.helper.addConfigItem("$watch", this.watchInput)
+        this.helper.addConfigItem("$", this.input);
+        this.getCompilerConfig();
+        this.out = this.helper.replaceVariables(this.config.output);
+        this.watch = this.helper.replaceVariables(this.config.watch || '$watch/**/*.js');
+        if (this.config.includeFile) {
+            this.includeFile = `${this.input}/${this.config.includeFile}`;
+        }
+        this.prepareFiles()
+        this.path = path.parse(this.out);
+        this.path = this.path.dir + "/" + this.path.base + "/";
+        gulp.task(this.taskName, this.work.bind(this));
+    }
+
+    validateConfig() {
+        let config = this.config;
+        config.onlyMinify = config.onlyMinify || false;
+        config.minify = config.minify || false;
+        if (!this.config.input || !this.config.output || !(this.config.files || this.config.includeFile)) {
+            throw Error("Invalid Config for: " + this.config.name + ")");
+        }
+    }
+
+    getCompilerConfig() {
+        this.compiler = {
+            compilation_level: 'SIMPLE',
+            warning_level: 'VERBOSE',
+            language_in: 'ECMASCRIPT6_STRICT',
+            language_out: 'ECMASCRIPT6_STRICT',
+            js_output_file: this.config.name + ".min.js"
+        }
+        if (this.config.compiler) {
+            this.compiler = Object.assign(this.compiler, this.config.compiler);
+        }
+        this.compiler.js_output_file = this.helper.replaceVariables(this.compiler.js_output_file);
+    }
+
+    startWatch() {
+        console.log(`[WATCH][${this.config.name}] >> ${this.watch}`);
+        const watchArray = [this.watch];
+        if (this.includeFile) {
+            watchArray.push(this.includeFile);
+        }
+        gulp.watch(watchArray, gulp.parallel([this.taskName]));
+    }
+
+    get taskName() {
+        return `js-${this.config.name}`;
+    }
+
+    prepareFiles() {
+        if (this.config.includeFile) {
+            this.files = fileInclude.findFiles(this.input, this.includeFile, this.helper);
+        } else {
+            this.files = [];
+            for (const file of this.config.files) {
+                this.files.push(this.input + "/" + this.helper.replaceVariables(file));
+            }
+        }
+    }
+
+    work() {
+        if (this.config.includeFile) {
+            this.prepareFiles();
+        }
+        let d = gulp.src(this.files).pipe(concat(this.config.name + '.js'))
+        if (!this.config.onlyMinify) {
+            d.pipe(gulp.dest(this.path));
+        }
+        if (this.config.minify) {
+            d.pipe(closureCompiler(this.compiler)).pipe(gulp.dest(this.path));
+        }
+        return d;
+    }
+}
+
+module.exports = {
+    build: function () {
+        let array = [];
+        for (let worker of workers) {
+            array.push(worker.taskName);
+        }
+        return array;
+    },
+    prepare: function (config) {
+        // we load the json and parse it here
+        const js = config.js || [];
+        for (let jsConfig of js) {
+            const worker = new JSWorker(jsConfig, config.helper);
+            workers.push(worker);
+        }
+    },
+    startWatch: function () {
+        for (let worker of workers) {
+            worker.startWatch();
+        }
+    }
+}

build/tools/buildConfig.js

@@ -0,0 +1,36 @@
+const fs = require('fs'),
+  HelperUnit = require('./helperUnit'),
+  helper = new HelperUnit(),
+  config = {};
+
+module.exports = {
+  config: config,
+  helper: helper,
+  prepare: function () {
+    if (!fs.existsSync(__dirname + '/../../buildConfig.json')) {
+      console.error("Cannot find Config JSON");
+      process.exit(40);
+    }
+    const currentPath = process.cwd();
+    const baseDir = currentPath + '/../';
+    const data = JSON.parse(fs.readFileSync(currentPath + '/../buildConfig.json').toString());
+    const src = data['src'].replace(/(\$dir)/gm, baseDir);
+    const out = data['out'].replace(/(\$dir)/gm, baseDir);
+    helper.setConfig({
+      $dir: baseDir,
+      $out: out,
+      $src: src,
+      $rawDir: __dirname,
+      $forWatch: data['src'].replace(/(\$dir)/gm, '../')
+    })
+    config.dir = baseDir;
+    config.src = src;
+    config.out = out;
+    config.js = data.js || [];
+    config.scss = data.scss || [];
+    config.icons = data.icons || [];
+    this.js = config.js;
+    this.scss = config.scss;
+    this.icons = config.icons;
+  }
+}

build/tools/file-includer.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+
+function findFiles(dir, file, helper) {
+    file = helper.replaceVariables(file);
+    const d = fs.readFileSync(file).toString("UTF8");
+    const split = d.split("\n");
+    let files = [];
+    for (let file of split) {
+        if (file.startsWith("--") || file.trim() === "" || file.startsWith("#")) {
+            continue;
+        }
+        if (file.startsWith("@import")) {
+            let iFile = file.split("@import")[1].trim();
+            files.push(...this.findFiles(dir, `${dir}/${iFile}.path`, helper));
+        } else {
+            files.push(`${dir}/${helper.replaceVariables(file)}.js`);
+        }
+    }
+    return files;
+}
+
+module.exports = {
+    findFiles
+};

build/tools/helperUnit.js

@@ -0,0 +1,57 @@
+let inConfig = {
+  $dir: __dirname,
+  $out: __dirname,
+  $src: __dirname,
+  $: __dirname
+}
+
+class HelperUnit {
+  constructor(config = null) {
+    this.config = config || inConfig;
+    this.regEx = {};
+    this.buildRegex();
+  }
+
+  static setGlobalConfig(config) {
+    inConfig = config;
+  }
+
+  addConfigItem(name, value, regexOnly = false) {
+    if (!regexOnly) {
+      this.config[name] = value;
+    }
+    let replace = name.replace("$", "\\$");
+    this.regEx[name] = new RegExp(`(${replace})`, "gm");
+  }
+
+  setConfig(config) {
+    this.config = config;
+    this.buildRegex();
+  }
+
+  buildRegex() {
+    const keys = Object.keys(this.config);
+    this.regEx = {};
+    for (const key of keys) {
+      this.addConfigItem(key, null, true);
+    }
+  }
+
+  replaceVariables(string) {
+    const keys = Object.keys(this.config);
+    for (const key of keys) {
+      string = string.replace(this.regEx[key], this.config[key]);
+    }
+    return string;
+  }
+
+  replaceAbsolutePath(string) {
+    string = string.replace(this.config["$dir"], this.config["$forWatch"])
+    return string;
+  }
+
+  clone() {
+    return new HelperUnit(this.config);
+  }
+}
+module.exports = HelperUnit;

build/tools/iconSprite.js

@@ -0,0 +1,71 @@
+const path = require('path'),
+    SVGSpriter = require('svg-sprite'),
+    fs = require('fs'),
+    fsExtra = require('node-fs-extra');
+
+let toMergeData = [];
+
+function buildIconSprites(config) {
+    config.spriter = {
+        shape: {
+            id: {
+                generator: function (name) {
+                    return "vt-" + name.replace('.svg', '');
+                }
+            }
+        },
+        svg: {
+            xmlDeclaration: true,
+            doctypeDeclaration: true
+        },
+        mode: {
+            symbol: true,
+            defs: true
+        }
+    }
+
+    builder.init(config);
+    builder.generateFromIcons();
+}
+
+let builder = {
+    init: function (config) {
+        this.config = config;
+    },
+    generateFromIcons: function () {
+        const spriter = new SVGSpriter(this.config.spriter);
+        this.readFiles(this.config.input, spriter);
+        spriter.compile(function (error, result) {
+            if (error !== null) {
+                throw new Error(error);
+            }
+            builder.writeData(result.symbol.sprite.contents.toString());
+        });
+    },
+
+    writeData: function (data) {
+        let out = builder.config.out + builder.config.config.name + ".svg";
+        let dirname = path.dirname(out);
+        if (!fs.existsSync(dirname)) {
+            fsExtra.mkdirpSync(dirname);
+        }
+        fs.writeFileSync(out, data);
+    },
+
+    readFiles: function (dir, spriter) {
+        let files = fs.readdirSync(dir);
+        for (let file of files) {
+            const split = file.split('.');
+            if (split[split.length - 1] === 'svg') {
+                let filePath = path.resolve(dir, file);
+                spriter.add(
+                    filePath,
+                    file,
+                    fs.readFileSync(filePath, {encoding: 'utf-8'})
+                );
+            }
+        }
+    }
+};
+
+module.exports.buildIconSprites = buildIconSprites;