Question

BrowserSync非常新。我试图找出如何实现目标哈哈。

我存储所有内容的主文件名为＆＃39; gulpwork＆＃39;。

在里面我有4个文件夹;两个将Pug（＆＃39; src＆＃39;）转换为HTML（＆＃39; dist＆＃39;）和两个将SASS（＆＃39; sass＆＃39;）转换为CSS（＆＃39; css＆＃ 39。）

我设法让BrowserSync运行但是我得到了“无法获取/＆＃39;消息，所以我知道它可能与文件目录有关。

我想让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会查找＆＃39; index.html＆＃39;文件启动，我们得到'不能GET /＆＃39;错误，因为它正在寻找它没有看到的东西。因此，无论我们的pug / html文件位于何处，我们必须告诉pug函数+ watch函数它们在哪里，然后运行BrowserSync。在它运行之后，您仍然会看到错误，但它确实有效。所有你要做的就是链接到文件所以在我的浏览器中localhost：3000后我会输入我的文件的位置，所以它将是＆＃39; localhost：3000 / dist / about.html＆＃39;之后，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']);

Answer 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
    });
});

BrowserSync未加载

2 个答案: