Gulp index issue

JavaScript
1

Hi I am getting this on my browser when I try to
use browser-sync.

It fires up the browser but not does not seem to grab my HTML.

//variables
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

//task Sass 
gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Other watchers
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})
2

UPDATE: it works not it knows where my HTML is but does not show any css…

3

Shouldn’t this be build/css?
.pipe(gulp.dest('app/css'))

(basing this on your prior topics)

4

well this project title it differently …not sure why https://css-tricks.com/gulp-for-beginners/

I figured id learn how it works first…

5

Oh okay, that makes sense, thanks for the link, that helps.

Can you provide a screenshot, and can you provide the HTML it is serving up?

6

I’m getting this on my browser

instead of showing my updated css file…

7 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gulp JS project</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
		<header>
			
		</header>
		<main>
			
		</main>
	</body>
	<footer>
		

	</footer>
</html>

CSS:

// styles.scss
.testing {
  width: percentage(5/7);
};

body {
	background-color: red;
}

So I’m changing the body color to test it out and its not changing

8

Hmmm… I just walked through the steps and it works for me.

Here is my project so you can see my files and their contents.

To get it to work, I simply ran gulp watch, it opened a browser to localhost:3000 and while it was running when I modified scss/styles.scss it updated the browser.

9

ugh we have the exact same thing not sure why its not reading my styles…or HTML content
but it seems to be reading my title tag ha

10

wait it seems when I modify my css the browser reads it
and I get this:

11

this is what I get when I inspect element

749×775 75.1 KB

12

So manually altering your css file produces the reload?

That’s intriguing, it means your sass command isn’t firing.

Next time you run gulp watch, edit the styles.scss and then take a screenshot of the output in your terminal running gulp watch

Are there any errors being reported? Did it execute the sass command?

13

Right it reloads but it does not show anything.

ok this is what it shows:

not any that I see and yes I believe it does execute Sass

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.