rayelliott
/
gulp-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add mustache templating

This commit is contained in:
Ray Elliott 2020-05-19 15:58:29 +01:00
parent 113882f731
commit 2938c65e79
5 changed files with 100 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

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

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

1
package.json
View File

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

1
src/html/templates/example.mustache Normal file
View File

@ -0,0 +1 @@
<div>Just an example of a Mustache Template</div>

23
yarn.lock
View File

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