From 56ae3769e04d619eb00ab53df0837fe7c9bb3f47 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Tue, 23 Aug 2022 08:44:06 +0200 Subject: [PATCH 1/8] Added building static css/js assets --- .github/workflows/release.yml | 4 ++-- package.json | 1 + webpack/rules/css.js | 8 +++----- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index ee8cac9..bc821fb 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -23,7 +23,7 @@ jobs: - name: Build run: | npm install - npm run build + npm run release zip -r -j static.zip dist/* - name: Get version @@ -43,4 +43,4 @@ jobs: files: static.zip fail_on_unmatched_files: true prerelease: false - draft: false + draft: false \ No newline at end of file diff --git a/package.json b/package.json index 13fdbb9..f3aa210 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "dev": "webpack-dashboard -t 'Project' -- webpack server", "clean": "shx rm -rf ./dist", "build": "npm run clean && cross-env webpack", + "release": "npm run clean && NODE_ENV=production cross-env webpack", "preview": "cross-env webpack server", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:scss": "stylelint ./src/**/*.scss --syntax scss", diff --git a/webpack/rules/css.js b/webpack/rules/css.js index 22222d3..d0125a4 100755 --- a/webpack/rules/css.js +++ b/webpack/rules/css.js @@ -31,7 +31,6 @@ const loaders = [ loader: 'css-loader', options: { sourceMap : manifest.IS_DEVELOPMENT, - // minimize : manifest.IS_PRODUCTION, importLoaders: 1, }, }, @@ -45,10 +44,9 @@ const loaders = [ if (manifest.IS_PRODUCTION) { rule = { test: /\.css$/, - // loader: ExtractTextPlugin({ - // use: loaders, - // }), - use: [ExtractTextPlugin.loader, loaders], + use: [{ + loader: ExtractTextPlugin.loader, + }].concat(loaders), }; } From d05a194d9efa9f69554fc7c0b4dfcbda8dfa2f5f Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Thu, 25 Aug 2022 18:40:01 +0200 Subject: [PATCH 2/8] Added prebuilding minified CSS and JS. --- package.json | 5 +++-- webpack/config.js | 14 ++++++++++++++ webpack/manifest.js | 5 +++-- webpack/rules/sass.js | 20 +++++++++++++------- 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index f3aa210..dbce38d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "dev": "webpack-dashboard -t 'Project' -- webpack server", "clean": "shx rm -rf ./dist", "build": "npm run clean && cross-env webpack", - "release": "npm run clean && NODE_ENV=production cross-env webpack", + "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack", "preview": "cross-env webpack server", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:scss": "stylelint ./src/**/*.scss --syntax scss", @@ -30,6 +30,7 @@ "copy-webpack-plugin": "^9.0.0", "cross-env": "^7.0.3", "css-loader": "^5.2.6", + "css-minimizer-webpack-plugin": "^4.0.0", "eslint": "^7.21.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "^2.23.4", @@ -39,7 +40,7 @@ "node-sass": "^4.14.1", "postcss": "^8.3.4", "postcss-loader": "^6.1.0", - "postcss-preset-env": "^6.7.0", + "postcss-preset-env": "7.8.0", "sass-loader": "^12.1.0", "shx": "^0.3.3", "style-loader": "^2.0.0", diff --git a/webpack/config.js b/webpack/config.js index 8da62a9..a62265e 100755 --- a/webpack/config.js +++ b/webpack/config.js @@ -21,6 +21,8 @@ const rules = require('./rules'), plugins = require('./plugins'); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); // ------------------ // @Entry Point Setup @@ -44,6 +46,17 @@ const resolve = { ], }; +let optimization = {}; + +if (manifest.MINIFY) { + optimization = { + minimize: manifest.MINIFY, + minimizer: [ + new CssMinimizerPlugin(), + new TerserPlugin() + ], + }; +} // ----------------- // @Exporting Module @@ -63,6 +76,7 @@ module.exports = { module: { rules, }, + optimization: optimization, resolve, plugins, devServer, diff --git a/webpack/manifest.js b/webpack/manifest.js index 1c26207..15005c7 100755 --- a/webpack/manifest.js +++ b/webpack/manifest.js @@ -27,8 +27,8 @@ const path = require('path'); const NODE_ENV = process.env.NODE_ENV || 'development', IS_DEVELOPMENT = NODE_ENV === 'development', - IS_PRODUCTION = NODE_ENV === 'production'; - + IS_PRODUCTION = NODE_ENV === 'production', + MINIFY = process.env.MINIFY === 'true' || IS_PRODUCTION; // ------ // @Utils @@ -82,4 +82,5 @@ module.exports = { NODE_ENV, IS_DEVELOPMENT, IS_PRODUCTION, + MINIFY }; diff --git a/webpack/rules/sass.js b/webpack/rules/sass.js index ebbbbff..d98086c 100755 --- a/webpack/rules/sass.js +++ b/webpack/rules/sass.js @@ -16,8 +16,8 @@ const manifest = require('../manifest'), path = require('path'), - cssNext = require('postcss-preset-env'); - + cssNext = require('postcss-preset-env'), + ExtractTextPlugin = require('mini-css-extract-plugin'); // --------------- // @Common Loaders @@ -55,15 +55,21 @@ const loaders = [ path.join(manifest.paths.src, ''), ], }, - }, - }, + } + } ]; +if (manifest.IS_PRODUCTION) { + loaders.unshift(ExtractTextPlugin.loader); +} else { + loaders.unshift({ + loader: 'style-loader', + }); +} + const rule = { test: /\.scss$/, - use: [{ - loader: 'style-loader', - }].concat(loaders), + use: loaders }; // ----------------- From 64e792f8a16cc76a066aec6d1e039a1b7c24cafb Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Thu, 25 Aug 2022 19:08:49 +0200 Subject: [PATCH 3/8] Added unminified statics. SCSS is still minified for some reason --- .github/workflows/release.yml | 6 ++++-- package.json | 1 + webpack/config.js | 24 +++++++++++------------- webpack/manifest.js | 2 +- webpack/rules/sass.js | 3 +-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index bc821fb..4bc288a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -23,8 +23,10 @@ jobs: - name: Build run: | npm install - npm run release - zip -r -j static.zip dist/* + npm run release:minified + zip -r -j static_minified.zip dist/* + npm run release:unminified + zip -r -j static_unminified.zip dist/* - name: Get version run: echo "::set-output name=version::v$(./ci/getVersion.sh)" diff --git a/package.json b/package.json index dbce38d..0b066ca 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "clean": "shx rm -rf ./dist", "build": "npm run clean && cross-env webpack", "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack", + "release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack", "preview": "cross-env webpack server", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:scss": "stylelint ./src/**/*.scss --syntax scss", diff --git a/webpack/config.js b/webpack/config.js index a62265e..007dacf 100755 --- a/webpack/config.js +++ b/webpack/config.js @@ -15,11 +15,11 @@ // --------------------- const - path = require('path'), - manifest = require('./manifest'), + path = require('path'), + manifest = require('./manifest'), devServer = require('./devServer'), - rules = require('./rules'), - plugins = require('./plugins'); + rules = require('./rules'), + plugins = require('./plugins'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); @@ -46,22 +46,20 @@ const resolve = { ], }; -let optimization = {}; +const optimization = { + minimize: manifest.MINIFY +}; if (manifest.MINIFY) { - optimization = { - minimize: manifest.MINIFY, - minimizer: [ - new CssMinimizerPlugin(), - new TerserPlugin() - ], - }; + optimization.minimizer = [ + new CssMinimizerPlugin(), + new TerserPlugin() + ]; } // ----------------- // @Exporting Module // ----------------- - module.exports = { devtool: manifest.IS_PRODUCTION ? false : 'source-map', context: path.join(manifest.paths.src, manifest.entries.js), diff --git a/webpack/manifest.js b/webpack/manifest.js index 15005c7..6e0c8f0 100755 --- a/webpack/manifest.js +++ b/webpack/manifest.js @@ -28,7 +28,7 @@ const NODE_ENV = process.env.NODE_ENV || 'development', IS_DEVELOPMENT = NODE_ENV === 'development', IS_PRODUCTION = NODE_ENV === 'production', - MINIFY = process.env.MINIFY === 'true' || IS_PRODUCTION; + MINIFY = process.env.MINIFY === 'true'; // ------ // @Utils diff --git a/webpack/rules/sass.js b/webpack/rules/sass.js index d98086c..53b0321 100755 --- a/webpack/rules/sass.js +++ b/webpack/rules/sass.js @@ -27,8 +27,7 @@ const loaders = [ { loader: 'css-loader', options: { - sourceMap : manifest.IS_DEVELOPMENT, - // minimize : manifest.IS_PRODUCTION, + sourceMap : manifest.IS_DEVELOPMENT }, }, { From 87318325d671b12a436b5e7afb4cd94235c1a3a7 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Thu, 25 Aug 2022 21:55:39 +0200 Subject: [PATCH 4/8] Unminify html as well --- webpack/plugins/htmlPlugin.js | 31 ++++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/webpack/plugins/htmlPlugin.js b/webpack/plugins/htmlPlugin.js index a13e5df..3a2a4d2 100755 --- a/webpack/plugins/htmlPlugin.js +++ b/webpack/plugins/htmlPlugin.js @@ -1,6 +1,6 @@ const - path = require('path'), - manifest = require('../manifest'), + path = require('path'), + manifest = require('../manifest'), HtmlWebpackPlugin = require('html-webpack-plugin'); const titles = { @@ -25,18 +25,31 @@ const titles = { 'test': 'Test', }; +let minify = { + collapseWhitespace: false, + minifyCSS: false, + minifyJS: false, + removeComments: true, + useShortDoctype: false, +}; + +if (manifest.MINIFY) { + minify = { + collapseWhitespace: true, + minifyCSS: true, + minifyJS: true, + removeComments: true, + useShortDoctype: true, + }; +} + + module.exports = Object.keys(titles).map(title => { return new HtmlWebpackPlugin({ template: path.join(manifest.paths.src, `${title}.html`), path: manifest.paths.build, filename: `${title}.html`, inject: true, - minify: { - collapseWhitespace: true, - minifyCSS: true, - minifyJS: true, - removeComments: true, - useShortDoctype: true, - }, + minify: minify }); }); From f56fbe528403adb73e1449d80ce2170f22b60ca2 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Thu, 25 Aug 2022 21:59:38 +0200 Subject: [PATCH 5/8] Forgot to indent. --- webpack/plugins/htmlPlugin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack/plugins/htmlPlugin.js b/webpack/plugins/htmlPlugin.js index 3a2a4d2..9c32eb2 100755 --- a/webpack/plugins/htmlPlugin.js +++ b/webpack/plugins/htmlPlugin.js @@ -1,6 +1,6 @@ const - path = require('path'), - manifest = require('../manifest'), + path = require('path'), + manifest = require('../manifest'), HtmlWebpackPlugin = require('html-webpack-plugin'); const titles = { From eaed876ee51a251fce4ef9329a788320a335ab43 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Thu, 25 Aug 2022 22:23:38 +0200 Subject: [PATCH 6/8] Sass-loader minify working --- src/assets/styles/index.scss | 2 +- src/assets/styles/spec/settings/index.scss | 2 +- src/assets/styles/vendor/index.scss | 2 +- webpack/rules/sass.js | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 6c7b16c..247651e 100755 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,6 +1,6 @@ @import 'spec/settings/index'; @import 'spec/tools/index'; -@import "~bootstrap/scss/bootstrap"; +@import "bootstrap/scss/bootstrap"; @import 'spec/index'; @import 'vendor/index'; diff --git a/src/assets/styles/spec/settings/index.scss b/src/assets/styles/spec/settings/index.scss index 349c23e..7f88dab 100755 --- a/src/assets/styles/spec/settings/index.scss +++ b/src/assets/styles/spec/settings/index.scss @@ -1,6 +1,6 @@ @import 'breakpoints'; @import 'fonts'; -@import '~brand-colors/dist/latest/scss/brand-colors.latest.scss'; +@import 'brand-colors/dist/latest/scss/brand-colors.latest.scss'; @import 'materialColors'; @import 'baseColors'; @import 'borders'; diff --git a/src/assets/styles/vendor/index.scss b/src/assets/styles/vendor/index.scss index eaeb95f..ccdd35e 100755 --- a/src/assets/styles/vendor/index.scss +++ b/src/assets/styles/vendor/index.scss @@ -1,4 +1,4 @@ -@import '~perfect-scrollbar/css/perfect-scrollbar'; +@import 'perfect-scrollbar/css/perfect-scrollbar'; @import 'themify-icons'; @import 'font-awesome'; @import 'perfectScrollbar'; diff --git a/webpack/rules/sass.js b/webpack/rules/sass.js index 53b0321..f86c8bf 100755 --- a/webpack/rules/sass.js +++ b/webpack/rules/sass.js @@ -48,6 +48,7 @@ const loaders = [ options: { sourceMap: manifest.IS_DEVELOPMENT, sassOptions: { + outputStyle: manifest.MINIFY ? 'compressed' : 'expanded', includePaths: [ path.join('../../', 'node_modules'), path.join(manifest.paths.src, 'assets', 'styles'), From 7aaafd8d1fad953691427e332f65021b19a60c01 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Fri, 26 Aug 2022 21:01:47 +0200 Subject: [PATCH 7/8] Updated files attached to release --- .github/workflows/release.yml | 4 +++- package.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 4bc288a..952aa77 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -42,7 +42,9 @@ jobs: with: name: ${{ steps.version.outputs.version }} tag_name: ${{ steps.version.outputs.version }} - files: static.zip + files: | + static_minified.zip + static_unminified.zip fail_on_unmatched_files: true prerelease: false draft: false \ No newline at end of file diff --git a/package.json b/package.json index 0b066ca..88a1fe8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "adminator", - "version": "2.0.1", + "version": "2.0.3", "private": true, "description": "HTML Admin Template", "scripts": { From 50ed12539b84f052d8643819905b278334269af1 Mon Sep 17 00:00:00 2001 From: Jeppe Rask Date: Mon, 5 Sep 2022 21:02:56 +0200 Subject: [PATCH 8/8] Updated README with information about prebuilt static assets --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bd0d586..923eb16 100755 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ ## Getting Started -In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. +In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases). #### Prerequisites - Node.js