diff --git a/README.md b/README.md index 9142e86..125718d 100644 --- a/README.md +++ b/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 diff --git a/gulpfile.js b/gulpfile.js index 6e96590..0efab0b 100644 --- a/gulpfile.js +++ b/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'); @@ -23,6 +24,8 @@ const buildDir = './build/'; const jsSrc = path.join(srcDir, 'js/**/*.js'); const jsDest = path.join(buildDir, 'js/'); 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, htmlTemplateSrc], + [htmlSrc, includeSrc, mustacheSrc], { ignoreInitial: false }, series(htmlClean, htmlCompile, reload) ); diff --git a/package.json b/package.json index 9fe4e4c..c2e5494 100644 --- a/package.json +++ b/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" } diff --git a/src/includes/.gitkeep b/src/includes/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/yarn.lock b/yarn.lock index 6d78564..9e7feaa 100644 --- a/yarn.lock +++ b/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==