使用 Gulp 和 browserSync 时的重新加载顺序错误

Question

所以我正在尝试使用 Gulp V4 编译 pug (jade)、javascript 和 sass 文件，并在这些文件中的任何一个更改时使用 browserSync 重新加载浏览器.那里有很多指南，但无论我用哪种方式编写代码，它似乎都无法正确执行任务顺序。我正在使用 gulp.series 设置任务顺序，但 browserSync 不想玩球。

这是我的 Gulp 文件的打印件：

var gulp = require('gulp'),
... etc.

var paths = {
    sass: ['src/scss/**/*.scss'],
    js:   ['src/js/**/*.js'],
    pug:  ['src/**/*.pug']
};

// Shared Tasks:
//*------------------------------------*/

gulp.task('clean', function(done){
    del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']);
    done();
});

// App Specific Tasks:
//*------------------------------------*/

// Sass
gulp.task('build-sass', function(){
    gulp.src(paths.sass)
        return sass(paths.sass, {
            style: 'expanded'
        })
        .on('error', sass.logError)
        .pipe(prefix('last 2 version', '> 1%', 'ie 8', 'ie 9'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/assets/css'));
});

// JS
gulp.task('build-js', function(done){
    gulp.src(paths.js)
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/assets/js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('dist/assets/js'))
        done();

// Pug
gulp.task('build-pug', function buildHTML(done){
    gulp.src(['src/**/*.pug'], {
        base: 'src'
    })
    .pipe(pug())
    .pipe(gulp.dest('./dist/'))
    done();
});


// Service Tasks:
//*------------------------------------*/

// Delete the compiled views dir.
gulp.task('remove', function(done){
    del(['dist/views/**/']);
    done();
});

// Serve the site locally and watch for file changes
gulp.task('serve', function(done){
    browserSync.init({
        server: {
            baseDir: './dist/',
            notify: false,
            open: false
        }
    });

   // Watch & Reload Pug Files
   gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload);
   // Watch & Reload Sass Files
   gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);
});


gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){
    done();
}));

启动时终端控制台日志输出这个gulp:

$ gulp
[13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js
[13:09:33] Starting 'default'...
[13:09:33] Starting 'clean'...
[13:09:33] Finished 'clean' after 2.64 ms
[13:09:33] Starting 'build-sass'...
[13:09:33] Finished 'build-sass' after 443 ms
[13:09:33] Starting 'build-js'...
[13:09:33] Finished 'build-js' after 4.42 ms
[13:09:33] Starting 'build-pug'...
[13:09:33] Finished 'build-pug' after 3.15 ms
[13:09:33] Starting 'remove'...
[13:09:33] Finished 'remove' after 656 μs
[13:09:33] Starting 'serve'...
[BS] Access URLs:
-------------------------------------
      Local: http://localhost:3000
   External: http://10.130.91.51:3000
-------------------------------------
         UI: http://localhost:3001
UI External: http://10.130.91.51:3001
-------------------------------------
[BS] Serving files from: ./dist/

当我更改监视文件中的文件时：

[BS] File changed: src/scss/4_elements/_elements.page.scss
[13:12:33] Starting 'build-sass'...
[13:12:34] write ./style.css
[13:12:34] Finished 'build-sass' after 366 ms

所以在我看来，在这种情况下发生了什么，文件正在更改，browserSync 重新加载页面，然后 'build-sass' 开始。这是错误的方式。我显然想构建 sass，然后重新加载页面。我要存2次才能让浏览器刷新我要的代码

我使用的一些代码直接来自 browserSync 文档：

https://www.browsersync.io/docs/gulp#gulp-reload

这似乎不起作用。

Answer 1

您的日志输出看起来正确。首先它运行 'default' 然后是你的一系列任务。稍后当您修改 sass 文件时，它会启动 'build-sass'。唯一的问题是它不会通过 browserSync.reload() 重新加载。所以我相信问题可能出在这里：

gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);

强烈推荐

https://github.com/gulpjs/gulp/blob/4.0/docs/recipes/minimal-browsersync-setup-with-gulp4.md

这是 gulp4.0 的秘诀，可以完全按照您的意愿去做。我几乎使用他们那里的东西，所以如果您在使用他们的代码时遇到问题，我可以提供帮助。这是我的工作代码：

function serve (done) {
  browserSync.init({
  server: {
    baseDir: "./",
    index: "home.html"
  },
  ghostMode: false
 });
 done();
}

function reload(done) {
  browserSync.reload();
  done();
}

var paths = {
  styles: {
    src: "./scss/*.scss",
    dest: "./css"
  },
  scripts: {
    src: "./js/*.js",
    dest: "./js"
  }
};

function watch() {
  gulp.watch(paths.scripts.src, gulp.series(processJS, reload));
  gulp.watch(paths.styles.src,  gulp.series(sass2css,  reload));
  gulp.watch("./*.html").on("change", browserSync.reload);
}

var build = gulp.series(serve, watch);

gulp.task("sync", build);

function sass2css() {
  return gulp.src("./scss/*.scss")
    .pipe(cached("removing scss cached"))
    // .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    // .pipe(sourcemaps.write("./css/sourceMaps"))
    .pipe(gulp.dest("./css"));
}

function processJS() {
  return gulp.src("./js/*.js")
    .pipe(sourcemaps.init())
    // .pipe(concat("concat.js"))
    // .pipe(gulp.dest("./concats/"))
    // .pipe(rename({ suffix: ".min" }))
    // .pipe(uglify())
    .pipe(sourcemaps.write("./js/sourceMaps/"))
    .pipe(gulp.dest("./js/maps/"));
}

注意一般使用函数而不是 'tasks'，尤其是 reload(done) 函数。您可以尝试简单地将其添加到您的 watch 语句中，例如

gulp.watch([paths.sass], gulp.series('build-sass', reload);

添加重新加载功能后，这可能足以解决您的问题，而无需像我的代码中那样进行所有其他更改。或者您可能只需向 'build-sass' 任务添加 return 语句，以便 gulp 知道该任务已完成。祝你好运。

使用 Gulp 和 browserSync 时的重新加载顺序错误

Wrong reload order when using Gulp and browserSync

gulp

gulp-sass

gulp-browser-sync

pug