Gulp 4手表跑一次

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（）返回一个流或承诺，所以返回它的结果将没有用。希望回调方法 - 上面的第一个选项 - 确实有效。