Merge pull request #293 from puikinsh/feature/prebuild

Feature/prebuild

Author: puikinsh

.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

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

package.json

@@ -1,13 +1,15 @@
 {
   "name": "adminator",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
     "start": "webpack server",
     "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",

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';
 

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';

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';

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,

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
 };

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
   });
 });

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),
   };
 }
 

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
 };
 
 // -----------------