feat(tree-wide): improve site building performance ...

* use Hugo to build SASS and resize images
* cache Hugo's image resizing output

.github/workflows/deploy.yml

@@ -17,6 +17,11 @@ jobs:
     - uses: actions/checkout@v2
       with:
         submodules: true
+    - name: Cache Rendered Data
+      uses: actions/cache@v2
+      with:
+        path: ./site/resources
+        key: ${{ runner.os }}-rendered
     - name: Install dependencies
       run: sudo apt-get update && sudo apt-get install graphicsmagick
     - name: Build
@@ -26,10 +31,10 @@ jobs:
       run: ./.ci/build.sh
     - name: Deploy
       if: ${{ ! github.base_ref }}
-      uses: JamesIves/github-pages-deploy-action@3.7.1
+      uses: JamesIves/github-pages-deploy-action@4.1.5
       with:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        token: ${{ secrets.GITHUB_TOKEN }}
-        BRANCH: master
+        branch: master
-        FOLDER: build
+        folder: build
-        CLEAN: true
+        clean: true
-        SINGLE_COMMIT: true
+        single-commit: true

.gitignore

@@ -20,6 +20,7 @@ site/static/images/game/boxart
 !site/static/images/game/boxart/default.png
 site/static/images/screenshots0/
 site/static/savefiles/
+site/resources/_gen/
 
 # Filesystem stuff.
 .directory

gulpfile.js

@@ -4,15 +4,9 @@ const exec = require('child_process').exec;
 const gulp = require('gulp');
 const log = require('fancy-log');
 const parseArgs = require('minimist');
-const merge = require('merge-stream');
-const sass = require('gulp-sass')(require('sass'));
-const postcss = require('gulp-postcss');
-const cssnano = require('cssnano');
 const concat = require('gulp-concat');
-const rename = require('gulp-rename');
 const imageResize = require('gulp-image-resize');
 const parallel = require('concurrent-transform');
-const os = require('os');
 const browserSync = require('browser-sync').create();
 const hugo = require('hugo-bin');
 
@@ -53,12 +47,8 @@ gulp.task('assets:images', () => {
     const screenshotImages = gulp.src('build/images/screenshots/*')
         .pipe(imageResize({width: 640, height: 360, crop: false}))
         .pipe(gulp.dest('build/images/screenshots/thumbs'));
-    const postImages = gulp.src('build/**/*.png')
-        .pipe(parallel(imageResize({quality: 0.8, format: 'jpg', percentage: 80})), os.cpus().length)
-        .pipe(rename({extname: '.png.jpg'}))
-        .pipe(gulp.dest('build/'));
 
-    return merge(baseImages, jumbotronImages, bannerImages, boxartImages, iconImages, screenshotImages, postImages);
+    return parallel(baseImages, jumbotronImages, bannerImages, boxartImages, iconImages, screenshotImages);
 });
 
 gulp.task('assets:js', () => {
@@ -67,17 +57,8 @@ gulp.task('assets:js', () => {
         .pipe(gulp.dest('build/js'));
 });
 
-gulp.task('assets:scss', () => {
-    const postCssOptions = [cssnano];
-    return gulp.src('src/scss/style.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(postcss(postCssOptions))
-        .pipe(gulp.dest('build/css'))
-        .pipe(browserSync.stream());
-});
-
 gulp.task('hugo', callback => {
-    exec(hugo + ' -s ./site/ -d ../build/ -v', (err, stdout, stderr) => {
+    exec(hugo + ' -s ./site/ -d ../build/ -v --gc', (err, stdout, stderr) => {
         console.log(stdout);
         callback(err);
     });
@@ -92,9 +73,10 @@ gulp.task('final:serve', (done) => {
     });
 
     gulp.watch('src/js/**/*', gulp.series('assets:js'));
-    gulp.watch('src/scss/**/*', gulp.series('assets:scss'));
+    gulp.watch('src/scss/**/*', gulp.series('hugo'));
     gulp.watch('site/**/*.html', gulp.series('hugo'));
     gulp.watch('site/**/*.md', gulp.series('hugo'));
+    gulp.watch('site/**/*.png', gulp.series('hugo'));
 
     gulp.watch('build/**/*.html').on('change', (x) => {
         browserSync.reload(x);
@@ -132,6 +114,6 @@ if (parseArgs(process.argv).production) {
 log.info(`process.env.HUGO_ENV = '${process.env.HUGO_ENV}'`);
 log.info(`process.env.HUGO_BASEURL = '${process.env.HUGO_BASEURL}'`);
 
-gulp.task('default', gulp.series(gulp.parallel('assets:js', 'assets:scss'), 'hugo', 'assets:images', finalCommand));
+gulp.task('default', gulp.series('assets:js', 'hugo', 'assets:images', finalCommand));
-gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), gulp.parallel('assets:js', 'assets:scss'), 'hugo', 'assets:images', finalCommand));
+gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki', 'assets:js'), 'hugo', 'assets:images', finalCommand));
 gulp.task('content', gulp.series('hugo', finalCommand));

package.json

@@ -20,19 +20,13 @@
   "dependencies": {
     "bulma": "0.9.3",
     "concurrent-transform": "^1.0.0",
-    "cssnano": "^5.0.8",
     "fancy-log": "^1.3.3",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-image-resize": "^0.13.1",
-    "gulp-postcss": "^9.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.0.0",
     "hugo-bin": "0.76.1",
     "merge-stream": "^2.0.0",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.5"
-    "postcss": "^8.3",
-    "sass": "^1.39.0"
   },
   "devDependencies": {
     "browser-sync": "^2.27.5",

site/config.toml

@@ -6,6 +6,7 @@ theme = "shared-bulma-theme"
 
 # Define how many objects appear per pagination.
 paginate = 20
+timeout = 60000
 
 [[menu.main]]
   name = "Blog"

site/themes/shared-bulma-theme

@@ -1 +1 @@
-Subproject commit 90c8df31217bfb4a6111be14f802250859d6bf36
+Subproject commit 1525e0712d7646e9860494f67633f4dd7c4f1157