Question

在这里，我有一个监视任务，它将根据我的build创建我的src目录。我的build目录将包含两个名为debug和release的主子目录。 Watch任务将在我的src目录（我的工作目录）中查找，并将src中合适的文件格式传输到release和debug目录中。现在，我还有一个使用gulp-webserver（实时重载）包的网络服务器任务，以便在调试目录中查看我的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();

Answer 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!

Gulp Web服务器任务和监视任务无法一起使用

1 个答案: