How to use gulp-size - 10 common examples

function buildScss(src, dist, title) {
    return gulp.src(src)
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(rename(config.component.pkgName + '.css'))
      .pipe(sourcemaps.write('./'))
      .on('error', console.error.bind(console)) // eslint-disable-line no-console
      .pipe(gulp.dest(dist))
      .pipe(rename(config.component.pkgName + '.min.css'))
      .pipe(cleanCSS())
      .pipe(gulp.dest(dist))
      .pipe(gsize({ title: title }));
  }

// Write sourcemaps: https://www.npmjs.com/package/gulp-sourcemaps
                //.pipe($.sourcemaps.write()) // use "." to write the sourcemap to a separate file in the same dir
                .pipe(sourcemaps.write(".", { // use "." to write the sourcemap to a separate file in the same dir
                    includeContent: false, // alternative: include the contents and remove sourceRoot. Avoids issues but prevents from editing the sources directly in the browser
                    sourceRoot: "/" // use an absolute path because we have scripts in different subpaths
                }))

                // Copy files
                .pipe(gulp.dest(config.javascript.dest))

                // Display the files in the stream
                //.pipe(debug({title: "Stream contents:", minimal: true}))

                // Task result
                .pipe(size({
                    title: "scripts-javascript"
                }));
        });
    }

)

	// Display the files in the stream
	//.pipe(debug({title: 'Stream contents:', minimal: true}))

	// Check the code quality
	.pipe(tslint())

	// Fail the build only if BrowserSync is not active
	.pipe(iff(!browserSync.active, tslint.report('prose')))
	.pipe(iff(browserSync.active, tslint.report('prose', {
		emitError: false
	})))

	// Task result
	.pipe(size({
		title: 'ts-lint'
	}));
});

gulp.task('make:styles', () => {
  return gulp
    .src(`${config.styles.source}/**/*.scss`)
    .pipe(
      plumber({errorHandler: notify.onError('Error: <%= error.message %>')})
    )
    .pipe(
      sass({
        precision: 10, // https://github.com/sass/sass/issues/1122
        includePaths: config.styles.include,
      })
    )
    .pipe(postcss())
    .pipe(gulpif(config.production, header(config.banner)))
    .pipe(size({gzip: true, showFiles: true}))
    .pipe(plumber.stop())
    .pipe(gulp.dest(`${config.styles.build}`))
    .pipe(browser.stream());
});

// Check JS code style (uses .jscsrc)
        .pipe(
            jscs({
                configPath: config.folders.root + "/.jscsrc", // required otherwise the configuration didn't seem to get loaded
                esnext: true, // seems broken: https://github.com/jscs-dev/gulp-jscs/issues/69
                fix: false
            })
        )

        //.pipe(debug({title: "Stream contents:", minimal: true}))

        .pipe(jscsStylish()) // log style errors

        // Task result
        .pipe(size({
            title: "check-js-style"
        }));
});

// reference: https://github.com/sindresorhus/gulp-autoprefixer/issues/8#issuecomment-93817177
	.pipe(iff([ config.extensions.css, '!*.map' ], autoprefixer({
		browsers: config.autoprefixerBrowsers // alternative: $.autoprefixer('last 2 version')
	})))

	// Output files
	.pipe(gulp.dest(config.styles.dest))

	// Reload Browser if needed
	// Stream if possible
	.pipe(iff(browserSync.active, browserSync.reload({
		stream: true, once: true
	})))

	// Task result
	.pipe(size({
		title: 'styles'
	}));
});

})

	// Display the files in the stream
	//.pipe(debug({title: 'Stream contents:', minimal: true}))

	// Filter out the empty directories
	.pipe(utils.filterEmptyDirectories(eventStream))

	// Display the files in the stream
	//.pipe(debug({title: 'Stream contents:', minimal: true}))

	// Copy
	.pipe(gulp.dest(config.copy.dest))

	// Task result
	.pipe(size({
		title: 'copy'
	}));
});

gulp.task('build', ['lint', 'html', 'js', 'js:browserFS', 'css:dist', 'fonts', 'images', 'extras'], () => {
    console.log('\nPlaced optimized files in ' + chalk.magenta('dist/\n'));
    const buildStampFile = 'dist/build-stamp.txt';
    const recentCommitsFile = 'dist/publish-recentcommits.txt';

    const s = size({ title: 'dist' });
    const buildStamp = gulp.src('dist/**/*').pipe(s).on('end', () => {
        fs.writeFileSync(buildStampFile, `Build date: ${(new Date()).toUTCString()}\nBuilt size: ${s.prettySize}\n`);
        console.log('Build stamp written to ' + chalk.magenta(buildStampFile));
    });

    const recentCommitLog = cp.exec('git log -n 5 --oneline', (err, stdout) => {
        if (err) throw err;
        fs.writeFileSync(recentCommitsFile, stdout);
        console.log('Log of recent commits in distribution written to ' + chalk.magenta(recentCommitsFile));
    }).stdout;

    return es.concat(buildStamp, recentCommitLog);
});

plumber({errorHandler: notify.onError('Error: <%= error.message %>')})
    )
    .pipe(
      imagemin([
        mozJpegPlugin({progressive: true}),
        pngquantPlugin(),
        gifLossyPlugin(),
        svgoPlugin({
          plugins: [
            {removeViewBox: true},
            {cleanupIDs: false}
          ]
        })
      ])
    )
    .pipe(size({showFiles: true}))
    .pipe(plumber.stop())
    .pipe(gulp.dest(`${config.images.build}`))
    .pipe(browser.stream())
    .pipe(
      gulpif(
        config.enable.notify,
        notify({
          title: config.notify.title,
          message: 'Images task complete',
          onLast: true,
        })
      )
    );
});

gulp.src(paths.svgs.input)
    .pipe(plumber())
    .pipe(tap((file, t) => {
      if (file.isDirectory()) {
        let name = file.relative + '.svg'
        gulp.src(file.path + '/**/*.svg')
          .pipe(svgstore({
            fileName: name,
            prefix: 'icon-',
            inlineSvg: true
          }))
          .pipe(gulp.dest(paths.svgs.output))
      }
    }))
    .pipe(svgmin())
    .pipe(size({'title': 'SVG'}))
    .pipe(gulp.dest(paths.svgs.output))
}