Improve application layout and rendering

.gitignore

@@ -6,4 +6,5 @@ node/
 .settings/
 .vscode/
 .DS_Store
+.tool-versions
 src/test/cypress/screenshots/

gulpfile.js

@@ -3,7 +3,50 @@
  */
 const { src, dest, series, parallel } = require("gulp");
 const del = require("delete");
-// const gulpEsbuild = require("gulp-esbuild");
+const rename = require('gulp-rename')
+const header = require('gulp-header')
+
+// Styles
+const sass = require('gulp-sass')(require('sass'))
+const prefix = require('gulp-autoprefixer')
+const minify = require('gulp-cssnano')
+const sourcemaps = require('gulp-sourcemaps')
+
+// SVGs
+const svgmin = require('gulp-svgmin')
+
+const pkg = require('./package.json')
+
+
+const settings = {
+  clean: true,
+  scripts: true,
+  hjs: false,
+  polyfills: false,
+  styles: true,
+  svgs: true,
+  vendor: true
+}
+
+/**
+ * Template for banner to add to file headers
+ */
+
+const banner = {
+  full: '/*!\n' +
+    ' * <%= package.name %> v<%= package.version %>\n' +
+    ' * <%= package.description %>\n' +
+    ' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
+    ' * <%= package.license %> License\n' +
+    ' * <%= package.repository.url %>\n' +
+    ' */\n\n',
+  min: '/*!' +
+    ' <%= package.name %> v<%= package.version %>' +
+    ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
+    ' | <%= package.license %> License' +
+    ' | <%= package.repository.url %>' +
+    ' */\n'
+}
 
 const paths = {
   input: "src/main/xar-resources/resources",
@@ -18,7 +61,7 @@ const paths = {
       "target/generated-resources/frontend/xar-resources/resources/scripts/",
   },
   styles: {
-    input: "src/main/xar-resources/resources/css/*",
+    input: "src/main/frontend/sass/*",
     output: "target/generated-resources/frontend/xar-resources/resources/css/",
   },
   fonts: {
@@ -36,12 +79,16 @@ const paths = {
       "node_modules/zero-md/dist/index.min.js"
     ],
     styles: [
-      "src/main/xar-resources/resources/css/*",
       "node_modules/bootstrap/dist/css/bootstrap.min.*",
-      "node_modules/@highlightjs/cdn-assets/styles/atom-one-dark.min.css"
+      "node_modules/@highlightjs/cdn-assets/styles/atom-one-dark.min.css",
+      "node_modules/@neos21/bootstrap3-glyphicons/dist/css/*"
     ],
     fonts: ["node_modules/@neos21/bootstrap3-glyphicons/dist/fonts/*"],
   },
+  svgs: {
+    input: 'src/main/frontend/svg/*.svg',
+    output: 'target/generated-resources/frontend/xar-resources/resources/images/'
+  },
 };
 
 /**
@@ -52,10 +99,61 @@ function clean(cb) {
 }
 exports.clean = clean;
 
-function styles() {
-  return src(paths.styles.input).pipe(dest(paths.styles.output));
+// Process, lint, and minify Sass files
+function buildStyles (done) {
+  // Make sure this feature is activated before running
+  if (!settings.styles) return done()
+
+  // Run tasks on all Sass files
+  src(paths.styles.input)
+    .pipe(sourcemaps.init())
+    .pipe(sass({
+      outputStyle: 'expanded',
+      sourceComments: true
+    }))
+    .pipe(prefix({
+      cascade: true,
+      remove: true
+    }))
+    // Uncomment if you want the non minified files
+    // .pipe(header(banner.full, {
+    //   package: pkg
+    // }))
+    // .pipe(dest(paths.styles.output))
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(minify({
+      discardComments: {
+        removeAll: true
+      }
+    }))
+    .pipe(header(banner.min, {
+      package: pkg
+    }))
+    .pipe(sourcemaps.write('.'))
+    .pipe(dest(paths.styles.output))
+
+  // Signal completion
+  done()
+}
+exports.styles = buildStyles;
+
+// Optimize SVG files
+function minifySvg(done) {
+  // Make sure this feature is activated before running
+  if (!settings.svgs) return done()
+
+  // Optimize SVG files
+  src(paths.svgs.input)
+    .pipe(svgmin())
+    .pipe(dest(paths.svgs.output))
+
+  // Signal completion
+  done()
 }
-exports.styles = styles;
+
+exports.minifySvg = minifySvg;
 
 /**
  * minify EcmaSript files and put them into 'build/app/js'
@@ -93,6 +191,8 @@ function copyVendorFonts() {
   );
 }
 
+
+
 /**
  * copy vendor scripts, styles and fonts
  */
@@ -103,7 +203,7 @@ const copyStatic = parallel(copyFonts, copyVendorFonts, copyVendorScripts, copyV
 //  composed tasks   //
 // ///////////////// //
 
-const build = series(clean, styles, minifyEs, copyStatic);
+const build = series(clean, buildStyles, minifySvg, minifyEs, copyStatic);
 
 exports.build = build;