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

您的日志输出看起来正确。首先它运行＆＃39;默认＆＃39;然后你的一系列任务。稍后当您修改sass文件时，它会启动＆＃39; build-sass＆＃39;。唯一的问题是它没有通过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/"));
}

注意功能的一般用法而不是＆＃39;任务＆＃39;特别是重载（完成）功能。您可以尝试将其添加到您的观察语句中，例如

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

添加重新加载功能后，这可能足以解决您的问题，而不会像我的代码那样进行所有其他更改。或者你可能只需要在你的＆＃39; build-sass＆＃39;中添加一个return语句。任务，所以gulp知道任务已经完成。祝你好运。

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

1 个答案: