javascript - BrowserSync 未加载

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

最佳答案

弄清楚了。 BrowserSync 查找要启动的“index.html”文件，我们收到“无法 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']);

关于javascript - BrowserSync 未加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46760778/