gulpを使用して複数のファイルに1つのファイルのファイルサイズを表示するにはどうすればよいですか？

Question

以下のgulpタスクを使用して、すべてのscssをCSSに処理し、これらを1つのミニファイルにまとめ、ファイルサイズを表示します。しかし、私は縮小された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

I代わりに（フィルタを飲み込むと飲み込む-場合）パイプラインに2つのプラグインを追加する、異なるアプローチとなるだろう。

開始するにはgulp-filesizeのgulp-sizeプラグインを変更し、2つのタスクを作成します.1つはスタイルのコンパイル、linting、およびsourcemapsのタスクです。もう1つは、必要な2つのファイルのファイルサイズを取得するためだけです。

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 

希望、これはあなたを助け:)