所有外部 js 和 css 文件上的 Gulp 和浏览器同步 404答案

【问题标题】：Gulp and Browser-sync 404 on all external js and css files所有外部 js 和 css 文件上的 Gulp 和浏览器同步 404
【发布时间】：2015-09-02 16:39:54
【问题描述】：

所以我是 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>

【问题讨论】：

你能显示你的网址，或者至少从港口开始吗？
网址？它在 localhost:3000 上运行。它还没有在任何地方托管。
是的。只是想确保它不是由于丢失的斜线或类似的东西而导致的任何类型的连接错误。 Soo...您可以按照browsersync.io/docs/gulp/#gulp-sass-css 部分所说的那样做，并在执行浏览器同步任务之前执行您的功能，因为他们在 serversass 任务作为依赖项/b> 任务。
试过了，没有任何变化。它只是拒绝加载外部 js 和 css。我什至检查了 gulp 日志，它显示浏览器同步在每个依赖项之后和监视任务之前运行。

标签： javascript gulp browser-sync

【解决方案1】：

嗯，我觉得自己非常愚蠢。不仅因为我花了很长时间才弄清楚如何拼写难以置信，还因为 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']);

【讨论】：