add mustache templating
This commit is contained in:
parent
113882f731
commit
2938c65e79
13
README.md
13
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.
|
||||
|
|
122
gulpfile.js
122
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);
|
||||
|
|
|
@ -30,6 +30,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.6.0",
|
||||
"gulp-mustache": "^5.0.0",
|
||||
"modern-css-reset": "^1.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<div>Just an example of a Mustache Template</div>
|
23
yarn.lock
23
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==
|
||||
|
|
Loading…
Reference in New Issue