Comment puis-je rediriger la sortie de gulp-w3c-css vers la console?

Question

Lorsque je suis les exemples pour gulp-w3c-css, je n'arrive pas à obtenir les résultats à imprimer dans la console plutôt que dans un répertoire de sortie.

Comparez comment j'utilise CSSLint et W3C-CSS ci-dessous. J'aimerais que la fonction soit identique.

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

La meilleure solution serait juste d'avoir une fonction de journaliste qui fonctionne comme le csslint.reporter fait.

Answer 1

Le plug-in gulp-w3c-css sérialise les résultats de validation pour chaque fichier sur JSON et stocke ce JSON dans la propriété file.contents. Le format de cette sérialisation JSON ressemble à peu près comme suit (pour plus de détails, voir le 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' } ] 
} 

Donc, tout ce que vous avez à faire est parse que JSON puis enregistrer les informations sur la console de quelque façon que vous voulez .

Voici un exemple simple de la façon dont vous pouvez le faire:

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

je map-stream au lieu de gutil.buffer() de sorte que les résultats pour chaque fichier sont imprimés dès qu'ils sont disponibles au lieu de tout imprimer à tout fin. Pouvez-vous utiliser cette solution?