BrowserSync Non Chargement

Question

Très nouveau sur BrowserSync. J'essaie de savoir comment le faire haha.

Mon fichier principal qui stocke tout est appelé 'gulpwork'.

À l'intérieur j'ai 4 dossiers; deux pour convertir Pug ('src') en HTML ('dist') et deux pour convertir SASS ('sass') en CSS ('css').

J'ai réussi à lancer BrowserSync mais je reçois le message 'Can not GET /', donc je sais que cela a probablement quelque chose à voir avec le répertoire de fichiers.

Je souhaite synchroniser à la fois Pug et SASS.

EDIT: Cela ne fonctionne que si j'ai mes deux fichiers Pug et HTML en dehors de leurs dossiers respectés directement dans ma racine et cela ne fonctionne que si le fichier HTML est nommé index.html. Comment puis-je le faire fonctionner dans ses dossiers respectés et sans avoir à changer le nom pour indexer?

Voici mon code 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

figured it out. BrowserSync recherche un fichier 'index.html' pour démarrer et nous obtenons l'erreur 'can not GET /' car il cherche quelque chose qu'il ne voit pas. Donc, où que se trouvent nos fichiers pug/html, nous devons indiquer à la fonction pug + la fonction watch où ils se trouvent, puis lancer BrowserSync. Après l'exécution, vous verrez toujours l'erreur mais cela fonctionne vraiment. Tout ce que vous avez à faire est de créer un lien vers le fichier donc dans mon navigateur après localhost: 3000 je voudrais taper l'emplacement de mon fichier, donc ce serait 'localhost: 3000/dist/about.html' Après cela, BrowserSync fonctionne. :)

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