added gulp build

gulpfile.js

@@ -3,7 +3,6 @@
 /* eslint-disable no-undef */
 /* eslint-disable unicorn/prefer-module */
 
-// const autoprefixer = require('autoprefixer')
 const browserSync = require('browser-sync').create()
 const cleanCss = require('gulp-clean-css')
 const del = require('del')
@@ -12,12 +11,12 @@ const npmDist = require('gulp-npm-dist')
 const sass = require('gulp-sass')
 const wait = require('gulp-wait')
 const postcss = require('gulp-postcss')
-// const rtlcss = require('rtlcss')
+const rename = require('gulp-rename')
 const sourcemaps = require('gulp-sourcemaps')
 const fileinclude = require('gulp-file-include')
-
 const esbuild = require('esbuild')
-// const { getTarget } = require('./get.browserslist.target')
+
+sass.compiler = require('sass')
 
 const pkg = require('./package')
 const year = new Date().getFullYear()
@@ -64,7 +63,12 @@ const paths = {
   }
 }
 
-function postcssCallback() {
+const sassOptions = {
+  outputStyle: 'expanded',
+  includePaths: ['./node_modules/']
+}
+
+function postcssOptions() {
   return {
     map: {
       inline: false,
@@ -79,16 +83,29 @@ function postcssCallback() {
   }
 }
 
+function postcssRtlOptions() {
+  return {
+    map: {
+      inline: false,
+      annotation: true,
+      sourcesContent: true
+    },
+    plugins: [
+      require('autoprefixer')({
+        cascade: false
+      }),
+      require('rtlcss')({})
+    ]
+  }
+}
+
 // Compile SCSS
 gulp.task('scss', () => {
   return gulp.src(paths.src.scss + '/adminlte.scss')
       .pipe(wait(500))
       .pipe(sourcemaps.init())
-      .pipe(sass({
-        outputStyle: 'expanded',
-        includePaths: ['./node_modules/']
-      }).on('error', sass.logError))
-      .pipe(postcss(postcssCallback))
+      .pipe(sass(sassOptions).on('error', sass.logError))
+      .pipe(postcss(postcssOptions))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(paths.temp.css))
       .pipe(browserSync.stream())
@@ -101,7 +118,6 @@ gulp.task('ts', () => {
       js: banner
     },
     bundle: true,
-    color: true,
     format: 'iife',
     sourcemap: true,
     target: ['chrome60'],
@@ -161,14 +177,31 @@ gulp.task('serve', gulp.series('scss', 'ts', 'html', 'index', 'assets', 'vendor'
 }))
 
 // Minify CSS
-gulp.task('minify:css', () => {
+gulp.task('minify:dist:css', () => {
   return gulp.src([
-    paths.dist.css + '/adminlte.css'
-  ])
+    paths.dist.css + '/**/*.css'
+  ], { base: paths.dist.css })
+  .pipe(sourcemaps.init({ loadMaps: true }))
   .pipe(cleanCss())
+  .pipe(rename({ suffix: '.min' }))
+  .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest(paths.dist.css))
 })
 
+// Minify JS
+gulp.task('minify:dist:js', () => {
+  return esbuild.build({
+    entryPoints: [paths.dist.js + '/adminlte.js'],
+    format: 'iife',
+    minify: true,
+    sourcemap: true,
+    target: ['chrome60'],
+    outfile: paths.dist.js + '/adminlte.min.js'
+  }).catch(
+    error => console.error(error)
+  )
+})
+
 // Copy assets
 gulp.task('copy:dist:assets', () => {
   return gulp.src(paths.src.assets)
@@ -185,15 +218,52 @@ gulp.task('copy:dist:css', () => {
   return gulp.src([paths.src.scss + '/adminlte.scss'])
       .pipe(wait(500))
       .pipe(sourcemaps.init())
-      .pipe(sass({
-        outputStyle: 'expanded',
-        includePaths: ['./node_modules/']
-      }).on('error', sass.logError))
-      .pipe(postcss(postcssCallback))
+      .pipe(sass(sassOptions).on('error', sass.logError))
+      .pipe(postcss(postcssOptions))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(paths.dist.css))
 })
 
+gulp.task('copy:dist:css:dark', () => {
+  return gulp.src([paths.src.scss + '/dark/*.scss'])
+      .pipe(wait(500))
+      .pipe(sourcemaps.init())
+      .pipe(sass(sassOptions).on('error', sass.logError))
+      .pipe(postcss(postcssOptions))
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(paths.dist.css + '/dark'))
+})
+
+gulp.task('copy:dist:css:rtl', () => {
+  return gulp.src([
+    paths.dist.css + '/*.css',
+    paths.dist.css + '/dark/*.css'
+  ])
+      .pipe(wait(500))
+      .pipe(sourcemaps.init({ loadMaps: true }))
+      .pipe(postcss(postcssRtlOptions))
+      .pipe(rename({ suffix: '.rtl' }))
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(paths.dist.css + '/rtl'))
+})
+
+// Compile and copy ts/js
+gulp.task('copy:dist:js', () => {
+  return esbuild.build({
+    entryPoints: [paths.src.ts + '/adminlte.ts'],
+    banner: {
+      js: banner
+    },
+    bundle: true,
+    format: 'iife',
+    sourcemap: true,
+    target: ['chrome60'],
+    outfile: paths.dist.js + '/adminlte.js'
+  }).catch(
+    error => console.error(error)
+  )
+})
+
 // Copy Html
 gulp.task('copy:dist:html', () => {
   return gulp.src([paths.src.html])
@@ -226,7 +296,7 @@ gulp.task('copy:dist:vendor', () => {
     .pipe(gulp.dest(paths.dist.vendor))
 })
 
-gulp.task('build', gulp.series('clean:dist', 'copy:dist:css', 'copy:dist:html', 'copy:dist:html:index', 'copy:dist:assets', 'copy:dist:vendor'))
+gulp.task('build', gulp.series('clean:dist', 'copy:dist:css', 'copy:dist:css:dark', 'copy:dist:css:rtl', 'minify:dist:css', 'copy:dist:js', 'minify:dist:js', 'copy:dist:html', 'copy:dist:html:index', 'copy:dist:assets', 'copy:dist:vendor'))
 
 // Default
 gulp.task('default', gulp.series('serve'))

package-lock.json

@@ -3021,9 +3021,9 @@
       }
     },
     "esbuild": {
-      "version": "0.11.21",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.21.tgz",
-      "integrity": "sha512-FqpYdJqiTeLDbj3vqxc/fG8UmHIEvQrDaUxSw1oJf4giLd/tnMDUUlXellCjOab7qGKQ5hUFD5eQgmO+tkZeow==",
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz",
+      "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==",
       "dev": true
     },
     "escalade": {
@@ -5149,6 +5149,12 @@
         }
       }
     },
