gulp-print-spacesavings

This Gulp plugin prints space savings for any Gulp compression plugins, like gulp-uglify, gulp-clean-css, etc. Space savings is the reduction in size relative to the uncompressed size.

Space Savings in % = 1 - Compressed Size / Uncompressed Size

See Wikipedia for more information.

Install

1$ npm install gulp-print-spacesavings --save-dev

Usage

The plugin has zero configuration. There are two methods init and print which should be called before and after any Gulp compression plugin respectively. An example for gulp-clean-css and gulp-uglify is shown below.

1var gulp = require('gulp');
2var cleanCSS = require('gulp-clean-css');
3var uglify = require('gulp-uglify');
4var printSpaceSavings = require('gulp-print-spacesavings');
5...
6
7gulp.task('styles', function() {
8    return gulp.src('app/css/*.css')
9        .pipe(plumber())
10        .pipe(concat('all.css'))
11        .pipe(autoprefix('last 2 versions'))
12        .pipe(printSpaceSavings.init())
13        .pipe(cleanCSS())
14        .pipe(printSpaceSavings.print())
15        .pipe(gulp.dest('dist/'));
16});
17
18gulp.task('scripts', function() {
19    return gulp.src('app/js/*.js')
20        .pipe(plumber())
21        .pipe(jshint())
22        .pipe(jshint.reporter('jshint-stylish'))
23        .pipe(sourcemaps.init())
24        .pipe(printSpaceSavings.init())
25        .pipe(uglify())
26        .pipe(printSpaceSavings.print())
27        .pipe(sourcemaps.write('.'))
28        .pipe(gulp.dest('dist/'));
29});

The output is displayed in the form of a table.

As you can see, the plugin also displays a footer with total uncompressed, compressed sizes and space savings if there are more than one file.