Aktualizovaná verze s webpack a gulp

.gitignore

@@ -3,4 +3,4 @@ dist/
 dist/**/*
 node_modules
 .idea/
-
+.DS_Store

.prettierignore

@@ -0,0 +1,4 @@
+dist/
+*.md
+*.json
+*.yml

.prettierrc

@@ -0,0 +1,23 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    },
+    {
+      "files": "{.vscode/*.json,**/tsconfig.json,**/tsconfig.*.json}",
+      "options": {
+        "parser": "json5",
+        "quoteProps": "preserve",
+        "singleQuote": false,
+        "trailingComma": "none"
+      }
+    }
+  ]
+}

cli.js

@@ -3,17 +3,16 @@ import { packageInfo } from './config.js';
 
 const command = new Command();
 
-command
-    .name(packageInfo.name)
-    .description(packageInfo.description)
-    .version(packageInfo.version);
+command.name(packageInfo.name).description(packageInfo.description).version(packageInfo.version);
 
 command
-    .option('-r, --remote <url>', 'URL of the remote Eshop with https:// prefix')
-    .option('-w, --watch', 'watch for changes and reload the page', true)
-    .option('-b, --blankMode', 'simulate the blank template.', false)
-    .option('-n, --notify', 'display pop-over notifications in the browser', false)
-    .option('-rh, --removeHeaderIncludes [removeHeaderIncludes...]', 'remove header includes', false)
-    .option('-rf, --removeFooterIncludes [removeFooterIncludes...]', 'remove footer includes', false);
+  .option('-r, --remote <url>', 'URL of the remote Eshop with https:// prefix')
+  .option('-w, --watch', 'watch for changes and reload the page', true)
+  .option('-b, --blankMode', 'simulate the blank template.', false)
+  .option('-n, --notify', 'display pop-over notifications in the browser', false)
+  .option('-rh, --removeHeaderIncludes [removeHeaderIncludes...]', 'remove header includes', false)
+  .option('-rf, --removeFooterIncludes [removeFooterIncludes...]', 'remove footer includes', false)
+  .option('-bl, --builder <type>', 'Specify the builder to use (webpack or gulp)')
+  .option('-o, --open', 'open browser after first build process', false);
 
 export default command;

config.js

@@ -1,10 +1,6 @@
 import { readFileSync } from 'fs';
 import path from 'path';
 
-export const packageInfo = JSON.parse(
-    readFileSync(path.resolve(process.cwd(), './package.json'))
-);
+export const packageInfo = JSON.parse(readFileSync(path.resolve(process.cwd(), './package.json')));
 
-export const config = JSON.parse(
-    readFileSync(path.resolve(process.cwd(), './config.json'))
-);
+export const config = JSON.parse(readFileSync(path.resolve(process.cwd(), './config.json')));

config.json

@@ -1,5 +1,10 @@
 {
     "defaultUrl": "https://classic.shoptet.cz/",
     "sourceFolder": "./src",
-    "outputFolder": "./dist"
-}
+    "outputFolder": "./dist",
+    "addonPrefix": "sample-addon",
+    "addonInfo": "This is description of sample addon",
+    "env": {
+        "production": false
+    }
+}

gulpfile.js

