add gulp-svgmin

This commit is contained in:
Ray Elliott 2020-05-19 17:17:40 +01:00
parent d34a26a308
commit 2f13a24fb6
7 changed files with 48 additions and 5 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
src/includes/svg/

View File

@ -8,6 +8,7 @@ Default build directory is `./build`. To change edit `gulpfile.js`.
* SASS compilation, css minification. * SASS compilation, css minification.
* HTML file includes. * HTML file includes.
* Mustache templating * Mustache templating
* SVG optimisation.
* BrowserSync. * BrowserSync.
## TODO ## TODO

View File

@ -6,6 +6,7 @@ const babel = require('gulp-babel');
const terser = require('gulp-terser'); const terser = require('gulp-terser');
const mustache = require('gulp-mustache'); const mustache = require('gulp-mustache');
const fileInclude = require('gulp-file-include'); const fileInclude = require('gulp-file-include');
const svgmin = require('gulp-svgmin');
const sass = require('gulp-sass'); const sass = require('gulp-sass');
const postcss = require('gulp-postcss'); const postcss = require('gulp-postcss');
const postcssPresetEnv = require('postcss-preset-env'); const postcssPresetEnv = require('postcss-preset-env');
@ -23,12 +24,14 @@ const srcDir = './src/';
const buildDir = './build/'; const buildDir = './build/';
const jsSrc = path.join(srcDir, 'js/**/*.js'); const jsSrc = path.join(srcDir, 'js/**/*.js');
const jsDest = path.join(buildDir, '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 scssSrc = path.join(srcDir, 'scss/**/*.scss');
const cssDest = path.join(buildDir, 'css/'); const cssDest = path.join(buildDir, 'css/');
const htmlSrc = path.join(srcDir, 'html/**/*.html'); 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 htmlDest = buildDir;
const assetSrc = path.join(srcDir, 'assets/**/*'); const assetSrc = path.join(srcDir, 'assets/**/*');
const assetDest = path.join(buildDir, 'assets/'); const assetDest = path.join(buildDir, 'assets/');
@ -64,6 +67,12 @@ function scssCompile() {
.pipe(server.stream()); .pipe(server.stream());
} }
function svgOptimise() {
return src(svgSrc)
.pipe(svgmin())
.pipe(dest(svgDest));
}
function htmlCompile() { function htmlCompile() {
return src(htmlSrc) return src(htmlSrc)
.pipe( .pipe(
@ -98,14 +107,20 @@ function reload(done) {
const jsWatch = () => const jsWatch = () =>
watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload)); watch(jsSrc, { ignoreInitial: false }, series(jsClean, jsTranspile, reload));
const cssWatch = () => const cssWatch = () =>
watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile)); watch(scssSrc, { ignoreInitial: false }, series(cssClean, scssCompile));
const svgWatch = () =>
watch(svgSrc, { ignoreInitial: false }, series(svgOptimise));
const htmlWatch = () => const htmlWatch = () =>
watch( watch(
[htmlSrc, includeSrc, mustacheSrc], [htmlSrc, includeSrc, mustacheSrc],
{ ignoreInitial: false }, { ignoreInitial: false },
series(htmlClean, htmlCompile, reload) series(htmlClean, htmlCompile, reload)
); );
const assetWatch = () => const assetWatch = () =>
watch( watch(
assetSrc, assetSrc,
@ -113,4 +128,12 @@ const assetWatch = () =>
series(assetClean, assetCompile, reload) series(assetClean, assetCompile, reload)
); );
exports.default = parallel(jsWatch, cssWatch, htmlWatch, assetWatch, serve); exports.default = parallel(
jsWatch,
cssWatch,
svgWatch,
htmlWatch,
assetWatch,
serve
);

View File

@ -32,6 +32,7 @@
"@babel/polyfill": "^7.6.0", "@babel/polyfill": "^7.6.0",
"gulp-file-include": "^2.2.2", "gulp-file-include": "^2.2.2",
"gulp-mustache": "^5.0.0", "gulp-mustache": "^5.0.0",
"gulp-svgmin": "^2.2.0",
"modern-css-reset": "^1.1.0" "modern-css-reset": "^1.1.0"
} }
} }

View File

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

3
src/svg/README.md Normal file
View File

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

View File

@ -3730,6 +3730,14 @@ gulp-sourcemaps@^2.6.5:
strip-bom-string "1.X" strip-bom-string "1.X"
through2 "2.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: gulp-terser@^1.2.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/gulp-terser/-/gulp-terser-1.2.0.tgz#41df2a1d0257d011ba8b05efb2568432ecd0495b" 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-iterator "^2.0.1"
es6-symbol "^3.1.1" es6-symbol "^3.1.1"
svgo@^1.0.0: svgo@^1.0.0, svgo@^1.2.1:
version "1.3.2" version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw== integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==