diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index ee8cac9..952aa77 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -23,8 +23,10 @@ jobs: - name: Build run: | npm install - npm run build - 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)" @@ -40,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 + draft: false \ No newline at end of file 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 diff --git a/package.json b/package.json index 2dec475..88a1fe8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "adminator", - "version": "2.0.2", + "version": "2.0.3", "private": true, "description": "HTML Admin Template", "scripts": { @@ -8,6 +8,8 @@ "dev": "webpack-dashboard -t 'Project' -- webpack server", "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", @@ -29,6 +31,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", @@ -38,7 +41,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/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/config.js b/webpack/config.js index 8da62a9..007dacf 100755 --- a/webpack/config.js +++ b/webpack/config.js @@ -15,12 +15,14 @@ // --------------------- 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"); // ------------------ // @Entry Point Setup @@ -44,11 +46,20 @@ const resolve = { ], }; +const optimization = { + minimize: manifest.MINIFY +}; + +if (manifest.MINIFY) { + 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), @@ -63,6 +74,7 @@ module.exports = { module: { rules, }, + optimization: optimization, resolve, plugins, devServer, diff --git a/webpack/manifest.js b/webpack/manifest.js index 1c26207..6e0c8f0 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'; // ------ // @Utils @@ -82,4 +82,5 @@ module.exports = { NODE_ENV, IS_DEVELOPMENT, IS_PRODUCTION, + MINIFY }; diff --git a/webpack/plugins/htmlPlugin.js b/webpack/plugins/htmlPlugin.js index a13e5df..9c32eb2 100755 --- a/webpack/plugins/htmlPlugin.js +++ b/webpack/plugins/htmlPlugin.js @@ -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 }); }); 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), }; } diff --git a/webpack/rules/sass.js b/webpack/rules/sass.js index ebbbbff..f86c8bf 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 @@ -27,8 +27,7 @@ const loaders = [ { loader: 'css-loader', options: { - sourceMap : manifest.IS_DEVELOPMENT, - // minimize : manifest.IS_PRODUCTION, + sourceMap : manifest.IS_DEVELOPMENT }, }, { @@ -49,21 +48,28 @@ 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'), 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 }; // -----------------