Replace ImageMagick / GraphicsMagick with Node.js native Jimp and to-…

…ico (resolves issue #17)

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 ## [Unreleased]
+### Changed
+- Replace ImageMagick / GraphicsMagick with Node.js native `Jimp` and `to-ico`
 
 
 

documentation/requirements/macos.md

@@ -17,8 +17,8 @@ Homebrew is the entry point to install many tools
 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 ```
 
-#### Image processors ( [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org) )
-These are used to manipulate images for the iconography
+#### Image processors ( [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org) ) _[deprecated]_
+These were used to manipulate images for the iconography by nwayo prior to 3.8.0
 
 ```shell
 brew install graphicsmagick

documentation/requirements/readme.md

@@ -1,6 +1,5 @@
 # Requirements
 - [Node.js](https://nodejs.org) ([nwayo CLI](https://www.npmjs.com/package/@absolunet/nwayo-cli))
-- [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org)
 
 ## Installation guides
 - [macOS](macos.md)

documentation/requirements/windows.md

@@ -8,8 +8,8 @@ Chocolatey is the entry point to install many tools
 @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
 ```
 
-#### Image processors ( [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org) )
-These are used to manipulate images for the iconography
+#### Image processors ( [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org) ) _[deprecated]_
+These were used to manipulate images for the iconography by nwayo prior to 3.8.0
 
 ```shell
 choco install graphicsmagick --confirm

packages/workflow/helpers/paths.js

@@ -34,6 +34,7 @@ const extension = {};
 extension.bundles     = 'yaml';
 extension.fonts       = '{woff,woff2}';
 extension.images      = '{gif,jpg,png,svg}';
+extension.images2x    = '{jpg,png}';
 extension.scripts     = 'js';
 extension.styles      = 'scss';
 extension.stylesBuild = 'css';
@@ -118,7 +119,7 @@ files.iconsIcon      = `${directory.icons}/${filename.iconsIcon}`;
 files.iconsLarge     = `${directory.icons}/${filename.iconsLarge}`;
 files.iconsTile      = `${directory.icons}/${filename.iconsTile}`;
 files.images         = `${directory.images}/${pattern.anytree}/*.${extension.images}`;
-files.images2x       = `${directory.images}/${pattern.anytree}/*@2x.${extension.images}`;
+files.images2x       = `${directory.images}/${pattern.anytree}/*@2x.${extension.images2x}`;
 files.inline         = `${directory.inline}/${pattern.anytree}/*.${extension.images}`;
 files.raw            = `${directory.raw}/${pattern.anytree}/*`;
 files.scripts        = `${directory.scripts}/${pattern.anytree}/*.${extension.scripts}`;

packages/workflow/helpers/toolbox.js

@@ -7,11 +7,16 @@ const chalk        = require('chalk');
 const deepKeys     = require('deep-keys');
 const log          = require('fancy-log');
 const plumber      = require('gulp-plumber');
+const gutil        = require('gulp-util');
+const Jimp         = require('jimp');
 const without      = require('lodash.without');
 const merge        = require('merge-stream');
 const emoji        = require('node-emoji');
+const path         = require('path');
 const prettyBytes  = require('pretty-bytes');
 const stream       = require('stream');
+const through2     = require('through2');
+const toIco        = require('to-ico');
 const Vinyl        = require('vinyl');
 const fss          = require('@absolunet/fss');
 const { terminal } = require('@absolunet/terminal');
@@ -62,17 +67,64 @@ class Toolbox {
 	}
 
 
-	//-- GraphicsMagick optimization
-	gmOptimization(gmfile, info) {
-		if (info.format === 'JPG') {
-			gmfile.noProfile().quality(95);
-		}
+	//-- Jimp wrapper
+	jimp(custom) {
+		return through2.obj(function(file, encoding, callback) {
 
-		if (info.format === 'PNG' && info.depth === 8) {
-			gmfile.dither(false).colors(256);
-		}
+			Jimp.read(file.contents).then((original) => {
+				const image = original.clone();
 
-		return gmfile;
+				// Type shenanigans
+				let mimeType;
+
+				switch (path.extname(file.path).slice(1).toLowerCase()) {
+
+					case 'jpg':
+						mimeType = Jimp.MIME_JPEG;
+						image.quality(100);
+						break;
+
+					case 'png':
+						mimeType = Jimp.MIME_PNG;
+						image.rgba(true);
+						break;
+
+					default: break;
+
+				}
+
+				custom(Jimp, image);
+
+				image.getBuffer(mimeType, (error, buffer) => {
+					this.push(new gutil.File({
+						base:     file.base,
+						path:     file.path,
+						contents: buffer
+					}));
+
+					return callback(error);
+				});
+			});
+
+		});
+	}
+
+
+	//-- Ico generator
+	ico(sizes) {
+		return through2.obj(function(file, encoding, callback) {
+
+			toIco(file.contents, { resize: true, sizes }).then((buffer) => {
+				this.push(new gutil.File({
+					base:     file.base,
+					path:     file.path.replace(/\.png$/u, '.ico'),
+					contents: buffer
+				}));
+
+				return callback();
+			});
+
+		});
 	}
 
 

packages/workflow/package.json

@@ -55,7 +55,6 @@
     "gulp-cached": "1.1.1",
     "gulp-debug": "4.0.0",
     "gulp-eslint": "6.0.0",
-    "gulp-gm": "0.0.9",
     "gulp-if": "3.0.0",
     "gulp-imagemin": "7.1.0",
     "gulp-insert": "0.5.0",
@@ -69,6 +68,8 @@
     "gulp-sourcemaps": "2.6.5",
     "gulp-stylelint": "10.0.0",
     "gulp-uglify": "3.0.2",
+    "gulp-util": "3.0.8",
+    "jimp": "0.9.3",
     "latest-version": "5.1.0",
     "lodash-cli": "4.17.5",
     "lodash.capitalize": "4.2.1",
@@ -94,6 +95,8 @@
     "sass": "1.25.0",
     "semver": "7.1.2",
     "slash": "3.0.0",
+    "through2": "3.0.1",
+    "to-ico": "1.1.5",
     "uglify-js": "3.7.7",
     "vinyl": "2.2.0",
     "yaml-lint": "1.2.4"

packages/workflow/tasks/assets.js

@@ -4,15 +4,13 @@
 'use strict';
 
 // const debug = require('gulp-debug');
-const gulp         = require('gulp');
-const gm           = require('gulp-gm');
-const imagemin     = require('gulp-imagemin');
-const rename       = require('gulp-rename');
-const { terminal } = require('@absolunet/terminal');
-const flow         = require('~/helpers/flow');
-const paths        = require('~/helpers/paths');
-const toolbox      = require('~/helpers/toolbox');
-const util         = require('~/helpers/util');
+const gulp     = require('gulp');
+const imagemin = require('gulp-imagemin');
+const rename   = require('gulp-rename');
+const flow     = require('~/helpers/flow');
+const paths    = require('~/helpers/paths');
+const toolbox  = require('~/helpers/toolbox');
+const util     = require('~/helpers/util');
 
 
 module.exports = () => {
@@ -44,15 +42,9 @@ module.exports = () => {
 	flow.createTask('assets-images-highdensity', () => {
 		return util.assetsProcess(paths.files.images2x, (stream) => {
 			return stream
-				.pipe(toolbox.plumber())
-				.pipe(gm((gmfile, done) => {
-					gmfile.identify((error, info) => {
-						if (error) {
-							terminal.error(error);
-						}
-						toolbox.gmOptimization(gmfile.resize('50%', '50%'), info);
-						done(null, gmfile);
-					});
+
+				.pipe(toolbox.jimp((Jimp, image) => {
+					image.scale(0.5, Jimp.RESIZE_BICUBIC);
 				}))
 
 				.pipe(imagemin())

packages/workflow/tasks/icons.js

@@ -4,16 +4,14 @@
 'use strict';
 
 // const debug = require('gulp-debug');
-const gulp         = require('gulp');
-const gm           = require('gulp-gm');
-const gulpif       = require('gulp-if');
-const imagemin     = require('gulp-imagemin');
-const rename       = require('gulp-rename');
-const { terminal } = require('@absolunet/terminal');
-const flow         = require('~/helpers/flow');
-const paths        = require('~/helpers/paths');
-const toolbox      = require('~/helpers/toolbox');
-const util         = require('~/helpers/util');
+const gulp     = require('gulp');
+const gulpif   = require('gulp-if');
+const imagemin = require('gulp-imagemin');
+const rename   = require('gulp-rename');
+const flow     = require('~/helpers/flow');
+const paths    = require('~/helpers/paths');
+const toolbox  = require('~/helpers/toolbox');
+const util     = require('~/helpers/util');
 
 
 module.exports = () => {
@@ -37,12 +35,7 @@ module.exports = () => {
 			return stream
 				.pipe(toolbox.plumber())
 
-				.pipe(gm((gmfile) => {
-					return gmfile
-						.define(`icon:auto-resize=${sizes.join(',')}`)
-						.setFormat('ico')
-					;
-				}, { imageMagick: true }))
+				.pipe(toolbox.ico(sizes))
 
 				.pipe(rename(util.assetsRename()))
 			;
@@ -83,13 +76,8 @@ module.exports = () => {
 					return stream
 						.pipe(toolbox.plumber())
 
-						.pipe(gulpif(size !== 512, gm((gmfile, done) => {
-							gmfile.identify((error, info) => {
-								if (error) {
-									terminal.error(error);
-								}
-								done(null, toolbox.gmOptimization(gmfile.resize(size, size), info));
-							});
+						.pipe(gulpif(size !== 512, toolbox.jimp((Jimp, image) => {
+							image.resize(size, size, Jimp.RESIZE_BICUBIC);
 						})))
 
 						.pipe(rename(util.assetsRename(`touch-${size}`)))
@@ -128,13 +116,8 @@ module.exports = () => {
 					return stream
 						.pipe(toolbox.plumber())
 
-						.pipe(gulpif(size !== 256, gm((gmfile, done) => {
-							gmfile.identify((error, info) => {
-								if (error) {
-									terminal.error(error);
-								}
-								done(null, toolbox.gmOptimization(gmfile.resize(size, size), info));
-							});
+						.pipe(gulpif(size !== 256, toolbox.jimp((Jimp, image) => {
+							image.resize(size, size, Jimp.RESIZE_BICUBIC);
 						})))
 
 						.pipe(rename(util.assetsRename(`icon-${size}`)))
@@ -186,20 +169,8 @@ module.exports = () => {
 					return stream
 						.pipe(toolbox.plumber())
 
-						.pipe(gm((gmfile, done) => {
-							gmfile.identify((error, info) => {
-								if (error) {
-									terminal.error(error);
-								}
-
-								const file = toolbox.gmOptimization(gmfile.resize(size[0], size[1]), info);
-
-								if (name === 'wide') {
-									file.background('transparent').gravity('Center').extent(size[0], size[1]);
-								}
-
-								done(null, file);
-							});
+						.pipe(toolbox.jimp((Jimp, image) => {
+							image.contain(size[0], size[1], Jimp.RESIZE_BICUBIC);
 						}))
 
 						.pipe(rename(util.assetsRename(`tile-${name}`)))

readme.md

@@ -17,9 +17,8 @@
 
 
 
-## Requirements (All latest) - [Installation guide](documentation/requirements)
+## Requirements - [Installation guide](documentation/requirements)
 - [Node.js](https://nodejs.org) ([nwayo CLI](https://www.npmjs.com/package/@absolunet/nwayo-cli))
-- [GraphicsMagick](http://www.graphicsmagick.org) / [ImageMagick](https://www.imagemagick.org)
 
 
 
@@ -60,7 +59,7 @@ nwayo is HTML5 ready and uses [gulp](https://gulpjs.com) as a build system
 
 #### Other
 - Optimizes images via [gifsicle](https://www.lcdf.org/gifsicle), [MozJPEG](https://github.com/mozilla/mozjpeg), [optipng](http://optipng.sourceforge.net), [svgo](https://github.com/svg/svgo)
-- Generates iconography via [GraphicsMagick](http://www.graphicsmagick.org), [ImageMagick](https://www.imagemagick.org)
+- Generates iconography via [Jimp](https://github.com/oliver-moran/jimp), [to-ico](https://github.com/kevva/to-ico)