如何使用 gulp 在多个文件中显示单个文件的文件大小？

Question

我正在使用以下 gulp 任务将所有 scss 处理为 CSS，将它们组合成一个缩小文件，并显示文件大小。但是，我想分别查看缩小后的 CSS 文件和地图文件的文件大小。以下不做这项工作。

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

我会采用不同的方法，而不是向管道添加另外两个插件（gulp-filter 和 gulp-if）。

首先，我将gulp-size 插件更改为gulp-filesize，并创建两个任务，一个用于样式编译、linting 和源映射。还有一个，只是为了获取你需要的这两个文件的文件大小。

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());
});

运行gulp styles，您应该会得到两个文件的大小，如下所示：

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

希望对你有帮助:)