gulp.pipe 的调试/记录输出答案

【问题标题】：Debugging/logging output of gulp.pipegulp.pipe 的调试/记录输出
【发布时间】：2017-07-08 05:31:38
【问题描述】：

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

这是我的 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 管道的应用程序正在产生什么输出，也许可以通过在某处记录。是否可以？

【问题讨论】：

标签： javascript gulp gulp-filter

【解决方案1】：

我今天发现自己同样无法调试。

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

我的 hacky 方法是：

管道函数中的代码

检查管道函数的来源并在其中放置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 threesomes cause I'm 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'));

类似的东西应该可以。

【讨论】：