javascript - 为什么这个 gulp 任务没有连续运行？

Question

我有三个 gulp 任务:watch、build、test。我想让我的 watch 运行，当保存文件时，它会被构建然后测试(废话)。

发生的情况是，尽管设置为运行 build 作为 test 的依赖项，但我需要保存文件两次才能生成最新版本被测试的那个。

我可以通过启动 watch 、对客户端 JS 代码中的某个位置进行更改(例如添加控制台日志)然后观察结果输出来重现这一点。第一次保存不会有任何控制台输出。只需再次保存文件(不进行任何更改)将导致重新运行测试并显示控制台输出。

我还注意到第一个构建+测试周期将是正确的构建(即将具有控制台日志语句)的情况，但之后需要两次保存才能确保最新代码是正在测试的代码。

规范文件不受此影响，因为它们不是构建的，而是直接使用的(某种程度上，它们首先被转译)。

所以，我在这里疯了吗？这些应该连续运行，对吗？

日志表明情况是这样的:

[12:05:54] Starting 'build:client:js'...
[12:05:54] Finished 'build:client:js' after 13 ms
[12:05:54] Starting 'test:client'...
19 09 2016 12:05:54.808:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
19 09 2016 12:05:54.808:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
19 09 2016 12:05:54.841:INFO [launcher]: Starting browser PhantomJS
19 09 2016 12:05:55.381:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#Zklau3qmk75NKg2HAAAB with id 61545463
LOG: 'test'
.
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.002 secs / 0.029 secs)
[12:05:55] Finished 'test:client' after 775 ms

<小时/>

构建:

AngularJS 应用程序的基本构建，这里没什么奇怪的。

gulp.task('build:client:js', () => {
    gulp.src('app/sections/client/**/!(*.spec|*.e2e).js')
        .pipe(sourceMaps.init())
            .pipe(eslint())
            .pipe(eslint.formatEach())
            .pipe(babel({presets: ['es2015']}))
            .pipe(ngAnnotate())
            .pipe(concat('client.js'))
            .pipe(uglify())
        .pipe(sourceMaps.write())
        .pipe(gulp.dest(paths.build))
});

测试:

这样设置是为了在理想情况下，build 首先运行并完成。

gulp.task('test:client', ['build:client:js'], (done) => {
    const src = {};
    src['client'] = 'app/sections/client';

    const config = getTestConfig(src);
    new karmaServer(config, done).start();
});

观看:

这应该只需要运行test，因为build是test的依赖项。

gulp.task('watch:client:js', () => {
    gulp.watch('app/sections/client/**/*.js', ['test:client']);
});

<小时/>

此外，为了完全透明，我的大部分 watch>build>test gulp 任务都是根据路径文件动态生成的。它基本上返回 JSON，然后函数使用该 JSON 来创建 gulp 任务。下面的输出是那一代的结果，但我不确定像这样物理地写出每个任务会有什么不同。

您可以尝试或查看更多 here .

Answer 1

在任务“build:client:js”中，您应该返回流，以便 gulp 知道任务何时实际结束。

gulp.task('build:client:js', () => {
    return gulp.src('app/sections/client/**/!(*.spec|*.e2e).js')
        .pipe(sourceMaps.init())
            .pipe(eslint())
            .pipe(eslint.formatEach())
            .pipe(babel({presets: ['es2015']}))
            .pipe(ngAnnotate())
            .pipe(concat('client.js'))
            .pipe(uglify())
        .pipe(sourceMaps.write())
        .pipe(gulp.dest(paths.build))
});