add mustache templating

README.md

@@ -6,8 +6,21 @@ Default build directory is `./build`. To change edit `gulpfile.js`.
 
 * JS transpilation, minification with Babel, Terser.
 * SASS compilation, css minification.
+* Mustache templating
 * BrowserSync.
 
 ## TODO
 
 * Image optomisation.
+
+
+## Mustache Templates
+
+Include a template with:
+
+```
+{{> templates/example}}
+```
+
+Templates are relative to the HTML file and the `.mustache` extension must be
+ommitted.

gulpfile.js

@@ -1,104 +1,108 @@
-const { src, dest, series, parallel, watch } = require("gulp");
+const { src, dest, series, parallel, watch } = require('gulp');
 
-const path = require("path");
+const path = require('path');
-const del = require("del");
+const del = require('del');
-const babel = require("gulp-babel");
+const babel = require('gulp-babel');
-const terser = require("gulp-terser");
+const terser = require('gulp-terser');
-const sass = require("gulp-sass");
+const mustache = require('gulp-mustache');
-const postcss = require("gulp-postcss");
+const sass = require('gulp-sass');
-const postcssPresetEnv = require("postcss-preset-env");
+const postcss = require('gulp-postcss');
-const cssnano = require("cssnano");
+const postcssPresetEnv = require('postcss-preset-env');
-const browserSync = require("browser-sync");
+const cssnano = require('cssnano');
+const browserSync = require('browser-sync');
 
-sass.compiler = require("node-sass");
+sass.compiler = require('node-sass');
 
 const server = browserSync.create();
 
-const babelConfig = require("./babel.config.js");
+const babelConfig = require('./babel.config.js');
 const postcssPlugins = [postcssPresetEnv(), cssnano()];
 
-const srcDir = "./src/";
+const srcDir = './src/';
-const buildDir = "./build/";
+const buildDir = './build/';
-const jsSrc = path.join(srcDir, "js/**/*.js");
+const jsSrc = path.join(srcDir, 'js/**/*.js');
-const jsDest = path.join(buildDir, "js/");
+const jsDest = path.join(buildDir, 'js/');
-const scssSrc = path.join(srcDir, "scss/**/*.scss");
+const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
-const cssDest = path.join(buildDir, "css/");
+const scssSrc = path.join(srcDir, 'scss/**/*.scss');
-const htmlSrc = path.join(srcDir, "html/**/*.html");
+const cssDest = path.join(buildDir, 'css/');
+const htmlSrc = path.join(srcDir, 'html/**/*.html');
 const htmlDest = buildDir;
-const assetSrc = path.join(srcDir, "assets/**/*");
+const assetSrc = path.join(srcDir, 'assets/**/*');
-const assetDest = path.join(buildDir, "assets/");
+const assetDest = path.join(buildDir, 'assets/');
 
 function jsClean() {
-  return del(jsDest, { force: true });
+	return del(jsDest, { force: true });
 }
 
 function cssClean() {
-  return del(cssDest, { force: true });
+	return del(cssDest, { force: true });
 }
 
 function htmlClean() {
-  return del(path.join(htmlDest, '*.html'), { force: true });
+	return del(path.join(htmlDest, '*.html'), { force: true });
 }
 
 function assetClean() {
-  return del(assetDest, { force: true });
+	return del(assetDest, { force: true });
 }
 
 function jsTranspile() {
-  return src(jsSrc, { sourcemaps: true })
+	return src(jsSrc, { sourcemaps: true })
-    .pipe(babel(babelConfig))
+		.pipe(babel(babelConfig))
-    .pipe(terser())
+		.pipe(terser())
-    .pipe(dest(jsDest, { sourcemaps: true }));
+		.pipe(dest(jsDest, { sourcemaps: true }));
 }
 
 function scssCompile() {
-  return src(scssSrc, { sourcemaps: true })
+	return src(scssSrc, { sourcemaps: true })
-    .pipe(sass().on("error", sass.logError))
+		.pipe(sass().on('error', sass.logError))
-    .pipe(postcss(postcssPlugins))
+		.pipe(postcss(postcssPlugins))
-    .pipe(dest(cssDest, { sourcemaps: true }))
+		.pipe(dest(cssDest, { sourcemaps: true }))
-    .pipe(server.stream());
+		.pipe(server.stream());
 }
 
 function htmlCompile() {
-  return src(htmlSrc).pipe(dest(htmlDest));
+	return src(htmlSrc)
+		.pipe(mustache())
+		.pipe(dest(htmlDest));
 }
 
 function assetCompile() {
-  return src(assetSrc).pipe(dest(assetDest));
+	return src(assetSrc).pipe(dest(assetDest));
 }
 
 function serve(done) {
-  server.init({
+	server.init({
-    open: false,
+		open: false,
-    server: {
+		server: {
-      baseDir: buildDir
+			baseDir: buildDir,
-    }
+		},
-    // or instead of server
+		// or instead of server
-    // proxy: "example.home"
+		// proxy: "example.home"
-  });
+	});
-  done();
+	done();
 }
 
 function reload(done) {
-  server.reload();
+	server.reload();
-  done();
+	done();
 }
 
 const jsWatch = () =>
