Gulp

Question

我正在学习 here 中的 Gulp 基础教程，但我在浏览器同步实现上遇到了困难。我已经完全按照示例中的代码复制了代码，但是当我运行 watch 任务时，即使 sass 任务执行没有问题（新版本的 css 文件已创建），浏览器不想刷新！这是我的代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('browserSync', ['sass'], function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
    })
  })

gulp.task('watch', ['browserSync'], function() {
    gulp.watch('app/scss/**/*.scss', ['sass']); 
    // Other watchers
});

这是我的 index.html

<!doctype html>
<html>
    <head>  
        <title>test</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

我的 styles.scss 文件只有一种样式：

body {
    background: blue;
}

这是我更新 styles.scss

时控制台 window 的输出

所以我可以看到浏览器同步知道所做的更改，但它不会在浏览器中重新加载页面。这是为什么？我查看了教程下的评论，似乎没有人遇到过类似的问题。我还看过其他几个教程，但其中 none 对我有用。我使用最新版本的 chrome 作为我的默认浏览器，浏览器同步版本 5.6.0 和 gulp 版本 3.9.1

Answer 1

我从未听说过通过 browserSync.reload 传输文件作为重新加载开发服务器的方式，并且在 browserSync documentation 中找不到该特定技术的任何示例。这并不一定意味着该方法无效，但也许 API 自 CSS-Tricks 在 2015 年发布了他们的教程以来发生了变化？三年可以是模具时间的永恒。

无论如何，我知道我之前已经成功地使用过 Gulp/browserSync/SASS 所以我从我的一个旧 gulpfiles 中挖出了与你的情况相关的代码。

//watch task
gulp.task('watch', function () {
    //spin up dev server
    browserSync.init({
        server: {
            baseDir: "./"
        },
    });

    //when scss files change, run sass task first and reload browserSync second
    gulp.watch('./sass/*.scss', ['sass']).on('change', function () {
        browserSync.reload();
    });

});

//call watch task
gulp.task('default', ['watch']);

基本上，当您调用 watch 任务时，它会立即启动开发服务器，然后侦听您的 scss 文件的更改。当检测到更改时，它会调用 sass 任务作为依赖项并运行您用于预处理的任何代码（您说的当前正在您的文件中工作）。 sass任务完成后，通过.on方法调用browserSync.reload。

我已经有一段时间没有使用这个特定的配置了，但请告诉我它是否有效，如果无效，我很乐意与您一起解决问题。对于任何开发人员来说，它都是很好的样板文件。

编辑： 上面的片段取自一个更大的 gulpfile，经过第二次检查，我发现了一些阻止它在独立上下文中工作的部分。编辑片段以更正此问题。

Answer 2

我是运行一个 MAMP 网站，这对我有用

//define task
gulp.task('bsync', function () {
    //spin up dev server
    browserSync.init({
      proxy: "dev.sitename.local",
      hostname: "dev.sitename.local",
      port: 3000, //even if apache is running on 80 or something else
    });

    //when css files change, reload browserSync 
    gulp.watch('./css/*.css').on('change', function () {
        browserSync.reload();
    });

});

//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);

https://gist.github.com/petergus/31d75a5145e062d4eaa42eb04ce23aea

Gulp - BrowserSync 不重新加载页面

Gulp - BrowserSync doesn't reload page

css

gulp-watch

browser-sync