ufp-optimizer

v0.12.1

Published

2 years ago

optimizing ufp frontend packages

Downloads

0High
0Medium
0Low

froso

froso-ci

compress brotli zopfli optimization

README

UFP optimizer is for optimizing stuff in an easy way

css
images (jpeg, png, webp, svg)
html
javascript
.gz and .br
optimized .htaccess

It is based on a bunch of cross-platform tools and combines them

Prerequisites

Python 2.7
GCC (Unix) or Visual Studio Express (Windows)
Node 8.5

What is this repository for?

ufp-optimizer works on a directory full of assets and compresses/minifies everything inside

zopfli+brotli to text files (html, javascript, svg, css, ...)
image compressions (lossy) with imagemin
webp conversion of images (jpg and png)
html minification with html-minifier
javascript minification with uglify-js
ready to use .htaccess for the above optimizations (so that a compatible browser loads image.jpeg.webp instead of image.jpeg)

It has different presets to get the best out of it

| Preset | Description | | --------- | --------- | | production | Default: good quality with some optimizations, normally this is what you want | | development | fast but not that small, e.g. it does normal .gz generation and not the slower but better zopfli one | | lossy | same as 'production' but smaller but with accepted loss of quality (e.g. images have low quality settings like 30) | | extreme | same as 'production' but with strong settings to get the most out of it. This method takes a long time so be prepared and get a cup of coffee |

How do I start?

First you need to install the package

> npm install ufp-optimizer --save

Then you can either use it in your node.js code, as a cli terminal command or as a webpack plugin.

Node.js usage

If you use ufp-optimizer in your node.js code you have the following commands available

var uo = require('ufp-optimizer')
var settings = uo.getConfig();
settings.inputDir = 'dist';
settings.outputDir = 'blub';
uo.executeOptimizations(settings);

| Command | Params | Description | | --------- | ----------- | --------- | | getConfig | none | Returns the default settings object. You can change anything you like but keep in mind to use different input and outputDir | | executeOptimizations | settings object | The most important command. One function to do everything (copy/css/images/html/...). Just pass the settings and you are good to go | | copy | settings object | Creates the outputDir if necessary or deletes the content in it. It copies everything from inputDir then. You need to pass the settings object which contains inputDir and outputDir | | optimizeImages | settings object | Does lossy png, jpg and svg optimizations on all files in the outputDir. You can fine-tune the algorithms per settingsfile if necessary, e.g. allowing loss to get better results. | | optimizeHTML | settings object | Minimizes html files. By default it does nothing dangerous to keep it compatible with all browsers | | optimizeCSS | settings object | Minimize css files. By default it does nothing dangerous to keep it compatible with all browsers | | optimizeJs | settings object | Minimize js files. By default it does nothing dangerous to keep it compatible with all browsers | | zip | settings object | Does zopfli + brotli compression on all text files |

Commandline usage

You can also use it via command line

> ufp-optimizer-cli optimize [inputDir] [outputDir]

Example for commandline

> ufp-optimizer-cli optimize dist distOptimized

> node node_modules/ufp-optimizer/bin/ufp-optimizer-cli optimize dist distOptimized

The default for inputDir is dist, outputDir is distOptimized.

CLI params

Additional parameters are available to finetune your optimization process

ufp-optimizer-cli optimize [inputDir] [outputDir] --config=myConfig.json --conf.preset=production --preset=development -- debug --help

| Parameter | Description | Example | | --------- | ----------- | ------- | | inputDir | Directory which contains the files that need to be compressed | dist | | outputDir | Where the files will be written. Needs to be different from inputDir | distCompressed | | --config | Optional: A json config file containing specific params. To generate one use the config command | --config=myConfig.json | | --conf | Optional: Same as --config but inline, so no file is expected but instead the attributes | --conf.preset=production --conf.optimizer.imageOptim.enabled=false | | --preset | Optional: 'development', 'production', 'extreme', 'lossy' | --preset=lossy | | --debug | Optional: To get more output | --debug | | --silent | Optional: If set you get no output except a start and finish message | --silent | | --help | Optional: To display a help | --help |

> ufp-optimizer-cli optimize [inputDir] [outputDir] --preset=production --config=myConfig.json
> ufp-optimizer-cli optimize [inputDir] [outputDir] --conf.preset=production --conf.optimizer.imageOptim.enabled=false

You may also run only a specific optimizer, e.g. to only optimize images and nothing else

> ufp-optimizer-cli optimize-images [inputDir] [outputDir]
> ufp-optimizer-cli optimize-css [inputDir] [outputDir]
> ufp-optimizer-cli optimize-html [inputDir] [outputDir]
> ufp-optimizer-cli optimize-js [inputDir] [outputDir]
> ufp-optimizer-cli optimize-zip [inputDir] [outputDir]
> ufp-optimizer-cli optimize-htaccess [inputDir] [outputDir]
> ufp-optimizer-cli optimize-copy [inputDir] [outputDir]

The config command

Last but not least you can print the current configuration settings with the 'config' command, e.g. to see if everything is correct or to generate your own config starter

> ufp-optimizer-cli config > myConfig.json
> ufp-optimizer-cli config --preset=production --config=myConfig.json
> ufp-optimizer-cli config --conf.optimizer.imageOptim.enabled=false

Config params

The config file is a json file containing sever settings to control what will be compressed and how. You can e.g. use a special png compression algorithm on some files or exclude them.

Todos

File based optimization: Allow regex as input and not only full directories
Intelligent optimizer: Image similarity Index, e.g. GMSD for optimal compression method
Better image compression: jpegmini and imageOptim https://jamiemason.github.io/ImageOptim-CLI/
Webpack Plugin?

Known problems

zopfli problem

If you get an error like the one below make sure that the prerequsites are met and execute "npm rebuild"

Error: Cannot find module '/mnt/d/Alex/projects/teo/node_modules/node-zopfli/lib/binding/node-v51-linux-x64/zopfli.node'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/mnt/d/Alex/projects/teo/node_modules/node-zopfli/lib/zopfli.js:7:14)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

write permission problem

If somehow you get an error saying that you dont have permissions deleting the outputDir, close any programs which can access the files in that directory and try again

install ufp-optimizer globally

If you want to install ufp-optimizer as a global module you need to set the --unsafe-perm param.

	sudo npm install -g --unsafe-perm ufp-optimizer