-  watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
+	watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
 const cssWatch = () =>
-  watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
+	watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
 const htmlWatch = () =>
-  watch(
+	watch(
-    htmlSrc,
+		[htmlSrc, mustacheSrc],
-    { ignoreInitial: false },
+		{ ignoreInitial: false },
-    series(htmlClean, htmlCompile, reload)
+		series(htmlClean, htmlCompile, reload)
-  );
+	);
 const assetWatch = () =>
-  watch(
+	watch(
-    assetSrc,
+		assetSrc,
-    { ignoreInitial: false },
+		{ ignoreInitial: false },
-    series(assetClean, assetCompile, reload)
+		series(assetClean, assetCompile, reload)
-  );
+	);
 
 exports.default = parallel(jsWatch, cssWatch, htmlWatch, assetWatch, serve);

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.6.0",
+    "gulp-mustache": "^5.0.0",
     "modern-css-reset": "^1.1.0"
   }
 }

src/html/templates/example.mustache

@@ -0,0 +1 @@
+<div>Just an example of a Mustache Template</div>

yarn.lock

@@ -2926,6 +2926,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 eslint-config-prettier@^6.3.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
@@ -3643,6 +3648,17 @@ gulp-concat@^2.6.1:
     through2 "^2.0.0"
     vinyl "^2.0.0"
 
+gulp-mustache@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-mustache/-/gulp-mustache-5.0.0.tgz#5ebc8bbb36a0e657391b341f11325579d4502b07"
+  integrity sha512-8tk0R1Fd+l6+e/t954e3UheFo25dKkTapPLD1sWoSroPXfIPxyHVgbhfH5VJGqeXl3te5GOwPtfcxxZJ+PYoFg==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+    mustache "^4.0.1"
+    plugin-error "^1.0.0"
+    replace-ext "^1.0.0"
+    through2 "^3.0.1"
+
 gulp-postcss@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-8.0.0.tgz#8d3772cd4d27bca55ec8cb4c8e576e3bde4dc550"
@@ -4800,6 +4816,11 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+mustache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
+  integrity sha512-yL5VE97+OXn4+Er3THSmTdCFCtx5hHWzrolvH+JObZnUYwuaG7XV+Ch4fR2cIrcYI0tFHxS7iyFYl14bW8y2sA==
+
 mute-stdout@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mute-stdout/-/mute-stdout-1.0.1.tgz#acb0300eb4de23a7ddeec014e3e96044b3472331"
@@ -5348,7 +5369,7 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-plugin-error@^1.0.1:
+plugin-error@^1.0.0, plugin-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
   integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==