Gulp browser-sync not reloading - html, gulp, browser-sync

To jest mój plik gulpfile.js. Nie ładuje się ponownie, gdy zmieniam i zapisuję css lub html, ale pokazuje komunikat „Connected to Browser-sync”, gdy używam gulp podawane.

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



gulp.task("styles", function() {
gulp.src("./css/*.css")
.pipe(gulp.dest("./css"))
});

//Watch task
gulp.task("default",function() {
gulp.watch("./css/*.css",["styles"]);
});

gulp.task("js", function () {
return gulp.src("./js/*.js")
// .pipe(concat("all.js"))
.pipe(gulp.dest("./js"));
});

gulp.task("html", function () {
return gulp.src("./*.html")
.pipe(gulp.dest("./"));
});

gulp.task("js-watch", ["js"], browserSync.reload);

gulp.task("html-watch", ["html"], browserSync.reload);

gulp.task("css-watch", ["css"], browserSync.reload);

gulp.task("serve", ["js", "html", "styles"], function () {

browserSync.init({
server: {
baseDir: "./"
}
});

gulp.watch("./*.js", ["js-watch"]);
gulp.watch("./*.html", ["html-watch"]);
gulp.watch("./css/*.css", ["css-watch"]);
});

Odpowiedzi:

Spróbuj tego. Wszystko, co zrobiłem, to dodanie nowej zależności. run-sequence, aby ułatwić organizowanie działania. Wszystko czego potrzebujesz to uruchomić gulp aby uruchomić skrypt i wszystko powinno działać idealnie.

Poza tym stworzyłem site folder w katalogu głównym mojego projektu. tylko dlatego, że wydaje się bardziej zorganizowany w ten sposób i jeśli kiedykolwiek pomyślisz o użyciu jadeitu, sassa, scss itp. w swoim projekcie i wszystko co musisz zrobić, to zmienić src path i zachowaj renderowane wyjście w site teczka.. Poza tym wszystko jest takie samo.

EDYTOWAĆ Zapomniałem wspomnieć, że dodałem także pipe(bs.stream()); wiersz na końcu każdego zadania, taki jak HTML, style i JS, aby przeglądarka ładowała się za każdym razem, gdy dokonujesz zmiany.

W przypadku, gdy nie chcesz robić server Aby zachować porządek w projekcie, wszystko, co musisz zrobić, to usunąć site/ ścieżka, gdziekolwiek ją widzisz. i dla server: "site" po prostu zamień witrynę na ./. Port możesz go usunąć lub zdefiniować własny port

var gulp = require("gulp"),
bs = require("browser-sync").create(),
sequence = require("run-sequence");

gulp.task("styles", function() {
gulp.src("site/css/*.css")
.pipe(gulp.dest("site/css"))
.pipe(bs.stream());
});

gulp.task("js", function() {
gulp.src(["site/js/*.js"])
// .pipe(concat("all.js"))
.pipe(gulp.dest("site/js"))
.pipe(bs.stream());
});

gulp.task("html", function() {
gulp.src("site/*.html")
.pipe(gulp.dest("site"))
.pipe(bs.stream());
});

gulp.task("browser-sync", function() {
bs.init({
server: "site",
port: 3010
});
});

gulp.task("watch", ["build"], function() {
gulp.watch(["site/css/*.css"], ["styles"]);
gulp.watch(["site/js/*.js"], ["js"]);
gulp.watch(["site/*.html"], ["html"]);
});

gulp.task("build", function(done) {
sequence(
["html", "js", "styles"],
"browser-sync",
done);
});


gulp.task("default", ["watch"]);