+    "gulp-rename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-2.0.0.tgz",
+      "integrity": "sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==",
+      "dev": true
+    },
     "gulp-sass": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz",

package.json

@@ -7,38 +7,11 @@
   "main": "dist/js/adminlte.min.js",
   "scripts": {
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css-all": "npm-run-all css css-splits",
-    "css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits",
-    "css": "npm-run-all css-compile css-prefix css-minify",
-    "css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css",
-    "css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css",
-    "css-compile-splits": "npm-run-all --parallel css-compile-dark-splits",
-    "css-compile-dark-splits": "npm run css-compile-bash -- scss/dark/:dist/css/dark/",
-    "css-prefix-bash": "postcss --config build/postcss.config.js --replace",
-    "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/dark/*.css\" \"!dist/css/rtl/*.css\"",
-    "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/**/*.css\" \"!dist/css/rtl/*.css\" \"!dist/css/**/*.min.css\"",
-    "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css/rtl\" --ext \".rtl.css\" \"dist/css/*.css\" \"dist/css/**/*.css\" \"!dist/css/**/*.rtl.css\" \"!dist/css/*.min.css\" \"!dist/css/**/*.min.css\"",
-    "css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ",
-    "css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "css-minify-splits": "npm-run-all --parallel css-minify-split:dark css-minify-split:rtl",
-    "css-minify-split:dark": "npm run css-minify-bash -- dist/css/dark/ --batch --batch-suffix \".min\" \"dist/css/dark/*.css\" \"!dist/css/dark/*.min.css\"",
-    "css-minify-split:rtl": "npm run css-minify-bash -- dist/css/rtl/ --batch --batch-suffix \".min\" \"dist/css/rtl/*.css\" \"!dist/css/rtl/*.min.css\"",
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
-    "dev": "npm-run-all --parallel watch sync",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "js": "npm-run-all js-compile js-minify",
-    "js-compile": "npm-run-all --parallel ts:build ts:type-check",
-    "ts:build": "node build/esbuild.config.js",
     "ts:type-check": "tsc --noEmit",
-    "js-minify": "esbuild dist/js/adminlte.js --minify --sourcemap --outfile=dist/js/adminlte.min.js",
     "js-lint": "eslint --ext=js,ts --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
-    "lint": "npm-run-all --continue-on-error --parallel css-lint js-lint lockfile-lint",
-    "compile": "npm-run-all --parallel css js",
-    "production": "npm-run-all --parallel css-all js",
-    "sync": "browser-sync start --server --files *.html pages/ dist/",
-    "watch": "concurrently \"npm:watch-*\"",
-    "watch-css": "nodemon --watch scss -e scss -x \"npm-run-all css-compile css-prefix\"",
-    "watch-js": "nodemon --watch ts -e ts -x \"npm-run-all js-compile\""
+    "lint": "npm-run-all --continue-on-error --parallel css-lint js-lint lockfile-lint"
   },
   "keywords": [
     "css",
@@ -76,7 +49,7 @@
     "concurrently": "^6.1.0",
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
-    "esbuild": "^0.11.21",
+    "esbuild": "^0.11.23",
     "eslint": "^7.26.0",
     "eslint-config-xo": "^0.36.0",
     "eslint-config-xo-typescript": "^0.41.1",
@@ -87,6 +60,7 @@
     "gulp-file-include": "^2.3.0",
     "gulp-npm-dist": "^1.0.3",
     "gulp-postcss": "^9.0.0",
+    "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-wait": "0.0.2",

src/partials/dashboard/_sidenav.html

@@ -2,7 +2,7 @@
 <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
   <div class="brand-container">
     <a href="#" class="brand-link">
-      <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
+      <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
     <a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
@@ -49,7 +49,7 @@
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href="./pages/forms/general.html" class="nav-link">
+              <a href="@@path/pages/forms/general.html" class="nav-link">
                 <i class="nav-icon far fa-circle"></i>
                 <p>
                   General Elements