Setting up Gulp browserSync correctly

Question

I have trouble setting up Gulp correctly with the current folder structure as shown above.

Here's my gulpfile.js:

var gulp = require('gulp'); var sass = require('gulp-sass') var browserSync = require('browser-sync').create() gulp.task('sass', function(){ return gulp.src('../public/scss/*') .pipe(sass()) // Converts Sass to CSS with gulp-sass .pipe(gulp.dest('../public/css')) .pipe(browserSync.reload({ stream: true })) }); gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'public' }, }) }) gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('../public/scss/**/*.scss', ['sass']); // Reloads the browser whenever HTML or JS files change gulp.watch('views/*.html', browserSync.reload); gulp.watch('../public/javascript/**/*.js', browserSync.reload); gulp.watch('../public/css/**/*.css', browserSync.reload); });

My index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/public/css/styles.css"> <title>FCC Image Search Abstraction</title> </head> <body> <div class="container"> <div class="row"> <h1>Hello world</h1> </div> </div> </body> </html>

Note: I do have a scss folder in the public folder.

EDIT: My index.html is located inside the views folder

What am I doing wrong? In my console.log, it says that it cant GET its styles.css

Pretty hard to tell what's wrong without looking at your entire directory structure. At a glance I'd guess you have a problem with relative paths. It's pretty unusual to have your build files and static files in the same directory. Try adding .pipe(sass().on('error', sass.logError)) instead of just the simple sass() method and see what she says. — Thomas Whitehead
– Thomas Whitehead, Commented Aug 5, 2016 at 18:59
I'd also try to change your scss source to something like return gulp.src('../public/scss/**/*.scss') — Thomas Whitehead
– Thomas Whitehead, Commented Aug 5, 2016 at 19:01

mrdotb · Accepted Answer · 2016-08-05 19:01:05Z

BrowserSync is serving public on /

server: { baseDir: 'public'},

Try to change the css link in your html for

<link rel="stylesheet" href="/css/styles.css">

Collectives™ on Stack Overflow

Setting up Gulp browserSync correctly

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related