所有外部js和css文件上的Gulp和Browser-sync 404

Question

所以我是gulp的新手并且一直在关注文档。 到目前为止，一切都运行良好，直到我进入浏览器同步。 如果我跑了一口气，一切都会转移，并移动到需要去的地方。 浏览器在端口3000上加载index.html文件。没有加载任何css或js。 在控制台中，我得到了“无法加载资源”404错误，除了图像和cdn文件之外，还有src或href属性。 我所拥有的大多数浏览器同步内容都直接来自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>

Answer 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']);

所有外部js和css文件上的Gulp和Browser-sync 404

问题描述

1 个解决方案

解决方案1
5 2015-09-02 19:36:09

所有外部js和css文件上的Gulp和Browser-sync 404

问题描述

1 个解决方案

解决方案1 5 2015-09-02 19:36:09

解决方案1
5 2015-09-02 19:36:09