Geek Answers Handbook

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

So I'm new to gulp and keep track of documents. So far, everything worked fine until I got sync with the browser. If I run gulp, everything will be broadcast and it will go where it needs to go. The browser loads the index.html file on port 3000. None of the css or js is loaded. In the console, I get 404 "Error loading resource" errors on anything with the src or href attribute, except for images and cdn files. Most of the content that I use to synchronize the browser is straight from the documents 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>
+4
1

, . , , , , , Sync 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']);
+5

More articles:


All Articles