javascript – gulp.pipe的调试/日志输出

2019年7月28日 300次阅读

我正在尝试使用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管道的应用程序可能通过某处记录产生什么输出.可能吗？

最佳答案 今天我发现自己同样令人沮丧地无法调试.

注意：我将piped函数调用传入.pipe(..)的函数

我的hacky方式是：

管道功能中的代码

检查管道功能的来源,并在其中放置console.log().

例如,在返回流之前的gulp-rename的index.js中,如果命令是.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 gode 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'));

这样的事情应该有效.

点赞