Question

从gulp v3迁移到v4之后，我必须将run-sequence插件的使用与gulp v4提供的串联和并行的新方法交换。但是我发现在这次交换之后并不是所有任务都适用。

我遵循了教程，以在gulp 4提供的运行顺序使用与串联和并行方法之间进行转换，但是正如我所说，并非所有任务都适用。

这是gulp v3的原始gulpfile.js代码：

// Multi watch
gulp.task( "watchChanges" , function() { // tasks done before watch
    gulp.watch( sourceFolder + "/scss/**/*.scss" , ["sass"] ); // src , task name
    gulp.watch( sourceFolder + "/*.html" , browserSync.reload ); // watch html (src)
    gulp.watch( sourceFolder + "/js/**/*.js" , browserSync.reload ); // watch js (src)
});

gulp.task( "default" , function( callback ) {
    runSequence( [ "sass" , "browserSync" ] , "watchChanges" ,
        callback
    )
});

这是我为gulp v4申请的代码转换：

// Multi watch
gulp.task( "watchChanges" , function() { // tasks done before watch
    gulp.watch( sourceFolder + "/scss/**/*.scss" , gulp.series( "sass" ) ); // src , task name  
    gulp.watch( sourceFolder + "/*.html" ).on( "change" , browserSync.reload ); // watch html (src)
    gulp.watch( sourceFolder + "/js/**/*.js" ).on( "change" , browserSync.reload ); // watch js (src)
});

// default task
gulp.task( "default" , gulp.series( gulp.parallel( "sass" , "browserSync" ) , "watchChanges" ) );

对于sass和browserSync的用法如下：

// sass task
gulp.task( "sass" , function() {
    return gulp.src( sourceFolder + "/scss/**/*.scss" ) // source
        .pipe( sourcemaps.init() ) // sourcemaps init
        .pipe( sass({ outputStyle: "compressed" }).on( "error" , sass.logError ) ) // define plugin
        .pipe( sourcemaps.write("./sourcemaps") ) // sourcemaps write
        .pipe( gulp.dest( sourceFolder + "/css" ) ) // destination
        .pipe( browserSync.stream() ); // injecting css in browser
});

// browserSync task
gulp.task( "browserSync" , function() {
    browserSync.init({
        server: {
            baseDir: sourceFolder
        }
    });
});

对于gulp v3的使用，任务按 ass - browserSync - watchChanges 的顺序正常运行，但是进行更改后对于gulp v4，仅运行 sass 和 browserSync ，但是对于 watchChanges ，它将不运行！

但是如果我尝试了gulp sass browserSync watchChanges，所有这些任务都将正确运行！

我希望我能对这种情况的发生有一个解释和解决方案。

Answer 1

尝试：

// browserSync task
gulp.task( "browserSync" , function(done) {
    browserSync.init({
        server: {
            baseDir: sourceFolder
        }
    });
    done();
});

因为您没有表示browserSync任务已完成，所以gulp无法知道继续执行下一个任务。上面的代码中的done就是这样做的。

Answer 2

我期待获得帮助！

从gulp v3更改为v4后，gulp.series不会运行所有应用的任务

2 个答案: