ben-eb / gulp-bytediff

Compare file sizes before and after your gulp build process.

gulp-bytediff

Compare file sizes before and after your gulp build process.

Install

With npm do:

npm install gulp-bytediff --save-dev

Example

Take any gulp plugin, or series of gulp plugins, & see how much the build process impacted the file size. This example shows how much gulp-cssnano optimized a CSS file:

var gulp = require('gulp');
var bytediff = require('gulp-bytediff');
var cssnano = require('gulp-cssnano');

gulp.task('default', function() {
    gulp.src('main.css')
        .pipe(bytediff.start())
        .pipe(cssnano())
        .pipe(bytediff.stop())
        .pipe(gulp.dest('./out'));
});

API

bytediff.start() or bytediff()

Creates a new property on the file object that saves its current size.

bytediff.stop(formatFunction)

Outputs the difference between the property saved with the start() method and the current file size.

Customise the output of this by using the format function. An example:

    // ...
    .pipe(bytediff.stop(function(data) {
        var difference = (data.savings > 0) ? ' smaller.' : ' larger.';
        return data.fileName + ' is ' + data.percent + '%' + difference;
    }))
    .pipe(gulp.dest('./out'));

The function gets passed an object with the following properties:

• fileName
• startSize
• endSize
• savings
• percent

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs

gulp-bytediff's Issues

Fails when combined with gulp-ruby-sass

Trying to use this plug, but it seems to fail when also piping through gulp-ruby-sass with the following error. It fails on the .stop()

stream.js:94 throw er; // Unhandled stream error in pipe. ^ Error: Invalid arguments at filesize (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-bytediff/node_modules/filesize/lib/filesize.js:33:9) at /Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-bytediff/index.js:41:56 at wrappedMapper (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-bytediff/node_modules/map-stream/index.js:84:19) at Stream.stream.write (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-bytediff/node_modules/map-stream/index.js:96:21) at write (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-ruby-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:587:24) at flow (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-ruby-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:596:7) at Transform.pipeOnReadable (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-ruby-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:628:5) at Transform.EventEmitter.emit (events.js:92:17) at emitReadable_ (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-ruby-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:412:10) at emitReadable (/Users/imac/Sites/xxxxxxxxxxx/node_modules/gulp-ruby-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:408:5)

This is how im using it

gulp.task('build-module-css', function() {

            gulp.src(['modules/**/css/*.scss','!modules/hub/css/hub-colors.scss'])
                .pipe(bytediff.start())
                .pipe(flatten())
                .pipe(newer({dest:'assets/css/', ext:".css"}))
                .pipe(sass({loadPath:bourbon, sourcemap: true, quiet:true, style:'compressed'}))
                .pipe(bytediff.stop())
                .pipe(gulp.dest('assets/css/'))
                .pipe(livereload());
        });

Any ideas?

Thanks

% difference option?

Great Gulp (plugin). Could it also show the byte size difference as a percentage?

feature request: support aggregated results

Often it is important to simply show how a minification process (for example) has affected all the files.

This project essentially does that, but it would be awesome to see the feature in a more activley maintained project like gulp-bytediff.

https://github.com/SkeLLLa/gulp-sizediff

TypeError when using bytediff with recursive src

It seems if you use bytediff with a recursive src e.g.

gulp.src(paths.images.src + '**/*')

You receive the following error:

TypeError: Cannot read property 'length' of null

I think this has something to do with bytediff not being able to find files when an actual extension isn't given, as when I use it in the following format:

gulp.src([paths.images.src + '**/*.png',paths.images.src + '**/*.jpg',paths.images.src + '**/*.gif',paths.images.src + '**/*.svg'])

It works correctly.