Gulp4人观看运行一次

Question

我已经尝试了一段时间了，但是我无法在第一个文件保存后运行得到它。

每当我启动 gulp 并对 html 文件进行任何更改时，它都会正确地重新加载页面，但是在第一次保存之后，它就不会这样做，即使 html 文件已保存到 public 文件夹。

我已经更新到 Gulp v4，我试图添加 gulp.series 和 gulp.parallel，我不知道我做错了什么。如果有人能看到代码中的任何错误...（目前仅在 generateHtml 上，如果我们可以让它工作，我想我也可以让它们运行）。

var gulp = require("gulp"),
    browser = require("browser-sync").create(),
    less = require("gulp-less"),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require("gulp-sourcemaps"),
    concat = require('gulp-concat'),
    clean = require('gulp-rimraf'),
    gulpCopy = require('gulp-copy');

//Sincronización de pantallas
gulp.task('browser-sync', () => {
    browser.init({
        server: {
            baseDir: './public'
        },
        notify: {
            styles: {
                top: 'auto',
                bottom: '0'
            }
        },
        injectChanges: true
    });
});

//Refrescar pantalla
gulp.task('re-loaded', function() {
    console.log("a")
    browser.reload()
});


gulp.task('watch', () => {
    gulp.watch('src/js/*.js', gulp.series('cleanJs', 'generateJs', 're-loaded'));
    gulp.watch('src/css/*.less', gulp.series('cleanCss', 'less', 're-loaded'));
    gulp.watch('src/**/*.html', gulp.series('cleanHtml', gulp.parallel('generateHtml', 're-loaded')));
    gulp.watch('src/img/**/**.*', gulp.series('cleanImg', 'copy', 're-loaded'));
    gulp.watch('src/libs/**/**.*', gulp.series('cleanLibs', 'copy', 're-loaded'));
    gulp.watch('src/fonts/**.*', gulp.series('cleanFonts', 'copy', 're-loaded'));
});

//Generar nuevo HTML en public
gulp.task('generateHtml', () => {
    gulp.src('src/*.html')
        .pipe(gulp.dest('./public/'))
});

//Actualización de las funciones JS cuando guardemos
gulp.task('generateJs', () => {
    gulp.src('src/js/*.js')
        .pipe(concat("script.js"))
        .pipe(gulp.dest('./public/js'))
});

//Actualización de los estilos CSS cuando guardemos
gulp.task('less', () => {
    gulp.src(['src/*.less'])
    .pipe(less({
        // pretty: true
    }))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(concat("style.css"))
    .pipe(gulp.dest('./public/css'))
});

//Copiar a public
gulp.task('copy', () => {
    return gulp
        .src(['src/fonts/**/**.*', 'src/img/**/**.*', 'src/libs/**/**.*'])
        .pipe(gulpCopy('./public/', {prefix: 1} ));
});

//Borrar imágenes de public
gulp.task('cleanImg', () => {
    return gulp.src("./public/img/**/**.*", { read: false }).pipe(clean());
});

//Borrar librerías de public
gulp.task('cleanLibs', () => {
    return gulp.src("./public/libs/**/**.*", { read: false }).pipe(clean());
});

//Borrar fuentes de public
gulp.task('cleanFonts', () => {
    return gulp.src("./public/fonts/**/**.*", { read: false }).pipe(clean());
});

//Borrar JS de public
gulp.task('cleanJs', () => {
    return gulp.src("./public/js/*", { read: false }).pipe(clean());
});

//Borrar CSS de public
gulp.task('cleanCss', () => {
    return gulp.src("./public/css/*.css", { read: false }).pipe(clean());
});

//Borar HTML de public
gulp.task('cleanHtml', () => {
    return gulp
        .src("./public/*.html", { read: false })
        .pipe(clean());
});

gulp.task('default', gulp.parallel('generateHtml', 'generateJs', 'less', 'browser-sync', 'watch', 'copy'));

Answer 1

此任务可能永远不会完成：

//Refrescar pantalla
gulp.task('re-loaded', function() {
    console.log("a")
    browser.reload()
});

更改为：

//Refrescar pantalla
gulp.task('re-loaded', function(done) {
    console.log("a")
    browser.reload()
    done()
});

或

//Refrescar pantalla
gulp.task('re-loaded', () => {
    console.log("a")
    browser.reload()
});

[实际上，再三考虑，第二个选项可能行不通，因为它不会返回流。我怀疑 browserSync.reload() returns 流或承诺，因此返回其结果不会有帮助。希望回调方法 - 上面的第一个选项 - 确实有效。]

Gulp4人观看运行一次

Gulp 4 watch running once

gulp

gulp-watch