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的{{1}}插件，并创建两个任务，一个用于样式编译，linting和sourcemaps。还有一个，只是为了获取你需要的那两个文件的文件大小。

gulp-filesize

运行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

希望这可以帮助你：）

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

1 个答案: