CODEWITHSUNDEEP
javascriptgulpbrowser-sync
Vikk
Vikk

Reputation: 647

Gulp and Browser-sync 404 on all external js and css files

So I am new to gulp and have been following the docs. So far everything has been working fine until I got to browser-sync. If I run gulp everything transpiles and is moved where it needs to go. The browser loads the index.html file on port 3000. None of the css or js are loaded. In the console I get "Failed to load resource" 404 errors on anything with a src or href attribute, except for images and cdn files. Most of the browser-sync stuff I have is straight from the docs http://www.browsersync.io/docs/gulp/. Here is my 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']);

Relevant 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>

Upvotes: 4

Views: 4073

Answers (1)

Vikk
Vikk

Reputation: 647

Well I feel incredibly stupid. Not just because it took me forever to figure out how to spell incredibly, but also because the browserSync baseDir was set entirely wrong. I had it set as the app's "source" directory instead of the dist directory where my compiled files were being sent. The lesson here is to always have a separate src and dist folder. the fixed 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']);

Upvotes: 5

Related Questions