如何将 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 property. The format of that JSON serialization looks roughly like the following (for more details see the 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 instead of gutil.buffer() 以便每个文件的结果在可用时立即打印，而不是在最后打印所有内容。

如何将 gulp-w3c-css 的输出通过管道传输到控制台

How can I pipe the output from gulp-w3c-css to the console

node.js

gulp

css-validator