gulp 4文件更改跟踪无法正常运行

我想用gulp构建代码并跟踪所有更改并重新构建并重新加载浏览器,为此我在gulpfile.js中编写了以下代码。所有方法都起作用,但 watch()在源更改。 我想对文件gulp中所做的更改构建所有代码并自动刷新浏览器。 请帮忙。 我的gulp版本是

gulp 4文件更改跟踪无法正常运行

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
const terser = require('gulp-terser');
let babel = require('gulp-babel');
const del = require('del');
var replace = require('gulp-replace');
var webserver = require('gulp-webserver');
var debug = require('gulp-debug');
var inject = require('gulp-inject');
//var series = require('stream-series');
var runSequence = require('run-sequence');
var browsersync = require("browser-sync").create();

// BrowserSync
function browserSync(done) {
    browsersync.init({
      server: {
        baseDir: "./build/"
      },port: 3000
    });
    done();
  }

  // BrowserSync Reload
  function browserSyncReload(done) {
    browsersync.reload();
    done();
  }


function clean() {
    return del('build/**',{ force: true });
}


// Sass task: compiles the style.scss file into style.css
function libraryCSS() {
    return gulp.src(['css files'])
        .pipe(cssnano())
        .pipe(debug())
        .pipe(concat('library.style.min.css'))
        .pipe(replace('../webfonts','./webfonts'))
        .pipe(gulp.dest('build'))
        //.pipe(browsersync.stream());
    // put final CSS in dist folder
}

function libraryCSSFont() {
    return (
        gulp.src(['plugins/fontawesome-free/webfonts/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/webfonts'))
           // .pipe(browsersync.stream())
    );
}

function templateCustomCSS() {
    return (
        gulp.src(['dist/css/adminlte.min.css'])
            .pipe(cssnano())
            .pipe(debug())
            .pipe(concat('template-custom.style.min.css'))
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

function libraryJS() {
    return (
        gulp.src(['js files'])
            .pipe(concat('plaugin-library.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

function templateCustomJS() {
    return (
        gulp.src(['another set of js files'])
            .pipe(concat('template-custom-js.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}

// JS task: concatenates and uglifies JS files to script.js
function frameworkGlobalJS() {
    return (
        gulp.src(['scripts/config.js','scripts/00.global.js'])
            .pipe(concat('framework-global-js.js'))
            //.pipe(uglify())
            .pipe(debug())
            .pipe(terser())
            .pipe(gulp.dest('build'))
           //.pipe(browsersync.stream())
    );
}
function frameworkScripts() {
    return gulp.src(['js files'])
        .pipe(babel({
            presets: ['@babel/env'],}))
        .pipe(concat('framework-scripts.js'))
        .pipe(debug())
        .pipe(terser())
        .pipe(gulp.dest('build'))
       // .pipe(browsersync.stream())
}

function copystaticAsets() {
    return (
        gulp.src(['dist/img/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/dist/img'))
            //.pipe(browsersync.stream())
    );
}

function copypage() {
    return (
        gulp.src(['index.html','login.html','favicon.ico'])
            .pipe(debug())
            .pipe(gulp.dest('build'))
            //.pipe(browsersync.stream())
    );
}



function copypages() {
    return (
        gulp.src(['pages/**/*'])
            .pipe(debug())
            .pipe(gulp.dest('build/pages'))
            //.pipe(browsersync.stream())
    );
}

gulp.task('webserver',function () {
    gulp.src('build')
        .pipe(webserver({
            port: 3000,livereload: {
                enable: true,// need this set to true to enable livereload
                filter: function (fileName) {
                    if (fileName.match(/.map$/)) { // exclude all source maps from livereload
                        return false;
                    } else {
                        return true;
                    }
                }
            },directoryListing: {
                enable: false,path: 'build'
            },//host:'0.0.0.0',open: true,fallback: 'index.html'
        }));
});





    gulp.task('watchTask',function(){
    gulp.watch(['scripts/config.js','scripts/00.global.js','scripts/AmountInWord.js','scripts/api-call.js','scripts/common.js','scripts/dashboard.js','scripts/**/*.js','index.html','favicon.ico','pages/**/*'],gulp.series(
            gulp.parallel(libraryCSS,libraryCSSFont,templateCustomCSS,libraryJS,templateCustomJS,frameworkGlobalJS,frameworkScripts,copystaticAsets,copypage,copypages),'webserver','watchTask'
        )
    );

})

exports.default = gulp.series(
    clean,gulp.parallel(
    libraryCSS,'watchTask'


);
wolfll 回答:gulp 4文件更改跟踪无法正常运行

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3107529.html

大家都在问