Gulp: Problemeinstellung browserSync und Watch

Question

Ich lerne Gulp und NPM und entschied mich, mich selbst zu testen, indem ich Browser-Sync mit einem PHP-Projekt verwende, an dem ich arbeite (mit XAMPP). Ich weiß, Browser-Sync funktioniert nicht mit PHP-Dateien, aber ich wollte es mit meinen .css-Dateien verwenden (und später möglicherweise Sass hinzufügen).

Ich habe npm, Gulp, Gulp-watch und Browser Sync ins Stammverzeichnis meines Projekts installiert und alles schien in Ordnung zu sein.

Ich habe dann eine gulp.js Datei mit folgendem:

var gulp = require('gulp'), 
watch = require('gulp-watch'), 
browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: "./" 
     } 
    }); 

    watch('css/*.css', function() { 
     browserSync.reload(); 
    }); 

}); 

Allerdings, wenn ich gulp watch ein neues Browserfenster öffnet aber nur zeigt die Cannot GET / Fehler.

Auch zeigt die URL http://localhost:3002/ statt http://localhost:myproejct

Ich las dies etwas mit meiner zu tun haben baseDir so versucht:

baseDir: "" 
baseDir: "./" 
baseDir: "../myproject" 

Würde jemand weiß, was ich falsch gemacht habe?

Answer 1

Sie tun viel mehr als notwendig ist, um zu tun, was Sie wollen. Sie können browsersync einfach als Proxy-Layer über Ihrer gehosteten Website verwenden.

Siehe das folgende Beispiel aus dem docs

# Proxy a PHP app + serve static files & watch them 
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public' 

ich das denken ist, was Sie benötigen, ist es von der physischen Wurzel Ihrer Website ausführen und ersetzen mylocal.dev mit Ihrer PHP-Server-Adresse

npm install browser-sync -g 

browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css' 

Answer 2

Ihr Code funktioniert gut für mich. Angenommen, Ihre Ziel-HTML-Datei funktioniert, wenn sie manuell im Browser geöffnet wird: Eine häufige Ursache für den Fehler Cannot Get/ ist die Verwendung einer anderen Indexdatei als die Standard-Erwartung von Browsersync, index.html. Könnte das das Problem sein, das du hast? Wenn Sie eine benutzerdefinierte Index-Datei benötigen, können Sie die index Option:

browserSync.init({ 
    server: { 
     baseDir: 'mybasedirectorypath', 
     index: 'notindex.html' 
    } 
}); 

FWIW, können Sie auch diese effizienter machen können, und sparen Sie sich das Gewicht der Installation gulp-watch (in diesem Beispiel angepasst und von diesem Browsersync docs example vereinfacht) :

var gulp = require('gulp'), 
    browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: './' 
     } 
    }); 
    gulp.watch('css/*.css').on('change',browserSync.reload) 
}); 

---

Wie für eine benutzerdefinierte uRL Besuche https://github.com/BrowserSync/browser-sync/issues/646 die einige Lösungen.