BrowserSync無法加載

Question

BrowserSync非常新。我試圖找出如何讓它去哈哈。

我的主要文件存儲的一切都被稱爲'gulpwork'。

它裏面我有4個文件夾;兩個將Pug（'src'）轉換爲HTML（'dist'），另外兩個將SASS（'sass'）轉換爲CSS（'css'）。

我設法讓BrowserSync運行，但是我收到'Can not GET /'消息，所以我知道它可能與文件目錄有關。

我想帕格和SASS同步。

編輯：它只適用於我的帕格和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'文件來啓動，我們得到'無法GET /'錯誤，因爲它正在尋找它看不到的東西。因此，無論我們的pug/html文件在哪裏，我們都必須告訴帕格函數+ 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']);