gulp-w3c-cssの出力をコンソールにパイプする方法

Question

gulp-w3c-cssの例に従うと、出力ディレクトリではなくコンソールで結果を表示できません。

下記のCSSLintとW3C-CSSの使い方を比較してください。私はその機能を同一にしたいと思います。

var gulp = require('gulp'), 
    csslint = require('gulp-csslint'), 
    cssvalidate = require('gulp-w3c-css'); 


gulp.task('csslint',() => 
    gulp.src('testcss/laxhjalpen.css') 
    .pipe(csslint('.csslintrc')) 
    .pipe(csslint.reporter()) 
); 

// Does not work 
gulp.task('cssvalid',() => 
    gulp.src('testcss/*css') 
    .pipe(cssvalidate()) 
    // Next line works but is not what I want 
    .pipe(gulp.dest('reports')) 
    // I suppose I need to get this construct to work but I can't 
    .pipe(gutil.buffer(function(err, files) { 
     if (err) { 
      gutil.log('An error occured', err); 
     } else { 
      // No idea what to write 
      // files - array of validation results (from manual) 
     } 
    })) 
); 

非常に最善の解決策はただはないcsslint.reporterのように働くレポーター機能を持っているだろう。

Answer 1

gulp-w3c-cssプラグインは、各ファイルの検証結果をJSONにシリアル化し、そのJSONをfile.contentsプロパティに格納します。そのJSONのシリアライズの形式は、大きく以下（詳細はw3c-css documentationを参照）のようになります。

{ 
    errors: [ { line: 5, message: 'Some error' }, 
      { line: 42, message: 'Some error' } ], 
    warnings: [ { line: 13, message: 'Some warning' }, 
       { line: 23, message: 'Some warning' } ] 
} 

だから、あなたがしなければならないすべては、そのJSONを解析し、あなたが好きなようにコンソールにログ情報をあります。

ここであなたがそれを行うことができる方法の簡単な例です：

var gulp = require('gulp'); 
var cssvalidate = require('gulp-w3c-css'); 
var gutil = require('gulp-util'); 
var map = require('map-stream'); 

gulp.task('cssvalid', function() { 
    return gulp.src('testcss/*css') 
    .pipe(cssvalidate()) 
    .pipe(map(function(file, done) { 
     if (file.contents.length == 0) { 
     console.log('Success: ' + file.path); 
     console.log(gutil.colors.green('No errors or warnings\n')); 
     } else { 
     var results = JSON.parse(file.contents.toString()); 
     results.errors.forEach(function(error) { 
      console.log('Error: ' + file.path + ': line ' + error.line); 
      console.log(gutil.colors.red(error.message) + '\n'); 
     }); 
     results.warnings.forEach(function(warning) { 
      console.log('Warning: ' + file.path + ': line ' + warning.line); 
      console.log(gutil.colors.yellow(warning.message) + '\n'); 
     }); 
     } 
     done(null, file); 
    })); 
}); 

各ファイルの結果は、すぐに彼らは代わりに、非常にすべてを印刷する利用可能なように印刷されるように、私はmap-stream代わりのgutil.buffer()を使用終わり。