Jdrewniak has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/387191 )
Change subject: SVG Sprites - Adding new gulp tasks
......................................................................
SVG Sprites - Adding new gulp tasks
Adding new gulp tasks to support the creation of SVG sprites.
These SVG sprites will be used as CSS background images like the
current png based sprites.
Adds a mustache template to generate the CSS file that goes along
with the SVG sprites as well.
A PNG back of the SVG sprite will also be created using svg2png
(a phantomjs based image generator).
The SVG sprite & png fallback image will also contain a cache-busting hash
suffix.
Note: No actual new SVG images are being added in this patch.
Bug: T129634
Change-Id: I0d9bf4bd9bc6e3d1576c1f8789bc162cff22f0c5
---
A dev/wikipedia.org/assets/css/sprite-template.mustache
M gulpfile.js
M package.json
3 files changed, 115 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/portals
refs/changes/91/387191/1
diff --git a/dev/wikipedia.org/assets/css/sprite-template.mustache
b/dev/wikipedia.org/assets/css/sprite-template.mustache
new file mode 100644
index 0000000..0649fb1
--- /dev/null
+++ b/dev/wikipedia.org/assets/css/sprite-template.mustache
@@ -0,0 +1,29 @@
+{{#hasCommon}}.{{commonName}} {
+ background-repeat: no-repeat;
+ background-image: url("portal/wikipedia.org/assets/img/{{{sprite}}}");
+ background-image: url("portal/wikipedia.org/assets/img/{{{sprite}}}"),
linear-gradient(transparent, transparent);
+ display: inline-block;
+ vertical-align: middle;
+}
+{{/hasCommon}}
+
+{{#shapes}}{{#selector.shape}}{{expression}}{{^last}},
+{{/last}}{{/selector.shape}} {
+{{#hasCommon}}
+background-position: {{position.relative.xy}};
+{{/hasCommon}}
+{{^hasCommon}}background: url("{{{sprite}}}") {{position.relative.xy}}
no-repeat;
+{{/hasCommon}}
+{{#dimensions.inline}}
+width: {{width.outer}}px;
+height: {{height.outer}}px;
+{{/dimensions.inline}}
+}
+{{#dimensions.extra}}
+{{#selector.dimensions}}{{expression}}{{^last}},
+{{/last}}{{/selector.dimensions}} {
+width: {{width.outer}}px;
+height: {{height.outer}}px;
+}{{/dimensions.extra}}
+
+{{/shapes}}
diff --git a/gulpfile.js b/gulpfile.js
index a331f7c..80e5f83 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -22,6 +22,14 @@
del = require( 'del' ),
plugins = gulpLoadPlugins(),
gulpSlash = require( 'gulp-slash' ),
+ replace = require( 'gulp-replace' ),
+ spriteConfig = {
+ cssPrefix: 'sprite',
+ assets: 'assets/img/sprite_assets/*.svg',
+ outputName: 'sprite',
+ outputCSS: 'sprite.css',
+ template: 'assets/css/sprite-template.mustache'
+ },
portalParam = argv.portal,
getBaseDir, getProdDir, getConfig;
@@ -447,6 +455,81 @@
.pipe( plugins[ 'if' ]( '*.png', gulp.dest( getBaseDir() +
'assets/img/' ), gulp.dest( getBaseDir() + 'assets/css/' ) ) );
} );
+/**
+ * Task for creating SVG sprite for use as a CSS background images.
+ * Combines svg images from the assets/img/sprite_assets directory in the dev
folder.
+ * Outputs the SVG sprite in the assets/img dir as sprite-*.svg, where * is a
cachebusting hash.
+ *
+ * Also outputs a CSS file for the SVG sprite named sprite.css in the dev css
folder.
+ */
+gulp.task( 'createSvgSprite', [ 'cleanSprites' ], function() {
+ return gulp.src( getBaseDir() + spriteConfig.assets )
+ .pipe( plugins.svgSprite( {
+ shape: {
+ spacing: {
+ padding: 1
+ },
+ transform: [ 'svgo' ]
+ },
+ mode: {
+ css: {
+ layout: 'vertical',
+ sprite: '../' + spriteConfig.outputName +
'.svg',
+ bust: true,
+ dimensions: true,
+ common: spriteConfig.cssPrefix,
+ render: {
+ css: {
+ dimensions: true,
+ dest: '../' +
spriteConfig.outputCSS,
+ template: getBaseDir() +
spriteConfig.template
+ }
+ }
+ }
+ },
+ variables: {
+ mapname: 'svg-sprite'
+ }
+ } ) )
+ .pipe( plugins[ 'if' ]( '*.svg', gulp.dest( getBaseDir() +
'assets/img/' ), gulp.dest( getBaseDir() + 'assets/css/' ) ) );
+} );
+/**
+ * Remove existing SVG sprite before generating a new one.
+ */
+gulp.task( 'cleanSprites', function() {
+ return del( getBaseDir() + 'assets/img/' + spriteConfig.outputName +
'-*' );
+} );
+/**
+ * Creates a PNG fallback for the SVG sprite using phantomjs.
+ */
+gulp.task( 'convertSVGtoPNG', [ 'createSvgSprite' ], function() {
+ return gulp.src( getBaseDir() + 'assets/img/' + spriteConfig.outputName
+ '*.svg' )
+ .pipe( plugins.svg2png() )
+ .pipe( gulp.dest( getBaseDir() + 'assets/img/' ) );
+} );
+/**
+ * Hacky task that replaces '.svg' with '.png' in the SVG sprite CSS file
+ * that creates a PNG fallback for the SVG sprite in the sprite.css file.
+ *
+ * The custom CSS template contains 2 urls that both end with '.svg' until
+ * this task changes one of them to '.png'.
+ */
+gulp.task( 'replaceSVGSpriteCSS', [ 'createSvgSprite' ], function() {
+ return gulp.src( getBaseDir() + 'assets/css/' + spriteConfig.outputCSS )
+ .pipe( replace( '.svg");', '.png");' ) )
+ .pipe( gulp.dest( getBaseDir() + 'assets/css/' ) );
+} );
+/**
+ * Moves images to Prod folder.
+ */
+gulp.task( 'move-images', [ 'createSvgSprite' ], function () {
+ var imgOpt = getConfig().optImage;
+ requirePortalParam();
+ return gulp.src( imgOpt.src ).pipe( gulp.dest( imgOpt.dest ) );
+} );
+
+gulp.task( 'svgSprite', [ 'createSvgSprite', 'convertSVGtoPNG',
'replaceSVGSpriteCSS' ] );
+
gulp.task( 'lint', [ 'lint-js', 'lint-css' ] );
gulp.task( 'test', [ 'lint' ] );
diff --git a/package.json b/package.json
index 6be2599..d25d17f 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,13 @@
"gulp-load-plugins": "^1.0.0",
"gulp-postcss": "^6.0.1",
"gulp-rename": "^1.2.2",
+ "gulp-replace": "^0.6.1",
"gulp-rev": "^7.1.2",
"gulp-rev-replace": "^0.4.3",
"gulp-slash": "^1.1.3",
"gulp-stylelint": "3.8.0",
+ "gulp-svg-sprite": "^1.3.7",
+ "gulp-svg2png": "^2.0.2",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^1.4.2",
"gulp-useref": "^3.0.5",
--
To view, visit https://gerrit.wikimedia.org/r/387191
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0d9bf4bd9bc6e3d1576c1f8789bc162cff22f0c5
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
