Question

我有一个奇怪的问题。我正在使用gulp编译一个react应用程序，并将它复制index.html到相应的web目录。当我第一次运行gulp时，所有运行都按预期运行，但是当文件更改并运行监视任务时，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
});

这意味着压缩任务将等待复制任务完成。如果不这样做，最终可能会出现空/截断文件和其他奇怪的结果。

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

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

Gulp复制文件但它是空的

1 个答案: