Debugging/logging output of gulp.pipe

Question

I am trying to use gulp for my js and css unification(in separate tasks of course).

Here is my gulpfile.js:

// Include Gulp
var gulp = require('gulp');

// Include plugins
var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
    replaceString: /\bgulp[\-.]/
});

// Define default destination folder
var dest = 'dist/';

// js task
gulp.task('js', function() {

    var jsFiles = ['src/js/*'];

    gulp.src(plugins.mainBowerFiles().concat(jsFiles))
        .pipe(plugins.filter('*.js'))
        .pipe(plugins.concat('main.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(dest + 'js'));

});

My dependencies(to get the gulp-* plugins):

  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.3",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-dest": "^0.2.3",
    "gulp-filter": "^5.0.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-uglify": "^3.0.0",
    "main-bower-files": "^2.13.1",
    "morgan": "~1.6.1",
    "priorityqueuejs": "^1.0.0",
    "serve-favicon": "~2.3.0",
    "socket.io": "^2.0.3"
  },

The problme I face is that above script does not generate anything in the output folder.

When I simply remove the plugins.filter pipe, it does generate a main.js in dist folder, but that is invalid(as it contains css and other files as well). So it seems that the filtering is not working correctly.

I wonder if there is a way to see what output does application of plugins.filter pipe is producing perhaps by logging somewhere. Is it possible?

Answer 1

I found myself today in the same frustrating impossibility to debug.

Note: I call the piped-function the function that is passed into .pipe(..)

My hacky ways were:

Code in the piped-function

Check where the piped-function comes from and put a console.log() there.

For example in the index.js of gulp-rename, before the return stream, in case the command is .pipe(rename(..)). This unfortunately requires you to check and understand (minimally) the code of the related included/used library.

...or...

(Anonymous?) MITM function

Use an additional .pipe() with an anonymous function as argument instead of a stream (see: https://github.com/blakelapierre/gulp-pipe#source). The anonymous function will contain console.log or whatever you need to debug, and will just forward the stream so that the code can keep executing.

Something like:

gulp.src(plugins.mainBowerFiles().concat(jsFiles))
    .pipe(plugins.filter('*.js'))
    .pipe(function() { var stream = arguments[0]; console.log('Path is: ', stream.path); return stream; } () ) // note the '()' at the end to actually execute the function and return a stream for `pipe()` to be processed
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'js'));

or like:

function debug() {
    var stream = arguments[0];
    
    // put your desired debugging code here
    console.log ("I like the Man In The Middle!");
    
    return stream;
}

gulp.src(plugins.mainBowerFiles().concat(jsFiles))
    .pipe(plugins.filter('*.js'))
    .pipe(debug()) 
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.uglify())
    .pipe(gulp.dest(dest + 'js'));

Something like that should work.