javascript - BrowserSync 未加载

Question

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']);

Answer 1

想通了。 BrowserSync 寻找一个“index.html”文件来启动，我们得到“无法获取/”错误，因为它正在寻找它看不到的东西。因此，无论我们的 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']);