Working on custom theme

gulpfile.js

@@ -0,0 +1,37 @@
+const { src, dest, watch, series } = require('gulp')
+const pug = require('gulp-pug')
+const sass = require('gulp-sass')(require('sass'))
+const bs = require('browser-sync').create()
+const fs = require('fs')
+
+function css () {
+  return src('./theme/styles.scss')
+    .pipe(sass())
+    .pipe(dest('./theme'))
+}
+
+function html () {
+  const resume = JSON.parse(fs.readFileSync('./resume.json', 'utf-8'))
+
+  return src('./theme/template.pug')
+    .pipe(pug({ data: { resume } }))
+    .pipe(dest('./public'))
+}
+
+function serve () {
+  bs.init({
+    server: {
+      baseDir: './public',
+      index: 'template.html'
+    },
+    ui: false,
+    open: false
+  })
+
+  watch('./theme/**/*.scss', series(css, html))
+  watch(['./theme/**/*.pug', './resume.json'], html)
+  bs.watch('./public/*.html').on('change', bs.reload)
+}
+
+exports.css = css
+exports.default = series(css, html, serve)

index.js

@@ -0,0 +1,10 @@
+const pug = require('pug');
+const path = require('path');
+
+const render = (resume) => pug.renderFile(path.join(__dirname, 'theme', 'template.pug'),{
+    resume
+})
+
+module.exports = {
+    render,
+}

package.json

@@ -1,11 +1,22 @@
 {
+  "name": "resume",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "dev": "resume serve --theme elegant",
+    "dev": "resume serve --theme .",
     "resume": "resume",
     "build": "mkdir -p out && resume export out/resume.pdf && resume export out/resume.html"
   },
+  "author": "Thomas Cole",
+  "license": "MIT",
   "dependencies": {
+    "gulp": "^4.0.2",
+    "gulp-pug": "^5.0.0",
+    "gulp-sass": "^5.1.0",
     "jsonresume-theme-elegant": "^1.16.1",
-    "resume-cli": "^3.0.8"
+    "pug": "^3.0.2",
+    "resume-cli": "^3.0.8",
+    "sass": "^1.60.0"
   }
 }

theme/styles.scss

@@ -0,0 +1 @@
+@charset "UTF-8";

theme/template.pug

@@ -0,0 +1,8 @@
+doctype html 
+html(lang="en")
+    head 
+        meta(charset="utf-8")
+        style
+            include styles.css 
+        title=`Resume ${resume.basics.name}`
+    body