add CSS minfier that executes automatically

.github/workflows/pages-deploy.yml

@@ -16,14 +16,14 @@ jobs:
           fetch-depth: 0
 
       # Setup Node.js and NPM
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         name: Setup Node.js
         with:
           node-version: 16
 
       # Update NPM
       - name: Update NPM
-        run: sudo npm install -g npm
+        run: npm install -g npm
 
       # Install build deps
       - name: Install build deps
@@ -40,6 +40,10 @@ jobs:
           base-url-path: https://scripty.org
           drop-html-extension: true
 
+      # Shrink CSS
+      - name: Shrink CSS
+        run: node minify.js
+
       # Download minifier program and untar it to /tmp
       - name: Download minifier
         run: |
@@ -67,4 +71,4 @@ jobs:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./out
           cname: scripty.org
-          exclude_assets: '.github,node_modules,lib,_sass,_javascript'
+          exclude_assets: '.github,node_modules,lib,_sass,_javascript,minify.js,package.json,package-lock.json,README.md'

minify.js

@@ -0,0 +1,26 @@
+"use strict";
+
+// Minify CSS using purgecss
+//
+// Load all HTML files in the same directory and subdirectories, then
+// load all CSS rules from the /css/main.css file,
+// remove all unused rules and finally save the result to the /css/main.min.css file.
+
+
+const PurgeCSS = require('purgecss').PurgeCSS;
+
+const purgeCSS = new PurgeCSS();
+
+const purgeCSSConfig = {
+  content: ['./**/*.html'],
+  css: ['./css/main.css'],
+  output: './css/main.min.css',
+};
+
+purgeCSS.purge(purgeCSSConfig).then(result => {
+  // write to file
+  require('fs').writeFileSync(purgeCSSConfig.output, result[0].css);
+  console.log('CSS minified successfully!');
+}).catch(err => {
+  console.log(err);
+});

package.json

@@ -42,6 +42,7 @@
     "bulma": "^0.9.3",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^9.1.0",
+    "purgecss": "^5.0.0",
     "sass": "^1.51.0"
   },
   "homepage": "https://github.com/jgthms/bulma-start#readme",
@@ -62,10 +63,8 @@
     "css-deploy": "npm run css-build && npm run css-postcss",
     "css-postcss": "postcss --use autoprefixer --output css/main.css css/main.css",
     "css-watch": "npm run css-build -- --watch",
-    "deploy": "npm run css-deploy && npm run js-build",
-    "js-build": "babel _javascript --out-dir lib",
-    "js-watch": "npm run js-build -- --watch",
-    "start": "npm-run-all --parallel css-watch js-watch"
+    "css-minify": "node ./minify.js",
+    "start": "npm-run-all --parallel css-watch css-minify"
   },
   "version": "0.0.5"
 }