@@ -0,0 +1,144 @@
+/* Shoptet Gulpstack, by Klubus Creative */
+
+import { config } from './config.js';
+import path from 'path';
+import gulp from 'gulp';
+import pkg from 'gulp-inject-string';
+import less from 'gulp-less';
+import autoPrefixer from 'gulp-autoprefixer';
+import concat from 'gulp-concat';
+import postcss from 'gulp-postcss';
+import cssnano from 'cssnano';
+import uglify from 'gulp-uglify';
+import javascriptObfuscator from 'gulp-javascript-obfuscator';
+import rename from 'gulp-rename';
+
+const { wrap } = pkg;
+
+export function init(options = {}) {
+  const rootDir = process.cwd();
+  const sourceFolder = path.join(rootDir, config.sourceFolder ?? 'src');
+  const outputFolder = path.join(rootDir, config.outputFolder);
+  const addonPrefix = config.addonPrefix;
+  const addonInfo = config.addonInfo;
+
+  const env = options.env ?? config.env;
+  const isProduction = env?.production === true;
+  const minExtension = isProduction ? '.min' : '';
+
+  // -------------------- TASKS -------------------- //
+  gulp.task('styles-header', function () {
+    let stream = gulp
+      .src([sourceFolder + '/header/css/styles.less'], { allowEmpty: true })
+      .pipe(less())
+      .on('error', function (error) {
+        console.error('Error in styles-header task:', error.message);
+        this.emit('end');
+      })
+      .pipe(autoPrefixer())
+      .pipe(wrap('/* ' + addonInfo + ' */\n\n', ''));
+
+    if (isProduction) {
+      stream = stream.pipe(
+        postcss([
+          cssnano({
+            preset: ['default', { discardComments: { removeAll: true } }],
+          }),
+        ])
+      );
+    }
+
+    return stream
+      .pipe(rename('styles.header' + minExtension + '.css'))
+      .pipe(gulp.dest(outputFolder))
+      .on('end', () => {
+        console.log('Task styles-header has been completed');
+      });
+  });
+
+  gulp.task('styles-footer', function () {
+    let stream = gulp
+      .src([sourceFolder + '/footer/css/styles.less'], { allowEmpty: true })
+      .pipe(less())
+      .on('error', function (error) {
+        console.error('Error in styles-footer task:', error.message);
+        this.emit('end');
+      })
+      .pipe(autoPrefixer())
+      .pipe(wrap('/* ' + addonInfo + ' */\n\n', ''));
+
+    if (isProduction) {
+      stream = stream.pipe(
+        postcss([
+          cssnano({
+            preset: ['default', { discardComments: { removeAll: true } }],
+          }),
+        ])
+      );
+    }
+
+    return stream
+      .pipe(rename('styles.footer' + minExtension + '.css'))
+      .pipe(gulp.dest(outputFolder))
+      .on('end', () => {
+        console.log('Task styles-footer has been completed');
+      });
+  });
+
+  gulp.task('scripts-header', function () {
+    let stream = gulp
+      .src([sourceFolder + '/header/js/**/*.js'], { allowEmpty: true })
+      .pipe(concat('scripts.header' + minExtension + '.js'))
+      .pipe(wrap('var ' + addonPrefix + ' = {};(function (' + addonPrefix + ') {\n\n', '\n\n})(' + addonPrefix + ');'))
+      .pipe(wrap('/* ' + addonInfo + ' */ \n\n', ''));
+
+    if (isProduction) {
+      stream = stream
+        .pipe(uglify())
+        .on('error', function (error) {
+          console.error('Error in scripts-header task:', error.message);
+          this.emit('end');
+        })
+        .pipe(javascriptObfuscator());
+    }
+
+    return stream.pipe(gulp.dest(outputFolder)).on('end', () => {
+      console.log('Task scripts-header has been completed');
+    });
+  });
+
+  gulp.task('scripts-footer', function () {
+    let stream = gulp
+      .src([sourceFolder + '/footer/js/**/*.js'], { allowEmpty: true })
+      .pipe(concat('scripts.footer' + minExtension + '.js'))
+      .pipe(wrap('var ' + addonPrefix + ' = {};(function (' + addonPrefix + ') {\n\n', '\n\n})(' + addonPrefix + ');'))
+      .pipe(wrap('/* ' + addonInfo + ' */ \n\n', ''));
+
+    if (isProduction) {
+      stream = stream
+        .pipe(uglify())
+        .on('error', function (error) {
+          console.error('Error in scripts-footer task:', error.message);
+          this.emit('end');
+        })
+        .pipe(javascriptObfuscator());
+    }
+
+    return stream.pipe(gulp.dest(outputFolder)).on('end', () => {
+      console.log('Task scripts-footer has been completed');
+    });
+  });
+
+  // -------------------- EXPORTS -------------------- //
+  const build = gulp.series('styles-header', 'styles-footer', 'scripts-header', 'scripts-footer');
+
+  function watchFn() {
+    console.log('Starting watcher...');
+    gulp.watch(sourceFolder + '/header/css/**/*.less', gulp.series('styles-header'));
+    gulp.watch(sourceFolder + '/footer/css/**/*.less', gulp.series('styles-footer'));
+    gulp.watch(sourceFolder + '/header/js/**/*.js', gulp.series('scripts-header'));
+    gulp.watch(sourceFolder + '/footer/js/**/*.js', gulp.series('scripts-footer'));
+  }
+
+  return { build, watch: watchFn };
+}