Continued working on the scaffolding of the development environment

.gitignore

@@ -1,5 +1,6 @@
 # Don't copy NPM modules around!
 node_modules/
 
-# Don't commit compiled CSS files
+# Don't commit compiled CSS and CoffeeScript files
 public/stylesheets/*.css
+public/scripts/*.js

bin/docker-watch.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
 
-docker run --rm -w /usr/src/app -v "$PWD":/usr/src/app -p 3000:3000 -d --name bitgoblin node:lts npm run watch
+docker run --rm -w /usr/src/app -v "$PWD":/usr/src/app -p 3000:3000 -d --name bitgoblin node:lts npm run dev

gulpfile.js

@@ -0,0 +1,30 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('node-sass'));
+const coffee = require('gulp-coffee');
+const nodemon = require('gulp-nodemon');
+
+gulp.task('styles', function() {
+  return gulp.src('public/stylesheets/*.sass')
+    .pipe(sass({indentedSyntax: true}).on('error', sass.logError))
+    .pipe(gulp.dest('public/stylesheets/'));
+});
+
+gulp.task('coffee', function() {
+  return gulp.src('public/scripts/*.coffee')
+    .pipe(coffee({bare: true}))
+    .pipe(gulp.dest('public/scripts/'));
+});
+
+exports.watch = function() {
+  // rerun asset compilation as needed
+  gulp.watch(['public/stylesheets/*.sass'], { ignoreInitial: false }, gulp.series('styles'));
+  gulp.watch(['public/scripts/*.coffee'], { ignoreInitial: false }, gulp.series('coffee'));
+
+  // start the node server through nodemon
+  nodemon({
+    script: 'index.js',
+    config: 'nodemon.json'
+  });
+};
+
+exports.default = exports.watch;

index.js

@@ -1,5 +1,4 @@
 const express = require('express');
-const sassMiddleware = require('node-sass-middleware');
 const path = require('path');
 const app = express();
 const port = 3000;
@@ -8,16 +7,6 @@ const port = 3000;
 app.set('views', './views');
 app.set('view engine', 'pug');
 
-// initialize SASS compiler middleware
-app.use(sassMiddleware({
-	src: path.join(__dirname, 'public', 'stylesheets'),
-	dest: path.join(__dirname, 'public', 'stylesheets'),
-	indentedSyntax: true,
-	outputStyle: 'compressed',
-	prefix: '/static/stylesheets',
-	debug: true
-}));
-
 // serve static files
 app.use('/static', express.static(path.join(__dirname, 'public')));
 

nodemon.json

@@ -1,4 +1,5 @@
 {
+  "ext": "js",
   "verbose": true,
   "ignore": ["*.test.js", "fixtures/*"]
 }

package.json

@@ -4,7 +4,7 @@
   "description": "The Bit Goblin official website",
   "main": "index.js",
   "scripts": {
-    "watch": "nodemon index.js",
+    "dev": "gulp",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -15,10 +15,14 @@
   "license": "BSD-2-Clause",
   "dependencies": {
     "express": "^4.17.3",
-    "node-sass-middleware": "^1.0.1",
     "pug": "^3.0.2"
   },
   "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-coffee": "^3.0.3",
+    "gulp-nodemon": "^2.5.0",
+    "gulp-sass": "^5.1.0",
+    "node-sass": "^7.0.1",
     "nodemon": "^2.0.15"
   }
 }

public/scripts/vorkath.coffee

@@ -0,0 +1,2 @@
+$ ->
+	console.log('This is a test!')

public/stylesheets/zulrah.sass

@@ -1,2 +1,2 @@
 body
-	background: grey
+  background: grey

views/index.pug

@@ -1,8 +1,10 @@
 doctype=html
 html
-	head
+  head
-		title Bit Goblin
+    title Bit Goblin
-		link(rel='stylesheet', href='/static/stylesheets/zulrah.css')
+    link(rel='stylesheet', href='/static/stylesheets/zulrah.css')
-	body
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js')
-		h1 Bit Goblin
+    script(src='/static/scripts/vorkath.js')
-		p This is a test!
+  body
+    h1 Bit Goblin
+    p This is a test!