add gulp-file-imclude

This commit is contained in:
Ray Elliott 2020-05-19 16:17:41 +01:00
parent 53f1cb4447
commit a5a9a690a6
5 changed files with 55 additions and 5 deletions

View File

@ -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

View File

@ -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)
);

View File

@ -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"
}

0
src/includes/.gitkeep Normal file
View File

View File

@ -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==