Search code examples
gulpgulp-watch

Gulp webserver task and watch task not works together


Here I have a watch task that will create my build directory according to my src. My build directory will contain two main sub directories named debug and release. Watch task will look inside of my src directory(my working directory) and will transfer appropriate format of files inside the src into both release and debug directories. Now I also have a webserver task using gulp-webserver(live reloading) package in order to watching my index.html file inside my debug directory. My problem is that each task works independently, but I don't know how run them simultaneously. Here is what I've tried but it didn't work(just one of them will be start). Let me know if further information is needed.

// 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: Here is my full 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();

Solution

  • I solve my problem by using gulp.parallel for both webserver and watch tasks :

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