sindresorhus/gulp-size

Display the size of your project

gulp-size

Display the size of your project

Logs out the total size of files in the stream and optionally the individual file-sizes.

Install

npm install --save-dev gulp-size

Usage

import gulp from 'gulp';
import size from 'gulp-size';

export default () => (
	gulp.src('fixture.js')
		.pipe(size())
		.pipe(gulp.dest('dist'))
);

API

size(options?)

options

Type: object

title

Type: string
Default: ''

Give it a title so it's possible to distinguish the output of multiple instances logging at once.

gzip

Type: boolean
Default: false

Displays the gzipped size.

brotli

Type: boolean
Default: false

Displays the brotli compressed size.

uncompressed

Type: boolean
Default: false if either of gzip or brotli is true, otherwise true

Displays the uncompressed size.

pretty

Type: boolean
Default: true

Displays prettified size: 1337 B → 1.34 kB.

showFiles

Type: boolean
Default: false

Displays the size of every file instead of just the total size.

showTotal

Type: boolean
Default: true

Displays the total of all files.

size.size

Type: number
Example: 12423000

The total size of all files in bytes.

size.prettySize

Type: string
Example: 14 kB

Prettified version of .size.

Example

You could, for example, use this to report the total project size with gulp-notify:

import gulp from 'gulp';
import size from 'gulp-size';
import notify from 'gulp-notify';

