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