add gulp-file-imclude

README.md

@@ -6,6 +6,7 @@ Default build directory is `./build`. To change edit `gulpfile.js`.
 
 * JS transpilation, minification with Babel, Terser.
 * SASS compilation, css minification.
+* HTML file includes.
 * Mustache templating
 * BrowserSync.
 
@@ -13,6 +14,17 @@ Default build directory is `./build`. To change edit `gulpfile.js`.
 
 * Image optomisation.
 
+## HTML File Includes
+
+Uses [gulp-file-include - npm](https://www.npmjs.com/package/gulp-file-include).
+
+Include file with:
+
+```
+@@include('./logo.svg')
+```
+
+Files are relative to the include directory: `src/includes/`.
 
 ## Mustache Templates
 

gulpfile.js

@@ -5,6 +5,7 @@ const del = require('del');
 const babel = require('gulp-babel');
 const terser = require('gulp-terser');
 const mustache = require('gulp-mustache');
+const fileInclude = require('gulp-file-include');
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -22,7 +23,9 @@ const srcDir = './src/';
 const buildDir = './build/';
 const jsSrc = path.join(srcDir, 'js/**/*.js');
 const jsDest = path.join(buildDir, 'js/');
-const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
+const htmlTemplateSrc = path.join(srcDir, 'html/templates/**/*.mustache');
+const includeBaseDir = path.join(srcDir, 'includes/');
+const includeSrc = path.join(includeBaseDir, '**/*');
 const scssSrc = path.join(srcDir, 'scss/**/*.scss');
 const cssDest = path.join(buildDir, 'css/');
 const htmlSrc = path.join(srcDir, 'html/**/*.html');
@@ -63,6 +66,11 @@ function scssCompile() {
 
 function htmlCompile() {
 	return src(htmlSrc)
+		.pipe(
+			fileInclude({
+				basepath: includeBaseDir,
+			})
+		)
 		.pipe(mustache())
 		.pipe(dest(htmlDest));
 }
@@ -94,7 +102,7 @@ const cssWatch = () =>
 	watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
 const htmlWatch = () =>
 	watch(
-		[htmlSrc, mustacheSrc],
+		[htmlSrc, includeSrc, mustacheSrc],
 		{ ignoreInitial: false },
 		series(htmlClean, htmlCompile, reload)
 	);

package.json

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

yarn.lock

@@ -2221,6 +2221,16 @@ concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
 concat-with-sourcemaps@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
@@ -3111,7 +3121,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@~3.0.2:
+extend@^3.0.0, extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3307,6 +3317,11 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flatnest@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/flatnest/-/flatnest-1.0.0.tgz#20421ad05b46c63cad30ef14a8ec625f86b3f1c5"
+  integrity sha1-IEIa0FtGxjytMO8UqOxiX4az8cU=
+
 flatted@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
@@ -3648,6 +3663,20 @@ gulp-concat@^2.6.1:
     through2 "^2.0.0"
     vinyl "^2.0.0"
 
+gulp-file-include@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/gulp-file-include/-/gulp-file-include-2.2.2.tgz#5aa63373f7d7840651471aec8dae3c1827ac7550"
+  integrity sha512-AOrENB4sYXOC1aeJ04pq0UW/VC4EEQHDDjVfTpGGxuKS7Js0SSGZ0darlbk+e7gWJItfxibpRhVu3tFwOdmSiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-stream "^2.0.0"
+    extend "^3.0.2"
+    flatnest "^1.0.0"
+    json5 "^2.1.3"
+    plugin-error "^1.0.1"
+    through2 "^3.0.1"
+    vinyl "^2.2.0"
+
 gulp-mustache@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/gulp-mustache/-/gulp-mustache-5.0.0.tgz#5ebc8bbb36a0e657391b341f11325579d4502b07"
@@ -4413,7 +4442,7 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@^2.1.2:
+json5@^2.1.2, json5@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
   integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
@@ -6085,7 +6114,7 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-"readable-stream@2 || 3":
+"readable-stream@2 || 3", readable-stream@^3.0.2:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -7564,7 +7593,7 @@ vinyl-sourcemaps-apply@^0.2.0, vinyl-sourcemaps-apply@^0.2.1:
   dependencies:
     source-map "^0.5.1"
 
-vinyl@^2.0.0:
+vinyl@^2.0.0, vinyl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
   integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==