调试/记录gulp.pipe的输出

Question

我正在尝试对我的js和css统一使用gulp（当然在单独的任务中）。

这是我的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'));

});

我的依赖（获取gulp- *插件）：

  "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"
  },

我面临的问题是以上脚本未在输出文件夹中生成任何内容。

当我简单地删除plugins.filter管道时，它确实在dist文件夹中生成了main.js，但这是无效的（因为它也包含CSS和其他文件）。因此，似乎过滤无法正常工作。

我想知道是否有一种方法可以查看plugins.filter管道的应用程序产生了什么输出，也许是通过登录某个地方来产生的。可能吗？

Answer 1

今天我发现自己同样无法调试，令人沮丧。

注意：我将管道函数称为传递给的函数.pipe(..)

我的黑客方法是：

管道函数中的代码

检查管道函数来自哪里并将其放在console.log()那里。

例如，在gulp-rename的index.js中，在 之前，如果命令是。不幸的是，这需要您检查并理解（至少）相关包含/使用的库的代码。return stream.pipe(rename(..))

...或者...

（匿名？）MITM 功能

使用带有匿名函数的附加值.pipe()作为参数而不是流（请参阅： https: //github.com/blakelapierre/gulp-pipe#source）。匿名函数将包含console.log或任何您需要调试的内容，并且只会转发流，以便代码可以继续执行。

就像是：

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

或类似：

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

类似的东西应该有效。