add gulp-svgmin
This commit is contained in:
parent
d34a26a308
commit
2f13a24fb6
|
@ -0,0 +1 @@
|
||||||
|
src/includes/svg/
|
|
@ -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
|
||||||
|
|
31
gulpfile.js
31
gulpfile.js
|
@ -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
|
||||||
|
);
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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).
|
|
@ -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`.
|
10
yarn.lock
10
yarn.lock
|
@ -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==
|
||||||
|
|
Loading…
Reference in New Issue