gulp.pipe的调试/日志输出

Question

我试图用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管道的应用程序可能会在某个地方生成什么输出。有可能吗？

Answer 1

今天，我发现自己也陷入了无法调试的沮丧之中。

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

我讨厌的方式是：

管道函数中的代码

检查管道函数来自哪里，并在那里放置一个console.log()。

例如，在index.js of gulp中，在return stream之前，如果命令是.pipe(rename(..))的话。不幸的是，这要求您检查并(最低限度)理解相关的包含/使用的库的代码。

...or...

(匿名？)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'));

像这样的东西应该管用。