到目前为止,BrowserSync的一切正常,但我加载jpg文件时遇到了一个愚蠢的问题。 Chrome控制台中出现错误"不允许加载本地资源"在gulp watch自动启动页面后,一切正常,但我无法在页面上看到我的背景图片。图像位于我项目的文件夹中。当我打开页面(双击index.html)而没有gulp watch任务时,我不会遇到这样的问题。
这是我的gulpfile.js:
var gulp = require("gulp");
var watch = require("gulp-watch");
postcss = require("gulp-postcss");
autoprefixer = require("autoprefixer");
cssvars = require("postcss-simple-vars");
nested = require("postcss-nested");
cssImport = require("postcss-import");
browserSync = require("browser-sync").create();
gulp.task('default', function() {
console.log("yeeey!");
});
gulp.task("html", function() {
console.log("html task");
});
gulp.task("styles", function() {
return gulp.src("./app/assets/styles/styles.css")
.pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
.pipe(gulp.dest("./app/temp/styles"));
});
gulp.task("watch", function() {
browserSync.init({
server: {
baseDir: "app"
}
});
watch("./app/index.html", function() {
gulp.start("html");
});
watch("./app/assets/styles/**/*.css", function() {
gulp.start("styles");
});
});
这就是我在index.html
中导航到图片的方式<img src="C:/Users/aa/Desktop/Web-dev-course/Projects/travel-site/app/assets/images/Wietnam/v111.jpg">
感谢您的帮助!
安