[英]Gulp browserSync not reloading automatically
我已經閱讀了有關該主題的所有教程,stackoverflow問題,討論論壇,但仍然找不到適合我的解決方案。 我敢肯定,這是我所忽略的簡單事情,這就是為什么我尋求幫助。 這是我的文件夾結構,僅供參考。
browserSync將正確初始化,並在瀏覽器中顯示頁面。 但是,當我對html,css或js文件進行更改時,終端會告訴我正在重新加載瀏覽器,但隨后瀏覽器再也不會重新加載。 如果我手動刷新瀏覽器,則更改會正確顯示,但browserSync應該會自動刷新,對嗎?
我需要做某種返回流還是.pipe(browserSync.stream()); 在我的復制任務結束時?
var gulp = require("gulp"),
browserSync = require("browser-sync").create(),
sass = require("gulp-sass"),
autoprefixer = require("gulp-autoprefixer"),
jasmine = require("gulp-jasmine-phantom"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
babel = require("gulp-babel"),
sourcemaps = require("gulp-sourcemaps"),
imagemin = require("gulp-imagemin");
gulp.task("default", ["styles", "copy-html", "copy-img", "scripts", "browser-sync", "watch"], function(){
});
gulp.task("watch", ["browser-sync"], function() {
gulp.watch("src/img/*", ["copy-img", browserSync.reload]);
gulp.watch("src/index.html", ["copy-html", browserSync.reload]);
gulp.watch("src/sass/**/*.scss", ["styles", browserSync.reload]);
gulp.watch("src/js/**/*.js", ["scripts", browserSync.reload]);
});
gulp.task("browser-sync", function(){
browserSync.init({
server: {
baseDir: "dist/"
}
});
});
gulp.task("styles", function () {
return gulp.src("src/sass/**/*.scss")
.pipe(sass({outputStyle: "compressed"}).on("error", sass.logError))
.pipe(autoprefixer({
browsers: ["last 2 versions"],
cascade: false
}))
.pipe(gulp.dest("dist/css"));
});
gulp.task("copy-html", function() {
return gulp.src("src/index.html")
.pipe(gulp.dest("./dist"));
});
gulp.task("scripts", function() {
return gulp.src("src/js/**/*.js")
.pipe(babel())
.pipe(sourcemaps.init())
.pipe(concat("all.js"))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest("dist/js"));
});
gulp.task("copy-img", function() {
return gulp.src("src/img/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/img"));
});
gulp.task("tests", function() {
gulp.src("tests/spec/extraSpec.js")
.pipe(jasmine({
integration: true,
vendor: "src/js/**/*.js"
}));
});
我也想知道package.json文件中的依存關系是否正確。
{
"title": "Matthew J. Whitney - Portfolio Site",
"name": "portfolio-site",
"description": "A smooth scrolling navigation built with Bootstrap",
"keywords": [
"css",
"sass",
"html",
"responsive",
"javascript"
],
"homepage": "https://www.matthewjwhitney.com",
"author": "Matthew J. Whitney",
"repository": {
"type": "git",
"url": "https://github.com/matthewjwhitney/portfolio-site.git"
},
"dependencies": {
"ajv": "^6.4.0",
"babel-core": "^6.26.3",
"bootstrap": "^4.0.0",
"gulp-clean-css": "^3.9.3",
"gulp-cssnano": "^2.1.3",
"gulp-htmlclean": "^2.7.22",
"gulp-inject": "^4.3.2",
"gulp-rename": "^1.2.2",
"gulp-webserver": "^0.9.1",
"jquery": "3.3.1",
"jquery.easing": "^1.4.1",
"phantomjs": "^2.1.7",
"popper": "^1.0.1",
"popper.js": "^1.14.3"
},
"devDependencies": {
"browser-sync": "^2.23.6",
"del": "^3.0.0",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-cache": "^1.0.2",
"gulp-concat": "^2.6.1",
"gulp-eslint": "^4.0.2",
"gulp-imagemin": "^4.1.0",
"gulp-jasmine-phantom": "^3.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.0",
"gulp-useref": "^3.1.5",
"run-sequence": "^2.2.1"
}
}
如果有用的話,這是我的GitHub存儲庫的鏈接 。 這真的讓我發瘋,所以我希望外面有人可以並且會幫助我。 謝謝! :)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.