jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/387191 )
Change subject: SVG Sprites - Adding new gulp tasks
......................................................................
SVG Sprites - Adding new gulp tasks
Add 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, 130 insertions(+), 15 deletions(-)
Approvals:
jenkins-bot: Verified
VolkerE: Looks good to me, approved
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..1ea6420
--- /dev/null
+++ b/dev/wikipedia.org/assets/css/sprite-template.mustache
@@ -0,0 +1,29 @@
+{{#hasCommon}}.{{commonName}} {
+ background-image: url("portal/wikipedia.org/assets/img/{{{sprite}}}");
+ background-image: url("portal/wikipedia.org/assets/img/{{{sprite}}}"),
linear-gradient(transparent, transparent);
+ background-repeat: no-repeat;
+ 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..b7d54e9 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;
@@ -168,8 +176,8 @@
=========================================================================== */
/**
- * Compiles Handlebars templates into dev folder.
- * executes 'build' task if config is undefined
+ * Compile Handlebars templates into dev folder.
+ * Execute 'build' task if config is undefined
*/
gulp.task( 'compile-handlebars', function () {
@@ -183,8 +191,8 @@
} );
/**
- * Compiles postCSS files into regular CSS and
- * outputs them into the CSS dev folder.
+ * Compile postCSS files into regular CSS and
+ * output them into the CSS dev folder.
*/
gulp.task( 'postcss', function () {
@@ -201,8 +209,8 @@
} );
/**
- * Inlines assets of index.html in dev folder,
- * moves index.html into prod folder
+ * Inline assets of index.html in dev folder
+ * and move index.html into prod folder
*/
gulp.task( 'inline-assets', [ 'compile-handlebars', 'postcss' ], function () {
@@ -214,7 +222,7 @@
} );
/**
- * Cleans `assets/js/` folder from the production folder.
+ * Clean `assets/js/` folder from the prod folder.
*/
gulp.task( 'clean-prod-js', [ 'inline-assets' ], function () {
return del( [ getProdDir() + '/assets/js' ] );
@@ -231,7 +239,7 @@
} );
/**
- * Concatenates JS files into a single file and minifies it.
+ * Concatenate JS files into a single file and minify it.
*/
gulp.task( 'concat-minify-js', [ 'clean-prod-js' ], function () {
@@ -248,7 +256,7 @@
} );
/**
- * Minifies index.html file in prod folder,
+ * Minify index.html file in prod folder,
* depends on inline-assets which moves index.html from dev to prod.
*/
gulp.task( 'minify-html', [ 'inline-assets', 'concat-minify-js' ], function ()
{
@@ -261,7 +269,7 @@
} );
/**
- * Optimizes images in dev folder and moves them into prod folder
+ * Optimize images in dev folder and moves them into prod folder.
*/
gulp.task( 'optimize-images', function () {
@@ -276,7 +284,7 @@
} );
/**
- * Watches for changes in dev folder and compiles:
+ * Watch for changes in dev folder and compile:
* - handlebars templates
* - postCSS files
* into dev folder.
@@ -291,7 +299,7 @@
} );
/**
- * Lints js in dev folder as well as in root folder.
+ * Lint JS in dev folder as well as in root folder.
*/
gulp.task( 'lint-js', function () {
var devFolder = 'dev/**/*.js';
@@ -361,13 +369,13 @@
} );
/**
- * Creates a 'urls-to-purge.txt' file at the root of the repo that
+ * Create a 'urls-to-purge.txt' file at the root of the repo that
* contains a list of URL's that must be purged from the server cache.
* These URLs include the root portal urls for all portals and all
* production asset URLs in this repo.
*
* Must be run when after all assets have been versioned, minified &
- * copied into the production dir.
+ * copied into the prod dir.
*/
gulp.task( 'update-urls-to-purge', [ 'compile-handlebars', 'sprite',
'postcss', 'inline-assets', 'clean-prod-js', 'concat-minify-js', 'minify-html',
'optimize-images', 'copy-translation-files' ], function() {
@@ -417,7 +425,7 @@
} );
/**
- * Generates images sprites and accompanying CSS files using Sprity.
+ * Generate images sprites and accompanying CSS files using Sprity.
* Outputs sprites into dev assets/img folder.
* Outputs css into dev css/sprites.css file.
*
@@ -447,6 +455,81 @@
.pipe( plugins[ 'if' ]( '*.png', gulp.dest( getBaseDir() +
'assets/img/' ), gulp.dest( getBaseDir() + 'assets/css/' ) ) );
} );
+/**
+ * Create SVG sprite for use as a CSS background images.
+ * Combine SVG images from the assets/img/sprite_assets directory in the dev
folder.
+ * Output 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 +
'-*' );
+} );
+/**
+ * Create 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/' ) );
+} );
+/**
+ * Replace '.svg' with '.png' extension in the SVG sprite CSS file.
+ * This 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 the extensions 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/' ) );
+} );
+/**
+ * Move 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: merged
Gerrit-Change-Id: I0d9bf4bd9bc6e3d1576c1f8789bc162cff22f0c5
Gerrit-PatchSet: 5
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <[email protected]>
Gerrit-Reviewer: Jdrewniak <[email protected]>
Gerrit-Reviewer: Mxn <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
