Как я могу передать вывод из 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 документация):

{
  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() так что результаты для каждого файла будут напечатаны, как только они будут доступны, вместо того, чтобы печатать все в самом конце.