gulp-vinyl-size
Gulp plugin to log the size of individual files (Vinyl objects) in the stream. A simpler, more flexible alternative to gulp-size.
Install
$ npm install --save-dev gulp-vinyl-size
Basic Usage
const gulp = require('gulp');
const size = require('gulp-vinyl-size');
function copyScripts() {
return gulp
.src('assets/scripts/*.js')
.pipe(size())
.pipe(gulp.dest('/dist/js/'));
}
// [13:01:44] main.js: 3.13 kB
// [13:01:45] demo.js: 1.09 kBOptions
The first parameter is an options object.
gzip (Default: false)
Additionally log gzipped-size.
.pipe(size({gzip: true}))
// [12:32:22] main.js: 5.29 kB (2.18 kB gzipped)bytes (Default: false)
Log size in bytes rather than converting to kilobytes, megabytes, etc.
.pipe(size({bytes: true}))
// [12:32:22] main.js: 5417 Bfilesize
All options get passed directly to the size-prettifying package filesize. See it's npm page for a full list of options.
.pipe(size({base: 2, spacer: '|'}))
// [12:32:22] main.js: 5.29|KiBCallback function
The second parameter is a callback function that lets you do whatever you want with the size info, instead of it being logged automtically.
.pipe(size({}, size => console.log(`Minified CSS: ${size}`))
// Minified CSS: 3.13 kBfancy-log can be used to keep the timestamp when logging via a callback.
const log = require('fancy-log');
// ...
.pipe(size({}, size => log(`Minified CSS: ${size}`)))
// [12:32:22] Minified CSS: 3.13 kBAdvanced usage
The parameter of the callback (which can be named anything, but size or info are recommended) is an object which outputs the size string when used within a template literal, but it also contains these properties:
-
sizeString- Size with gzipped size (ifgzip: true). E.g.'24 B (gzipped: 8 B)'. Same asinfodirectly in the callback. -
size- Size without gzipped size. E.g. just'24 B'. -
gzip- Gzipped size, available even if thegzipoption is false. E.g.'8 B' -
filename-file.relativeof the vinyl. E.g.'main.js'.
With these properties, multiple calls to gulp-vinyl-size, fancy-log and ansi-colors, detailed logging can be done, e.g.
const gulp = require('gulp');
const size = require('gulp-vinyl-size');
const log = require('fancy-log');
const c = require('ansi-colors');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const purgecss = require('gulp-purgecss');
function css() {
return gulp
.src('src/scss/style.scss')
.pipe(sass().on('error', sass.logError))
.on('data', () => log('CSS'))
.pipe(size({}, info => log(`└ transpiled ${color.magenta(info)}`)))
.pipe(purgecss({content: ['**/*.php']}))
.pipe(size({}, info => log(`└ purged ${color.magenta(info)}`)))
.pipe(cleanCSS())
.pipe(size({}, info => log(`└ minified ${color.magenta(info.size)} ${color.gray(`(gzipped: ${info.gzip})`)}`)))
.pipe(gulp.dest('dist/css'));
}
// [11:02:38] Starting 'css'...
// [11:02:39] CSS
// [11:02:39] └ transpiled 29.06 kB
// [11:02:40] └ purged 6.31 kB
// [11:02:40] └ minified 3.13 kB (gzipped: 1.04 kB)