Clever Geek Handbook

How to show the number of processed files in Gulp

I am evaluating Gulp as an alternative to Grunt and have the following problem. Usually all grunt plugins (jshint, jscs, uglify, etc.) show the number of files processed in the task, but this does not seem to be the case for any of the Gulp plugins. Is there a specific reason for this and how can I have the same functionality in Gulp.

As an example:

gulp.task('lint', function () {
    return gulp.src('./js/*.*/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(jshint.reporter('fail'))
        .pipe(jscs('./.jscsrc'));
});

will only show

[22:36:43] Finished 'lint' after 2.77 s

but I would like to see the number of files that have been processed as Grunt shows

Running "jshint:all" (jshint) task
>> 42 files lint free.
Running "jscs:src" (jscs) task
>> 42 files without code style errors.

Thank!

+3


source to share


3 answers


The reasons gulp plugins don't do is that plugins are meant to not know the number of files. They (almost always) only see one file at a time as they go through streams.

Grunt works like this (using Less / CSS for a simple example):

  • All Fewer files are transferred to Less and processed and then saved to a new location as CSS
  • Once every file is rendered Less, all css files are rendered through the css linter
  • After all files have been liquefied, all CSS files are compressed using the CSS optimizer and then saved back
  • Done.

Each step must wait for the complete completion of the previous state.

Gulp works something like this:

  • Start uploading Less files.
  • Once the file is found, go to Less
  • As soon as less number is executed, run CSS in CSS with CSS linter
    • Less will now run in the next file, if any
  • Once the linter ends, run the CSS in memory with the optimizer
    • Now linter will start working on the next file if "Less" is done
  • Now write the file to the destination.
    • The optimizer can start with the next file after linter
  • Repeat 2-5 until all files are running in the process.


Steps 2-5 can occur simultaneously, each in a different file.

At the same time, it is possible to have a plugin that keeps track of the number of files that will be counted until the stream ends and then print it out. (It probably won't work in a continuous thread like the one created gulp-watch

, because those threads never end.)

I haven't seen an existing plugin that does this, but you could do it in your gulpfile similar to this (untested):

// need to run: npm i --save-dev 'through'
var through = require('through');

function count(message) {
  var count = 0;

  function countFiles(file) {
    count++;
  }

  function endStream() {
    console.log(count + ' ' + message || 'files processed.');
    this.emit('end');
  }

  return through(countFiles, endStream);
};

Use it like this:

.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'))
.pipe(count('files lint free.'))
+3


source


As of May 2015, you can:

  • use gulp -count to count the number of files, or
  • gulp-debug to view all files and count them.


Btw, gulp-count only counts files, but gulp-debug counts and lists both files and folders.

+1


source


It's easy!

const glob = require('glob');
const search = './__tests__/*.js';
const files = glob.sync(search);
console.log(files.length);
-1


source






More articles: