From 2f13a24fb676a30ed8872d0cbb20c8b91d9a0275 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 May 2020 17:17:40 +0100
Subject: [PATCH] add gulp-svgmin

---
 .gitignore                 |  1 +
 README.md                  |  1 +
 gulpfile.js                | 31 +++++++++++++++++++++++++++----
 package.json               |  1 +
 src/includes/svg/README.md |  6 ++++++
 src/svg/README.md          |  3 +++
 yarn.lock                  | 10 +++++++++-
 7 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 src/includes/svg/README.md
 create mode 100644 src/svg/README.md

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fca22c6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+src/includes/svg/
diff --git a/README.md b/README.md
index 125718d..5c3a3c0 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@ Default build directory is `./build`. To change edit `gulpfile.js`.
 * SASS compilation, css minification.
 * HTML file includes.
 * Mustache templating
+* SVG optimisation.
 * BrowserSync.
 
 ## TODO
diff --git a/gulpfile.js b/gulpfile.js
index 0efab0b..0068dc8 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,6 +6,7 @@ const babel = require('gulp-babel');
 const terser = require('gulp-terser');
 const mustache = require('gulp-mustache');
 const fileInclude = require('gulp-file-include');
+const svgmin = require('gulp-svgmin');
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -23,12 +24,14 @@ const srcDir = './src/';
 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');
+const mustacheSrc = path.join(srcDir, 'html/templates/**/*.mustache');
+const includeBaseDir = path.join(srcDir, 'includes/');
+const includeSrc = path.join(includeBaseDir, '**/*');
+const svgSrc = path.join(srcDir, 'svg/**/*.svg');
+const svgDest = path.join(includeBaseDir, 'svg/');
 const htmlDest = buildDir;
 const assetSrc = path.join(srcDir, 'assets/**/*');
 const assetDest = path.join(buildDir, 'assets/');
@@ -64,6 +67,12 @@ function scssCompile() {
 		.pipe(server.stream());
 }
 
+function svgOptimise() {
+	return src(svgSrc)
+		.pipe(svgmin())
+		.pipe(dest(svgDest));
+}
+
 function htmlCompile() {
 	return src(htmlSrc)
 		.pipe(
@@ -98,14 +107,20 @@ function reload(done) {
 
 const jsWatch = () =>
 	watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
+
 const cssWatch = () =>
 	watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
+
+const svgWatch = () =>
+	watch(svgSrc, { ignoreInitial: false }, series(svgOptimise));
+
 const htmlWatch = () =>
 	watch(
 		[htmlSrc, includeSrc, mustacheSrc],
 		{ ignoreInitial: false },
 		series(htmlClean, htmlCompile, reload)
 	);
+
 const assetWatch = () =>
 	watch(
 		assetSrc,
@@ -113,4 +128,12 @@ const assetWatch = () =>
 		series(assetClean, assetCompile, reload)
 	);
 
-exports.default = parallel(jsWatch, cssWatch, htmlWatch, assetWatch, serve);
+exports.default = parallel(
+	jsWatch,
+	cssWatch,
+	svgWatch,
+	htmlWatch,
+	assetWatch,
+	serve
+);
+
diff --git a/package.json b/package.json
index c2e5494..9af08d8 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@babel/polyfill": "^7.6.0",
     "gulp-file-include": "^2.2.2",
     "gulp-mustache": "^5.0.0",
+    "gulp-svgmin": "^2.2.0",
     "modern-css-reset": "^1.1.0"
   }
 }
diff --git a/src/includes/svg/README.md b/src/includes/svg/README.md
new file mode 100644
index 0000000..4d79cbe
--- /dev/null
+++ b/src/includes/svg/README.md
@@ -0,0 +1,6 @@
+DO NOT place SVG files directly in this directory.
+
+Place SVG files to be optimised in `src/svg/`.
+
+If a SVG file is not to be optimised place it in `src/includes/` (or place in
+`src/html/templates` to include with Mustache).
diff --git a/src/svg/README.md b/src/svg/README.md
new file mode 100644
index 0000000..7860d77
--- /dev/null
+++ b/src/svg/README.md
@@ -0,0 +1,3 @@
+SVG files placed in here will be watched and optimised to be copied to `src/includes/svg/`.
+
+Use  `@@include('svg/file.svg')` to include them from `src/includes/svg`.
diff --git a/yarn.lock b/yarn.lock
index 9e7feaa..006cbda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3730,6 +3730,14 @@ gulp-sourcemaps@^2.6.5:
     strip-bom-string "1.X"
     through2 "2.X"
 
+gulp-svgmin@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/gulp-svgmin/-/gulp-svgmin-2.2.0.tgz#eabc2b97aa4aef90c21cef65ae5499b075007323"
+  integrity sha512-MjfZ7DNlomplrhACwmdowPnAV3firF+3432chp1XQyy6OxbZmM7AyMwsITfglS6bGaE3msKiNeqIb0Sn3LHlyg==
+  dependencies:
+    plugin-error "^1.0.1"
+    svgo "^1.2.1"
+
 gulp-terser@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gulp-terser/-/gulp-terser-1.2.0.tgz#41df2a1d0257d011ba8b05efb2568432ecd0495b"
@@ -7101,7 +7109,7 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
   integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==