所以我是 gulp 的新手，一直在关注文档。到目前为止，一切正常，直到我进行浏览器同步。如果我运行 gulp，一切都会转译并移动到它需要去的地方。浏览器在端口 3000 上加载 index.html 文件。没有加载任何 css 或 js。在控制台中，除了图像和 cdn 文件外，我在任何具有 src 或 href 属性的东西上都收到“无法加载资源”404 错误。我拥有的大多数浏览器同步内容都直接来自文档 http://www.browsersync.io/docs/gulp/ .这是我的 gulpfile:
///////////////////////////////////////
// Required
///////////////////////////////////////
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass');
///////////////////////////////////////
// Required
///////////////////////////////////////
gulp.task('userJs', function () {
return gulp.src('js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
gulp.task('libJs', function () {
return gulp.src('js/libs/*.js')
.pipe(gulp.dest('dist/js/libs'))
.pipe(reload({stream:true}));
});
gulp.task('sass', function () {
return gulp.src('scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifyCss())
.pipe(concat('app.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('fonts', function () {
return gulp.src('fonts/*')
.pipe(gulp.dest('dist/fonts'))
.pipe(browserSync.stream());
});
gulp.task('images', function () {
return gulp.src('images/*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
///////////////////////////////////////
// Watch Task
///////////////////////////////////////
gulp.task('watch', function() {
gulp.watch('js/*.js', ['userJs']);
gulp.watch('js/libs/*.js', ['libJs']);
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('images/*', ['images']);
gulp.watch('fonts/*', ['fonts']);
gulp.watch('index.html', ['html']);
});
///////////////////////////////////////
// Default Task
///////////////////////////////////////
gulp.task('default', ['libJs', 'userJs', 'sass', 'images', 'fonts', 'html', 'browser-sync', 'watch']);
相关html:
<head>
<meta charset="UTF-8">
<title>Victor Rodriguez </title>
<meta name="author" content="Victor Rodriguez">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/libs/jquery.keyframes.min.js"></script>
<script src="js/app.js"></script>
最佳答案
好吧，我觉得非常愚蠢。不仅仅是因为我花了很长时间才弄清楚如何拼写令人难以置信，还因为 browserSync baseDir 设置完全错误。我将它设置为应用程序的“源”目录，而不是发送编译文件的 dist 目录。这里的教训是始终有一个单独的 src 和 dist 文件夹。固定的 gulpfile:
///////////////////////////////////////
// Required
///////////////////////////////////////
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync').create(),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass');
///////////////////////////////////////
// Required
///////////////////////////////////////
gulp.task('userJs', function () {
return gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream());
});
gulp.task('libJs', function () {
return gulp.src('src/js/libs/*.js')
.pipe(gulp.dest('dist/js/libs'))
.pipe(browserSync.stream());
});
gulp.task('sass', function () {
return gulp.src('src/scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifyCss())
.pipe(concat('app.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('fonts', function () {
return gulp.src('fonts/*')
.pipe(gulp.dest('dist/fonts'))
.pipe(browserSync.stream());
});
gulp.task('images', function () {
return gulp.src('src/images/*')
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.stream());
});
gulp.task('html', function () {
return gulp.src('src/index.html')
.pipe(gulp.dest('dist'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "dist" // This was the problem
}
});
});
///////////////////////////////////////
// Watch Task
///////////////////////////////////////
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['userJs']);
gulp.watch('src/js/libs/*.js', ['libJs']);
gulp.watch('src/scss/*.scss', ['sass']);
gulp.watch('src/images/*', ['images']);
gulp.watch('src/fonts/*', ['fonts']);
gulp.watch('src/index.html', ['html']);
});
///////////////////////////////////////
// Default Task
///////////////////////////////////////
gulp.task('default', ['libJs', 'userJs', 'sass', 'images', 'fonts', 'html', 'browser-sync', 'watch']);
关于javascript - 所有外部 js 和 css 文件上的 Gulp 和浏览器同步 404，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32358591/