Gulp копирует файл, но он пуст

Question

У меня странная проблема. Я использую gulp для компиляции реагирующего приложения, и у меня есть его copy.html в соответствующий веб-каталог. Когда я запускаю gulp, все работает так, как ожидалось, но когда файл изменяется и выполняется задача просмотра, gulp копирует пустую версию файла в веб-каталог. Кто-нибудь знает, почему это может произойти? Вот мой 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 
}); 

Это означает, что компресс задача будет ждать задания на копию быть закончена. Если вы этого не сделаете, у вас могут быть пустые/усеченные файлы и другие странные результаты.

Просто следите за тем, чтобы задачи копирования возвращали объект потока.

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. 
});