diff --git a/README.md b/README.md index e05ee71..9142e86 100644 --- a/README.md +++ b/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. diff --git a/gulpfile.js b/gulpfile.js index 2cd3509..a14817d 100644 --- a/gulpfile.js +++ b/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 del = require("del"); -const babel = require("gulp-babel"); -const terser = require("gulp-terser"); -const sass = require("gulp-sass"); -const postcss = require("gulp-postcss"); -const postcssPresetEnv = require("postcss-preset-env"); -const cssnano = require("cssnano"); -const browserSync = require("browser-sync"); +const path = require('path'); +const del = require('del'); +const babel = require('gulp-babel'); +const terser = require('gulp-terser'); +const mustache = require('gulp-mustache'); +const sass = require('gulp-sass'); +const postcss = require('gulp-postcss'); +const postcssPresetEnv = require('postcss-preset-env'); +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 buildDir = "./build/"; -const jsSrc = path.join(srcDir, "js/**/*.js"); -const jsDest = path.join(buildDir, "js/"); -const scssSrc = path.join(srcDir, "scss/**/*.scss"); -const cssDest = path.join(buildDir, "css/"); -const htmlSrc = path.join(srcDir, "html/**/*.html"); +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 scssSrc = path.join(srcDir, 'scss/**/*.scss'); +const cssDest = path.join(buildDir, 'css/'); +const htmlSrc = path.join(srcDir, 'html/**/*.html'); const htmlDest = buildDir; -const assetSrc = path.join(srcDir, "assets/**/*"); -const assetDest = path.join(buildDir, "assets/"); +const assetSrc = path.join(srcDir, '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 }) - .pipe(babel(babelConfig)) - .pipe(terser()) - .pipe(dest(jsDest, { sourcemaps: true })); + return src(jsSrc, { sourcemaps: true }) + .pipe(babel(babelConfig)) + .pipe(terser()) + .pipe(dest(jsDest, { sourcemaps: true })); } function scssCompile() { - return src(scssSrc, { sourcemaps: true }) - .pipe(sass().on("error", sass.logError)) - .pipe(postcss(postcssPlugins)) - .pipe(dest(cssDest, { sourcemaps: true })) - .pipe(server.stream()); + return src(scssSrc, { sourcemaps: true }) + .pipe(sass().on('error', sass.logError)) + .pipe(postcss(postcssPlugins)) + .pipe(dest(cssDest, { sourcemaps: true })) + .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({ - open: false, - server: { - baseDir: buildDir - } - // or instead of server - // proxy: "example.home" - }); - done(); + server.init({ + open: false, + server: { + baseDir: buildDir, + }, + // or instead of server + // proxy: "example.home" + }); + done(); } function reload(done) { - server.reload(); - done(); + server.reload(); + 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( - htmlSrc, - { ignoreInitial: false }, - series(htmlClean, htmlCompile, reload) - ); + watch( + [htmlSrc, mustacheSrc], + { ignoreInitial: false }, + series(htmlClean, htmlCompile, reload) + ); const assetWatch = () => - watch( - assetSrc, - { ignoreInitial: false }, - series(assetClean, assetCompile, reload) - ); + watch( + assetSrc, + { ignoreInitial: false }, + series(assetClean, assetCompile, reload) + ); exports.default = parallel(jsWatch, cssWatch, htmlWatch, assetWatch, serve); diff --git a/package.json b/package.json index 933aaed..9fe4e4c 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ }, "dependencies": { "@babel/polyfill": "^7.6.0", + "gulp-mustache": "^5.0.0", "modern-css-reset": "^1.1.0" } } diff --git a/src/html/templates/example.mustache b/src/html/templates/example.mustache new file mode 100644 index 0000000..e4d594f --- /dev/null +++ b/src/html/templates/example.mustache @@ -0,0 +1 @@ +
Just an example of a Mustache Template
diff --git a/yarn.lock b/yarn.lock index 15a4f91..6d78564 100644 --- a/yarn.lock +++ b/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==