Задача веб-сервера Gulp и задача просмотра не работают вместе - PullRequest
Новая
       7

Задача веб-сервера Gulp и задача просмотра не работают вместе

0 голосов
/ 30 июня 2018

Здесь у меня есть задача наблюдения, которая создаст мой каталог build в соответствии с моим src. Мой каталог build будет содержать два основных подкаталога с именами debug и release. Задача наблюдения будет смотреть внутри моего каталога 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));

EDIT: Вот мой полный 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();

1 Ответ

0 голосов
/ 01 июля 2018

Я решаю свою проблему, используя 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!
...