Gulp 复制文件但它是空的

Question

我遇到了一个奇怪的问题。我正在使用 gulp 编译一个反应应用程序，并让它将 index.html 复制到相应的 Web 目录。当我第一次运行 gulp 时，一切都按预期运行，但是当文件更改并运行 watch 任务时，gulp 会将文件的空版本复制到 web 目录。有谁知道为什么会发生这种情况？这是我的 gulpfile.js：

var gulp = require('gulp');

var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

var livereload = require('gulp-livereload');

gulp.task('livereload', function() {
    console.log('reloading');
    livereload();
});

gulp.task('copyindextodist', function() {
    gulp.src('app/index.html')
        .pipe(gulp.dest('dist'));
});

gulp.task('compilejs', function() {
    browserify({
        entries: 'app/index.js',
        extensions: ['.js'],
        debug: true
    })
    .transform('babelify', {presets: ['es2015', 'react']})
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist'));
});

gulp.task('publishapp', function() {
    gulp.src('dist/*.*')
        .pipe(gulp.dest('../public'));
});

gulp.task('copypaste', function() {
    gulp.src('app/index.html')
        .pipe(gulp.dest('../public'));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('app/index.html', ['copyindextodist']);
    gulp.watch('dist/index.html', ['publishapp']);
    gulp.watch('app/index.js', ['compilejs']);
    gulp.watch('dist/app.js', ['publishapp']);
});

gulp.task('default', ['copyindextodist', 'compilejs', 'publishapp', 'watch']);

Answer 1

在正确定义依赖项之前，我遇到了同样的问题。您可以定义在当前任务开始之前应该完成哪些任务：

gulp.task('compress', ['copy'], function() {
    //.... your job
});

这意味着 compress 任务将等待 copy 任务完成。如果你不这样做，你可能会得到空/截断的文件和其他奇怪的结果。

请注意您的复制任务返回一个流对象。

gulp.task('copy', function() {
    // "return" is the important part ;-)
    return gulp.src(['filepath/**/*']) 
        .pipe(gulp.dest('lib/newpath'))
});

如果您的任务中运行了多个复制命令，这很棘手，但有一个扩展：

var gulp = require('gulp');
var merge = require('merge-stream');
gulp.task('copy', function() {
    var allStreams = [
        gulp.src(['node_modules/bootstrap/dist/**/*'])
             .pipe(gulp.dest('lib/bootstrap')),
        gulp.src(['node_modules/jquery/dist/**/*'])
             .pipe(gulp.dest('lib/jquery')),
    ];
    return merge.apply(this, allStreams);
});
gulp.task('nextTask', ['copy'], function() {
    // this task formerly produced empty files, but now
    // has a valid dependency on the copy stream and 
    // thus has all files available when processed.
});