Gulp 网络服务器任务和监视任务不能一起工作答案

【问题标题】：Gulp webserver task and watch task not works togetherGulp 网络服务器任务和监视任务不能一起工作
【发布时间】：2018-06-30 13:30:49
【问题描述】：

这里我有一个监视任务，它将根据我的src 创建我的build 目录。我的build 目录将包含两个名为debug 和release 的主要子目录。 Watch 任务将查看我的 src 目录（我的工作目录）内部，并将 src 中适当格式的文件传输到 release 和 debug 目录中。现在我还有一个使用gulp-webserver(live reloading) 包的网络服务器任务，以便在我的调试目录中查看我的index.html 文件。我的问题是每个任务独立工作，但我不知道如何同时运行它们。这是我尝试过的，但没有奏效（只有其中一个会启动）。如果需要更多信息，请告诉我。

// watch
gulp.task('watch',()=>{
    gulp.watch(pathJS,gulp.series('js','js-min'));
    gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
    gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
    gulp.src(buildOptions.debugPath)
        .pipe(webServer({
            fallback: 'index.html',
            port:'4000',
            livereload:true,
            open:true
        }))
});
.
.
.
var default_tasks = ['build', 'webserver', 'watch'];
gulp.task('default',gulp.series('clean',...default_tasks));

编辑： 这是我完整的gulpfile.js：

const gulp = require('gulp');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const del = require('del');
const webServer = require('gulp-webserver');
//-------------------------------------------------------------------------------------------------
const build_tasks=['js','js-min','sass','sass-min','cp','cp-min'];
const buildOptions={
    releasePath:'build/release/',
    debugPath:'build/debug/',
};
const pathJS = 'src/js/**/*.js'
const pathSCSS = 'src/style/**/*.scss'
//-------------------------------------------------------------------------------------------------
// JavaScript Task
gulp.task('js',()=>{
    return gulp.src([pathJS])
            .pipe(gulp.dest(buildOptions.debugPath+'/js/'));
});
gulp.task('js-min',()=>{
    return gulp.src([pathJS])
            .pipe(uglify().on('error',uglify=>console.error(uglify.message)))
            .pipe(gulp.dest(buildOptions.releasePath+'/js/'));
})
// sass Task
gulp.task('sass',()=>{
    return gulp.src([pathSCSS])
            .pipe(sass().on('error',sass.logError))
            .pipe(gulp.dest(buildOptions.debugPath+'/style/'));
});
gulp.task('sass-min',()=>{
    return gulp.src([pathSCSS])
            .pipe(sass({outputStyle: 'compressed'}).on('error',sass.logError))
            .pipe(gulp.dest(buildOptions.releasePath+'/style/'))

})
// copy files
gulp.task('cp',()=>{
    return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
        .pipe(gulp.dest(buildOptions.debugPath));
});
gulp.task('cp-min',()=>{
    return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
            .pipe(gulp.dest(buildOptions.releasePath));
});
// watch
gulp.task('watch',()=>{
    gulp.watch(pathJS,gulp.series('js','js-min'));
    gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
    gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
    gulp.src(buildOptions.debugPath)
        .pipe(webServer({
            fallback: 'index.html',
            port:'4000',
            livereload:true,
            open:true
        }))
});
//-------------------------------------------------------------------------------------------------
gulp.task('clean',function(){return del(['build']);});
gulp.task('build',gulp.parallel(...build_tasks));
//-------------------------------------------------------------------------------------------------
function build(){
    var default_tasks = ['build', 'webserver', 'watch'];
    //var default_tasks = ['build', 'watch'];
    gulp.task('default',gulp.series('clean',...default_tasks));
}
build();

【问题讨论】：

你应该包括你的清理和构建任务。你有返回语句吗？表示完成。
@Mark，Tanks 等您回复。请看我的编辑

标签： gulp gulp-watch

【解决方案1】：

我通过将gulp.parallel 用于webserver 和watch 任务来解决我的问题：

// watch
gulp.task('watch',()=>{
    gulp.watch(pathJS,gulp.series('js','js-min'));
    gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
    gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
    gulp.src(buildOptions.debugPath)
        .pipe(webServer({
            fallback: 'index.html',
            port:'4000',
            livereload:true,
            open:true
        }))
});
.
.
.
gulp.task('default',gulp.series('clean','build',gulp.parallel('webserver', 'watch')));//Here is my change!

【讨论】：