1. gulp-bytediff
Compare file sizes before and after your gulp build process.
gulp-bytediff
Package: gulp-bytediff
Created by: ben-eb
Last modified: Sat, 18 Jun 2022 16:43:00 GMT
Version: 1.0.0
License: MIT
Downloads: 7,156
Repository: https://github.com/ben-eb/gulp-bytediff

Install

npm install gulp-bytediff
yarn add gulp-bytediff

gulp-bytediff Build Status NPM version Dependency Status

Compare file sizes before and after your gulp build process.

Install

With npm do:

npm install gulp-bytediff --save-dev

Example

Take any gulpplugin, or series of gulpplugins and see how much the build process
added to, or removed from, your filesize. This example uses another of my
modules, gulp-cssnano.

 var gulp = require('gulp');
var bytediff = require('gulp-bytediff');
var csso = 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 filesize.

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin