浏览器同步未加载答案

【问题标题】：BrowserSync Not Loading浏览器同步未加载
【发布时间】：2018-03-27 09:52:56
【问题描述】：

BrowserSync 非常新。我正在尝试找出如何让它继续下去哈哈。

我存储所有内容的主文件称为“gulpwork”。

里面有 4 个文件夹；两个将 Pug ('src') 转换为 HTML ('dist')，两个将 SASS ('sass') 转换为 CSS ('css')。

我已经设法让 BrowserSync 运行，但是我收到了“无法获取 /”消息，所以我知道它可能与文件目录有关。

我想让 Pug 和 SASS 同步。

编辑：仅当我的 Pug 和 HTML 文件都位于我的根目录中的受人尊敬的文件夹之外时，它才有效，并且仅当 HTML 文件命名为 index.html 时才有效。我怎样才能让它在其受人尊敬的文件夹中工作而无需将名称更改为索引？

这是我的 gulpfile.js 代码：

JS：

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

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

gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
    pretty: true
}))
.pipe(gulp.dest('./dist'))   
});

gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}))
});


gulp.task('watch', ['browserSync'], function() {

gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'pug', 'watch']);

【问题讨论】：

标签： javascript node.js npm sass gulp

【解决方案1】：

想通了。 BrowserSync 寻找一个“index.html”文件来启动，我们得到“cannot GET /”错误，因为它正在寻找它看不到的东西。所以无论我们的 pug/html 文件位于何处，我们都必须告诉 pug 函数 + watch 函数它们在哪里，然后运行 BrowserSync。运行后，您仍然会看到错误，但它确实有效。您所要做的就是链接到该文件，因此在我的浏览器中，在 localhost:3000 之后我会键入我的文件的位置，因此它将是 'localhost:3000/dist/about.html' 之后，BrowserSync 工作。 :)

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

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

gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
    pretty: true
}))
.pipe(gulp.dest('./dist'));   
});

gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});


gulp.task('watch', ['browserSync'], function() {

gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass', 'pug', 'watch']);

【讨论】：

【解决方案2】：

gulp.task('browser-sync', function() {
    browserSync.init({
        watch: true,       // <-- Adding this line solved my reload problem
        server: {
            baseDir: './'
        },
        port: 8080    // <-- If you have problems with port 3000 try changing it like this
    });
});

【讨论】：