export default () => (

exports.default = () => {
	const sizeInstance = size();

	return gulp.src('fixture.js')
		.pipe(sizeInstance)
		.pipe(gulp.dest('dist'))
		.pipe(notify({
			onLast: true,
			message: () => `Total size ${sizeInstance.prettySize}`
		}));
};

gulp-size's Issues

write in file

gulp newbie question :
Is-it possible to redirect gulp.log (in the console) to a file ?
Thank Ami44

gulp-util removal request

gutil.File => https://www.npmjs.com/package/vinyl
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
gutil.colors => https://www.npmjs.com/package/ansi-colors
gutil.date => https://www.npmjs.com/package/date-format
gutil.log => https://www.npmjs.com/package/fancy-log
gutil.template => https://www.npmjs.com/package/lodash.template
gutil.env => https://www.npmjs.com/package/minimist
gutil.beep => https://www.npmjs.com/package/beeper
gutil.noop => https://www.npmjs.com/package/through2
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string '\n' in your code
gutil.combine => https://www.npmjs.com/package/multipipe
gutil.buffer => https://www.npmjs.com/package/list-stream
gutil.PluginError => https://www.npmjs.com/package/plugin-error

Make displaying the total file-size optional as well

Why is title automatically quoted?

Can this line

title = title ? ('\'' + chalk.cyan(title) + '\' ') : '';

be replaced with this one?

title = title ? chalk.cyan(title) : '';

gziped and non gziped log

Could you add possibility to see gziped and non gziped size at the same time.
Thank you.

Error when using `{gzip: true}`

zlib.js:166
callback(null, buf);
^
TypeError: object is not a function
at Gzip.onEnd (zlib.js:166:5)
at Gzip.EventEmitter.emit (events.js:117:20)
at _stream_readable.js:920:16
at process._tickCallback (node.js:415:13)

title as a second parameter

It would be helpful, if we could set title as second parameter, so we could do something like this:

var conf = {
    size: {} // some general configuration we want to use for all instances
}

gulp.task('compile:client', function() {
    var assets = $.useref.assets();
    return gulp.src('./app/**/*.html')
        .pipe(assets)
        .pipe($.if('*.css', $.less()))
        .pipe($.if('*.css', $.size(conf.size, 'css'))) // <--
        .pipe($.if('*.js', $.size(conf.size, 'js'))) // <--
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe(gulp.dest('./dist'));
});

Option to add custom message

It is not uncommon to wish to see CSS size and scripts' size, so it would be great to be able to specify an additional/custom message to be displayed when rendering the calculated size.

A silent mode

Hi,

I would mute output with option --silent but gulp-size continue to print log.

$ gulp build --silent
[12:43:13] all files 4.29 kB
[12:43:13] all files 3.06 kB
[12:43:13] all files 1.94 kB
[12:43:14] all files 60.22 kB

Why are some files lost when I use your plugin?

My simple task:

gulp.task('images', () => {
    gulp.src('app/images/**/*')
        .pipe(gulp.dest('dist/images'))
        .pipe($.size({title: 'images', showFiles}))
});

If I run this task on a large number of files (46 or more), then this task does not process all files. They are not even copied to the dist folder.

full file path

Hi!

Thank you so much for this excellent plugin.

I was wondering if it is possible to output the whole path of the file, not just the file name? Due to our folder structure we have a lot of files with the same name in a project, identified by their folders.

I have edited my local version by changing this line to file.path - however this outputs the file path from the root of the server, I was expecting one relative to the gulpfile.

Thanks again 👍

Show filename and size instead of total (when piping one file)

I'm using gulp-size after browserify and less because I am interested in the total filesize. Since my pipes build multiple files, having only the total doesn't tell me which file has which size.
I can add showFiles, but in that case I have 2 lines for each output file.

What do you think about adding an option showTotal to turn totals off? Or is there a way to figure out only one file is piped and replace 'total' by the filename?

I'm happy to send a PR after your feedback.

(As a tiny sidenote: the blue used on the filename is the only color that is unreadable on Windows - would cyan be an option? A color option would be overkill I guess.)

support for browserify

Hello, this plugin not working with browserify. Output file is empty.

Here is the example what I using.

gulp.task('js', () =>
  browserify(/* source */, /* config */)
    .bundle()
    .pipe(soure('main.min.js'))
    .pipe(size({ gzip: process.env.NODE_ENV === 'production' }))
    .pipe(gulp.dest('./dest'))
);

and borwserify config

const config = {
  transform: ['vueify', 'babelify'],
  debug: false,
};

if (process.env.NODE_ENV === 'production') {
  config.transform.push(['envify', { global: true }]);
  config.transform.push([
    'uglifyify',
    {
      mangle: true,
      global: true,
      sourceMap: false,
      compress: {
        sequences: true,
        dead_code: true,
        booleans: true,
      },
    },
  ]);
}

module.exports = config;

Print nothing when more than 16 files.

Great job! But it is really odd that when there are more than 16 files in my project, the plugin print nothing. It seems that the "flushFunction" provided to "through2" was not executed.

It prints "all files 0 B" when no file in stream

It's boring if I write scripts like this:

var ctrls = [
    {src: '**', cwd: 'Views/', dest: "'},
    {src: '*.js', cwd: 'Layouts/Scripts/Library/', dest: "'}
];
    ctrls.forEach(function(ctrl){
        var stream = gulp.src(ctrl.src, {cwd: ctrl.cwd})
            .pipe($.changed(ctrl.dest))
            .pipe(gulp.dest(ctrl.dest))
            .pipe(buffer())
            .pipe($.print())
            .pipe($.size());
    });

Show raw and gzip size?

@sindresorhus what do you think of making the gzip option additive so the plugin could show both the initial file size and gzip-ed file size? So the option could be like:

size: {
  raw: true,
  gzip: true
}

or simply we could solve this by introducing another option raw / initial or sth along those line. Then of course the output would have to change.

WDYT?

Add Changelog

Get the size value

Hello, how can I get the size value ?
E.g. output with gulp-notify. Smth like size().value.

Is it possible ?

Replace deprecated dependency gulp-util

gulp-util has been recently deprecated. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is one of the most popular packages still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

• https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• gulpjs/gulp-util#143

Report filesize change

Would be cool if it was possible to do something like

.pipe(size.measure())
.pipe(uglify())
.pipe(size()) // Displays the before and after filesize, or just a percentage improvement

Bonus if you can find an easy way to handle this with concats.

showFiles: true unreadable on putty ?

Sorry that issue not totally related with gulp-size. With Putty client, on individual file names, the dark blue color is close to absolutely unreadable on black background. I guess I can modify the color in my own putty settings, but maybe you'd want to modify it to a color natively readable for putty users (lighter blue).

Total size project

The total size of the project can be calculated without using "gulp-notify"..
(Useful for, for example, reporting the total project size with gulp-notify)

const build = 'build/'
const config_size = {
    showTotal: true,
    pretty: true,
    title: 'All project: '
}
function allSize() {
    return src(build + '**/*.*')
        .pipe(size(config_size))
}
exports.allSize = allSize // gulp allSize

In my build, this works great!

Show normal and gzipped sizes together

[gulp] gulp-size: app.css 3.38 kB
[gulp] gulp-size: app.css 1.32 kB (gzipped)
=>
[gulp] gulp-size: app.js 3.38 kB (1.32 kB gzipped)

Don't log output.

Hey @sindresorhus,

I would love to have an an option like hideLog: true which just does not output anything.

It would be extremely simple to implement and allow for one to collect different size measurements and report a result in the end.

I am happy to send PR if you want, its basically just another check in the if that otherwise reports all. There should be no bc problem.

Input AND output size

Would showing the input AND output size of files be in the scope of the plugin?

I've hacked together the functionality for my dev machine (never written a plugin before), but it is a bit flakey depending on what pipes the files are run through previously, mainly gulp-ruby-sass.

This is where i got to. The main problem when passing through gulp-ruby-sass is that the original file size isn't available

'use strict';
var gutil = require('gulp-util');
var through = require('through2');
var prettyBytes = require('pretty-bytes');

module.exports = function (options) {
    options = options || {};

    var totalSize = 0;
    var totalOriginalSize = 0;

    return through.obj(function (file, enc, cb) {
        if (file.isNull()) {
            this.push(file);
            return cb();
        }

        if (file.isStream()) {
            this.emit('error', new gutil.PluginError('gulp-size', 'Streaming not supported'));
            return cb();
        }

        var size = file.contents.length;
        totalSize += size;

        if(file.stat) {
            var originalSize = file.stat.size;
            totalOriginalSize += originalSize;
        }

        if (options.showFiles === true) {
            if(file.stat) {
                var perc = Math.round(100-(size/originalSize*100)).toFixed(2) + '%';
                gutil.log('gulp-size: ' + gutil.colors.blue(file.relative) + ' ' + prettyBytes(originalSize) + ' -> ' + prettyBytes(size) + ' ' + gutil.colors.green(perc));
            } else {
                gutil.log('gulp-size: ' + gutil.colors.blue(file.relative) + ' ' + prettyBytes(size));
            }
        }

        this.push(file);
        cb();
    }, function (cb) {
        gutil.log('gulp-size: ' + gutil.colors.green('total ') + prettyBytes(totalOriginalSize) + ' -> ' + prettyBytes(totalSize));
        cb();
    });

Unable to retrieve size of total files for gulp-notify / size().prettySize, size().size

Well basically same issue that was opened almost 1 year ago.

#20

Don't work with browserify

Don't work with browserify :

var b = watchify(browserify(opts), { poll: true });

b.on('update', function() {
  gutil.log('JS updated, start browserify');
  bundle();
});

function bundle() {
  return b.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(size({
      showFiles: true
    }))
    .pipe(gulp.dest('./static/build/'))
    .on('end', function() { 
      gutil.log('Browserify finish');
    });
}

Some tips ?

end vs. finish

I think using .on('end', done) after gulp-size will cause a dependent task not to run but using finish will.