Skip to content

Instantly share code, notes, and snippets.

@machal
Created February 7, 2019 05:37
Show Gist options
  • Save machal/fb783689e4a79c2dcf18a074663c3305 to your computer and use it in GitHub Desktop.
Save machal/fb783689e4a79c2dcf18a074663c3305 to your computer and use it in GitHub Desktop.
SVG workflow SUPERKODERS
var config = require('./helpers/getConfig.js');
var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var cachebust = require('gulp-cache-bust');
var fs = require('fs');
var path = require('path');
gulp.task('nunjucks', function() {
var storeList = JSON.parse(fs.readFileSync(path.join(config.basePath.src, 'data/store-list.json'), 'utf8'));
var onError = function(error) {
notify.onError({
title: 'Nunjucks error!',
message: '<%= error.message %>',
sound: 'Beep',
})(error);
return this.emit('end');
};
var stream = gulp.src([
'*.njk',
], {
cwd: config.src.templates,
});
var manageEnvironment = function(environment) {
environment.addFilter('spaceless', function(str) {
var WHITESPACE_AT_START = /^\s+/;
var WHITESPACE_BETWEEN_TAGS = />\s+</g;
var WHITESPACE_AT_END = /\s+$/;
return str
.replace(WHITESPACE_AT_START, '')
.replace(WHITESPACE_BETWEEN_TAGS, '><')
.replace(WHITESPACE_AT_END, '');
});
environment.addFilter('supersvg', function(str, id) {
return str
.replace(/.*<svg/, '<svg preserveAspectRatio="xMidYMid slice"')
.replace(/<(g|rect|path)\s+id="/g, '<$1 class="')
.replace(/\s*(version)=".*?"/g, '')
.replace(/id="(SVGID.*?)"/g, 'id="$1-' + id + '"' )
.replace(/url\(#(SVGID.*?)\)/g, 'url(#$1-' + id + ')' )
.replace(/\s*(x|y)="0px"/g, '')
.replace(/\s*(xml|xmlns|enable)(:|-).*?".*?"/g, '')
.replace(/id="(beer)(.*?)-.*?"/g, 'class="$1$2"');
});
};
stream
.pipe(plumber({
errorHandler: onError,
}))
.pipe(nunjucksRender({
ext: '.php',
path: config.src.templates,
data: { ...config, storeList },
envOptions: {
trimBlocks: true,
lstripBlocks: true,
},
manageEnv: manageEnvironment,
}))
.pipe(cachebust({
type: 'timestamp',
}))
.pipe(gulp.dest(config.dest.templates));
return stream;
});
{% set svg %}
{% include store.storeSVG %}
{% endset %}
{{
svg
| spaceless
| supersvg(store.id)
| safe
}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment