代码之家  ›  专栏  ›  技术社区  ›  pouyan

gulp webserver task和watch task不能一起工作

  •  0
  • pouyan  · 技术社区  · 7 年前

    这里我有一个监视任务,它将创建 build 根据我的目录 src .我的 建造 目录将包含两个名为 debug release 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();
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   pouyan    7 年前

    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!