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

Question

When I follow the examples for gulp-w3c-css I am unable to get the results to print in the console instead of in an output directory.

Compare how I am using CSSLint and W3C-CSS below. I'd like the function to be identical.

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

The very best solution would be just to have a reporter function that works like the csslint.reporter does.

Can you use this solution? http://stackoverflow.com/a/24470353/1241736 — henry, Aug 08 '16 at 20:17

Sven Schoenung · Accepted Answer · 2016-08-08T20:28:02.407

The gulp-w3c-css plugin serializes the validation results for each file to JSON and stores that JSON in the 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' } ]
}

So all you have to do is parse that JSON and then log the information to the console in any way you want.

Here's a simple example of how you could do it:

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

I used map-stream instead of gutil.buffer() so that the results for each file are printed as soon as they are available instead of printing everything at the very end.

Thanks to your answer I was able to write a similar function for the HTML validator. However, there is no output when they are invoked using gulp.watch. See my [tests at GitHub](https://github.com/itpastorn/gulp-w3c-css-test/tree/1ef5ca8691abf5c040911ab35ef8679d29aa3887). But this is probably a separate issue. — itpastorn, Aug 12 '16 at 01:20

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

1 Answers1