How to display file size of a single file among multiple files using gulp?

Question

I am using the following gulp task to process all scss to CSS, combine these into one minified file, as well as show the file size. However, I will like to see what the file size of the minified CSS file and the map file separately. The following do not do the job.

gulp.task('styles', function () {
  return gulp.src(config.css.src)
    .pipe(glob())
    .pipe(plumber({
      errorHandler: function (error) {
        notify.onError({
          title: 'Processing all custom SCSS files to css',
          subtitle: 'Failed!',
          message: 'Error: <%= error.message %>',
          sound: 'Frog '
        })(error);
        this.emit('end');
      }}))
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefix(autoprefixerOptions))
    .pipe(sourcemaps.write('./css'))
    .pipe(gulp.dest(config.css.dest))
    .pipe(size({
      title: 'Total file size of custom css file and the map file associated with the css file: ',
      showFiles: 'true',
      showTotal: 'true',
      prettySize: 'true'
    }));
});

Answer 1

I would go with a different approach, instead of adding two more plugins to the pipeline (gulp-filter and gulp-if).

To start, I would change gulp-size plugin for the gulp-filesize, and create two tasks, one for the styles compiling, linting and sourcemaps. And another one, just for getting the filesizes of those two files you need.

const gulp = require('gulp');

// The rest of the plugins you're using here

const runSequence = require('run-sequence'); // Run sequentially tasks
const size = require('gulp-filesize'); // Change gulp-size to gulp-filesize

// Create one task that will handle both styles:compile and styles:size tasks
gulp.tasks('styles', function () {
   // You will run compilation first, then check file sizes
   runSequence('styles:compile', 'styles:size');
});

gulp.task('styles:compile', function () {
  return gulp.src(config.css.src)
    .pipe(glob())
    .pipe(plumber({
      errorHandler: function (error) {
        notify.onError({
          title: 'Processing all custom SCSS files to css',
          subtitle: 'Failed!',
          message: 'Error: <%= error.message %>',
          sound: 'Frog '
        })(error);
        this.emit('end');
      }}))
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefix(autoprefixerOptions))
    .pipe(sourcemaps.write('./css'))
    .pipe(gulp.dest(config.css.dest));
});

gulp.task('styles:size', function () {
  // This will output the size of both files
  return gulp
    .src(['path/css/yourcssfile.css', 'path/css/yourmapfile.css.map'])
    .pipe(size());
});

Run gulp styles and you should be getting both files' sizes, like this:

[14:12:36] Size main.css : 1234 B
[14:12:36] Size main.css.map : 1234 B

Hope this helps you :)