Created a builder for the application. Also separated SCSS variables to another file.

Author: takaneichinose

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

build.js

@@ -0,0 +1,93 @@
+const fs = require('fs');
+const path = require('path');
+
+const pug = require('pug');
+const sass = require('sass');
+
+const constants = require('./constants');
+
+function deleteCompiled() {
+  console.log('Deleting build directory...');
+
+  // Delete the compiled files
+  if (fs.existsSync(constants.STATIC_PATH)) {
+    fs.rmSync(constants.STATIC_PATH, {
+      recursive: true,
+      force: true,
+    });
+  }
+
+  console.log('Build directory deleted!');
+}
+
+function createDirectory() {
+  console.log('Creating new build directory...');
+
+  fs.mkdirSync(constants.STATIC_PATH);
+  fs.mkdirSync(constants.CSS_PATH);
+
+  console.log('Build directory created!');
+}
+
+function buildHTML() {
+  console.log('Building Pug file...');
+
+  const compiledFunction = pug.compileFile(path.join(constants.SRC_PATH, 'index.pug'));
+
+  fs.writeFileSync(path.join(constants.STATIC_PATH, 'index.html'), compiledFunction());
+
+  console.log('Build successful!');
+}
+
+function buildCSS() {
+  console.log('Building SCSS file...');
+
+  const normalize = sass.compile(path.join(__dirname, 'node_modules/normalize.css/normalize.css'), {
+    style: 'compressed',
+  });
+
+  const style = sass.compile(path.join(constants.SRC_PATH, 'style.scss'), {
+    style: 'compressed',
+  });
+
+  fs.writeFileSync(path.join(constants.CSS_PATH, 'style.css'), normalize.css + style.css);
+
+  console.log('Build successful!');
+}
+
+function copyAssets() {
+  console.log('Copying assets...');
+
+  // fs.copyFileSync(, constants.STATIC_PATH);
+  const assets = fs.readdirSync(constants.ASSETS_PATH);
+
+  for (const asset of assets) {
+    fs.cpSync(path.join(constants.ASSETS_PATH, asset), path.join(constants.STATIC_PATH, asset), {
+      recursive: true,
+    });
+  }
+
+  console.log('Assets copied!');
+}
+
+(async function main() {
+  // Delete compiled files
+  deleteCompiled();
+
+  // Create directory for compiled files
+  createDirectory();
+
+  // Build Pug file
+  buildHTML();
+
+  // Build SCSS file
+  buildCSS();
+
+  // Copy the assets
+  copyAssets();
+})();
+
+module.exports = {
+  buildHTML,
+  buildCSS,
+}

constants.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+const SRC_PATH = path.join(__dirname, 'src');
+const STATIC_PATH = path.join(__dirname, '/static');
+const ASSETS_PATH = path.join(SRC_PATH, 'assets');
+const CSS_PATH = path.join(STATIC_PATH, 'css');
+
+module.exports = {
+  SRC_PATH,
+  STATIC_PATH,
+  CSS_PATH,
+  ASSETS_PATH,
+};

develop.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+const express = require('express');
+const pug = require('pug');
+
+const constants =  require('./constants');
+const build =  require('./build');
+
+const app = express();
+const port = 3000;
+
+app.get('/', (_, res) => {
+  app.use('/', express.static(constants.STATIC_PATH));
+
+  build.buildCSS();
+  build.buildHTML();
+
+  res.send(pug.renderFile(path.join(constants.STATIC_PATH, 'index.html')));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`);
+});

index.js

@@ -1,12 +1,13 @@
 {
   "name": "css-room-escape",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "repository": "https://github.com/takaneichinose/profile.git",
   "author": "Takane Ichinose <[email protected]>",
   "license": "MIT",
   "dependencies": {
     "express": "^4.18.2",
+    "normalize.css": "^8.0.1",
     "pug": "^3.0.2"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+
+const express = require('express');
+const pug = require('pug');
+const sass = require('sass');
+
+const constants =  require('./constants');
+
+const app = express();
+const port = 3000;
+
+app.use('/', express.static(constants.STATIC_PATH))
+
+app.get('/', (_, res) => {
+  res.send(pug.renderFile(path.join(constants.STATIC_PATH, 'index.html')));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`);
+});