jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/387194 )
Change subject: SVG Sprites - Remove old gulp tasks & npm deps
......................................................................
SVG Sprites - Remove old gulp tasks & npm deps
Removes unneeded gulp tasks related to the old image processing
workflow. Modifying gulp tasks to suit new SVG sprite workflow.
In Gulpfile, renames the image optimization config from `imgOpt` to
`img` and moves the sprite config into this config variable.
Removing npm dependancies that are no longer needed with new SVG
sprite worflow as well. These dependancies include image processors
and optimizers that have been failing to build in CI & certain OS's.
Bug: T129634, T152351, T177343
Change-Id: I139f2e3e4fb071437e2671ee88169f6e40069608
---
M gulpfile.js
M package.json
2 files changed, 31 insertions(+), 90 deletions(-)
Approvals:
jenkins-bot: Verified
VolkerE: Looks good to me, approved
diff --git a/gulpfile.js b/gulpfile.js
index 952cd10..d134a4e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,13 +8,9 @@
var gulp = require( 'gulp' ),
gulpLoadPlugins = require( 'gulp-load-plugins' ),
argv = require( 'yargs' ).argv,
- imagemin = require( 'gulp-imagemin' ),
- imageminPngquant = require( 'imagemin-pngquant' ),
- imageminZopfli = require( 'imagemin-zopfli' ),
siteStats = require( './data/site-stats' ),
fs = require( 'fs' ),
exec = require( 'child_process' ).exec,
- sprity = require( 'sprity' ),
postCSSNext = require( 'postcss-cssnext' ),
postCSSImport = require( 'postcss-import' ),
postCSSReporter = require( 'postcss-reporter' ),
@@ -23,13 +19,6 @@
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;
@@ -49,7 +38,6 @@
console.log( '|
|' );
console.log( '| gulp lint --portal wikipedia.org - run
jslint on JS files on portal JS files |' );
console.log( '| gulp inline-assets --portal wikipedia.org - build
inline CSS and JS assets |' );
- console.log( '| gulp optimize-images --portal wikipedia.org - run
imagemin on image directory |' );
console.log( '| gulp watch --portal wikipedia.org - watches
dev directory and generates an index.html |' );
console.log( '| file in
it without inlined/minified assets |' );
console.log( '| gulp --portal wikipedia.org - run all
of the above on the specified portal page |' );
@@ -152,18 +140,19 @@
]
};
- config.optImage = {
- imageminConf: {
- plugins: [
- imagemin.svgo(),
- imageminPngquant( { quality: '57-95', speed: 1
} ),
- imagemin.optipng(),
- imageminZopfli()
- ],
- options: { verbose: true }
- },
+ config.img = {
src: [ baseDir + 'assets/img/*', '!' + baseDir +
'assets/img/sprite_assets' ],
- dest: prodDir + 'assets/img'
+ dest: prodDir + 'assets/img',
+ sprite: {
+ cssPrefix: 'sprite',
+ assets: baseDir + 'assets/img/sprite_assets/*.svg',
+ outputName: 'sprite',
+ outputCSS: 'sprite.css',
+ outputCSSPath: baseDir + 'assets/css/' + 'sprite.css',
/* outputCSS value */
+ outputSVGGlob: baseDir + 'assets/img/' + 'sprite' /*
outputName */ + '*.svg',
+ outputPNGGlob: baseDir + 'assets/img/' + 'sprite' /*
outputName */ + '*.png',
+ template: baseDir +
'assets/css/sprite-template.mustache'
+ }
};
getConfig = function () {
@@ -269,21 +258,6 @@
} );
/**
- * Optimize images in dev folder and moves them into prod folder.
- */
-gulp.task( 'optimize-images', function () {
-
- var imgOpt;
- requirePortalParam();
-
- imgOpt = getConfig().optImage;
-
- return gulp.src( imgOpt.src )
- .pipe( imagemin( imgOpt.imageminConf.plugins,
imgOpt.imageminConf.options ) )
- .pipe( gulp.dest( imgOpt.dest ) );
-} );
-
-/**
* Watch for changes in dev folder and compile:
* - handlebars templates
* - postCSS files
@@ -377,7 +351,7 @@
* Must be run when after all assets have been versioned, minified &
* 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() {
+gulp.task( 'update-urls-to-purge', [ 'compile-handlebars', 'svgSprite',
'postcss', 'inline-assets', 'clean-prod-js', 'concat-minify-js', 'minify-html',
'copy-images', 'copy-translation-files' ], function() {
var UrlsToPurge = [
'https://www.wikibooks.org/',
@@ -425,37 +399,6 @@
} );
/**
- * Generate images sprites and accompanying CSS files using Sprity.
- * Outputs sprites into dev assets/img folder.
- * Outputs css into dev css/sprites.css file.
- *
- * Sprites are seperated into subfolders in img/sprite_assets.
- * The contents of each folder will output a single sprite, named after the
folder.
- * Sprity will generate @2x, @1.5x, and @1x versions of the sprite.
- *
- * You should only supply and place the @2x versions of the assets into the
sprite folders.
- */
-gulp.task( 'sprite', function () {
-
- requirePortalParam();
-
- return sprity.src( {
- src: getBaseDir() + 'assets/img/sprite_assets/**/*.{png,jpg}',
- cssPath: 'portal/wikipedia.org/assets/img/',
- style: getBaseDir() + 'assets/css/sprites.css',
- prefix: 'sprite',
- dimension: [ { ratio: 1, dpi: 72 },
- { ratio: 1.5, dpi: 144 },
- { ratio: 2, dpi: 192 }
- ],
- split: true,
- margin: 0,
- cachebuster: true
- } )
- .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.
@@ -463,7 +406,8 @@
* 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 )
+ var conf = getConfig();
+ return gulp.src( conf.img.sprite.assets )
.pipe( plugins.svgSprite( {
shape: {
spacing: {
@@ -474,15 +418,15 @@
mode: {
css: {
layout: 'vertical',
- sprite: '../' + spriteConfig.outputName +
'.svg',
+ sprite: '../' + conf.img.sprite.outputName +
'.svg',
bust: true,
dimensions: true,
- common: spriteConfig.cssPrefix,
+ common: conf.img.sprite.cssPrefix,
render: {
css: {
dimensions: true,
- dest: '../' +
spriteConfig.outputCSS,
- template: getBaseDir() +
spriteConfig.template
+ dest: '../' +
conf.img.sprite.outputCSS,
+ template:
conf.img.sprite.template
}
}
}
@@ -497,13 +441,14 @@
* Remove existing SVG sprite before generating a new one.
*/
gulp.task( 'cleanSprites', function() {
- return del( getBaseDir() + 'assets/img/' + spriteConfig.outputName +
'-*' );
+ var conf = getConfig();
+ return del( [ conf.img.sprite.outputSVGGlob,
conf.img.sprite.outputPNGGlob ] );
} );
/**
* Create a PNG fallback for the SVG sprite using PhantomJS.
*/
gulp.task( 'convertSVGtoPNG', [ 'createSvgSprite' ], function() {
- return gulp.src( getBaseDir() + 'assets/img/' + spriteConfig.outputName
+ '*.svg' )
+ return gulp.src( getConfig().img.sprite.outputSVGGlob )
.pipe( plugins.svg2png() )
.pipe( gulp.dest( getBaseDir() + 'assets/img/' ) );
} );
@@ -515,17 +460,17 @@
* this task changes one of the extensions to '.png'.
*/
gulp.task( 'replaceSVGSpriteCSS', [ 'createSvgSprite' ], function() {
- return gulp.src( getBaseDir() + 'assets/css/' + spriteConfig.outputCSS )
+ return gulp.src( getConfig().img.sprite.outputCSSPath )
.pipe( replace( '.svg")/* replace */;', '.png");' ) )
.pipe( gulp.dest( getBaseDir() + 'assets/css/' ) );
} );
-/**
- * Move images to prod folder.
- */
-gulp.task( 'move-images', [ 'createSvgSprite' ], function () {
- var imgOpt = getConfig().optImage;
+/*
+* Copy images to prod folder.
+*/
+gulp.task( 'copy-images', [ 'createSvgSprite' ], function () {
+ var conf = getConfig();
requirePortalParam();
- return gulp.src( imgOpt.src ).pipe( gulp.dest( imgOpt.dest ) );
+ return gulp.src( conf.img.src ).pipe( gulp.dest( conf.img.dest ) );
} );
gulp.task( 'svgSprite', [ 'createSvgSprite', 'convertSVGtoPNG',
'replaceSVGSpriteCSS' ] );
@@ -537,13 +482,13 @@
gulp.task( 'default', [
'lint',
'compile-handlebars',
- 'sprite',
+ 'svgSprite',
'postcss',
'inline-assets',
'clean-prod-js',
'concat-minify-js',
'minify-html',
- 'optimize-images',
+ 'copy-images',
'copy-translation-files',
'update-urls-to-purge'
] );
diff --git a/package.json b/package.json
index d25d17f..f616ecf 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
"gulp-eslint": "^3.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.0",
- "gulp-imagemin": "^3.0.3",
"gulp-inline": "^0.1.0",
"gulp-load-plugins": "^1.0.0",
"gulp-postcss": "^6.0.1",
@@ -36,8 +35,6 @@
"gulp-uglify": "^1.4.2",
"gulp-useref": "^3.0.5",
"handlebars": "^4.0.4",
- "imagemin-pngquant": "^5.0.0",
- "imagemin-zopfli": "^5.0.0",
"jshint": "^2.9.2",
"moment": "^2.10.6",
"phantomjs-prebuilt": "^2.1.3",
@@ -45,7 +42,6 @@
"postcss-import": "^8.0.2",
"postcss-reporter": "^2.0.0",
"preq": "^0.4.12",
- "sprity": "git+https://github.com/nealfennimore/sprity";,
"stylelint": "7.8.0",
"stylelint-config-wikimedia": "0.4.1",
"sync-request": "^3.0.1",
--
To view, visit https://gerrit.wikimedia.org/r/387194
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I139f2e3e4fb071437e2671ee88169f6e40069608
Gerrit-PatchSet: 10
Gerrit-Project: wikimedia/portals
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: Hashar <has...@free.fr>
Gerrit-Reviewer: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: Mxn <m...@1ec5.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
