【问题标题】:Using gulp-watch with babel.js将 gulp-watch 与 babel.js 一起使用
【发布时间】:2015-04-07 13:41:48
【问题描述】:

下面是一个 Gulp ES6 转译任务。它工作正常,但我试图用 gulp-watch 插件替换 gulp.watch 以便捕获新文件。问题是 gulp-watch 没有给我 gulp.watch 在回调中所做的事情,我不知道该怎么做。

这是我最初的工作任务:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    gprint = require('gulp-print'),
    notify = require('gulp-notify'),
    babel = require('gulp-babel');

gulp.task('default', function() {
    return gulp.watch('../**/**-es6.js', function(obj){
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(plumber({
                    errorHandler: function (error) { /* elided */ }
                }))
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace(/-es6$/, '');
                }))
                .pipe(gulp.dest(''))
                .pipe(gprint(function(filePath){ return "File processed: " + filePath; }));
        }
    });
});

这就是到目前为止我对 gulp-watch 的所有了解:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    gprint = require('gulp-print'),
    notify = require('gulp-notify'),
    babel = require('gulp-babel'),
    gWatch = require('gulp-watch');

gulp.task('default', function() {
    return gWatch('../**/**-es6.js', function(obj){
        console.log('watch event - ', Object.keys(obj).join(','));
        console.log('watch event - ', obj.event);
        console.log('watch event - ', obj.base);

        return;
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(plumber({
                    errorHandler: function (error) { /* elided */ }
                }))
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace(/-es6$/, '');
                }))
                .pipe(gulp.dest(''))
                .pipe(gprint(function(filePath){ return "File processed: " + filePath; }));
        }
    });
});

日志的输出是这样的:

观看事件 - history,cwd,base,stat,_contents,event

观看事件 - 改变

观看活动 - ..

我如何让 gulp-watch 向我提供我以前的信息,或者,我如何更改我的任务代码以使用 gulp-watch 再次工作?

【问题讨论】:

  • 不应该只是obj.event === 'change'吗?
  • @Ben - 当然 - 我可以克服 那个 驼峰,但我仍然缺少 obj.path,因此我可以识别 gulp.src 的特定文件。我还应该注意,我对 Gulp 比较陌生 - 所以答案很可能很简单......

标签: node.js gulp gulp-watch babeljs


【解决方案1】:

根据testsobj.relative 应该包含相对文件名,而obj.path 仍将包含绝对文件路径,就像在原始代码中一样。此外,回调接受一个 Vinyl 对象,此处记录:https://github.com/wearefractal/vinyl

您可能在日志中看不到它们,因为Object.keys 没有枚举原型链中的属性。

使用for..in 循环,您应该能够看到所有属性。

【讨论】:

  • 非常感谢 - 我需要离开几个小时 - 但我一回来就会看看这个并投票并接受它是否有效。
  • 非常感谢 - 我做了一个小修改 - 看起来我应该只留下我的原始代码 - 我希望能更好地记录下来!
  • 嗯 - 我想我需要的文档在这里 :-| github.com/wearefractal/vinyl
猜你喜欢
  • 1970-01-01
  • 2015-03-20
  • 2016-12-17
  • 1970-01-01
  • 2018-12-07
  • 1970-01-01
  • 2015-03-02
  • 2016-08-29
  • 1970-01-01
相关资源
最近更新 更多