Gulp Watch Error

JavaScript
1

Hello I am getting an error whenever I want to run gulp watch and I
want to use the browser-sync with it:

gulpfile:

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

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

// sass task
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('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

and when I try to install browser-sync I get this as well:

im doing this practice for beginners https://css-tricks.com/gulp-for-beginners/

2

Can we see a screenshot of your folder structure? Screenshot from the directory of the gulp file. Try to open up the folders so we can see all the contents.

4

I got the same error few hours a go when trying to work with webpack, and this is what helped me debug the problem.

You might get a much more meaningful error if you run gulp browserSync

The error might turn out to be similar to mine, that the port 3000 is being used.

1 Like
5

253Ă—594 6.82 KB

6

this is what I got when running gulp browserSync:

7

So what did you do?

8

I never remember how to kill the port, and most likely the operating system you use might have a different way - google search would be the best option for this

However, you can do this

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

So if it’s the port problem, The code above tells browserSync to use a different port (3002). if you get the same error then it is not about the port

9

yeah im getting the same error. ugh

599Ă—373 9.64 KB

10

The article you are working through has a git repository at with the complete project, I cloned that. Modified the gulp file my adding your code and it worked.

Maybe you could do that too! clone the repo at https://github.com/zellwk/gulp-starter-csstricks Then if you still want to follow the tutorial along, replace the gulp file with your own gulp file. If you don’t get an error, then you may have got a typo somewhere (not a big deal that you don’t know where). If you still get an error, then you have a problem in your operating system, which at least will let you know that you’re asking the wrong question (that the problem is not in your code)

1 Like
11

It seems a lot of tutorials aren’t usually spefific about where to put the work folder.

I’ve found that for Windows at least, that there are certain areas it “protects” more,

Installing third party code directly under C usually works fine.

But there have been times when putting my “projects” directly under C caused “sharing” and “permission” problems.

Much as I’ve had problems putting my work under C, I’m thinking that Windows may have a similar issue with work being under “Desktop”.

@RyanReese and @relio
Are your project work folders under
C:\users\{your_name}\documents\ ?

12

I’m on mac. As far as I know the working project can be located anywhere. Your terminal is pointing inside your working folder, so I don’t see it being an issue.

I never add my work in desktop (it just isn’t part of my workflow) but I have seen tutorials where they do.

1 Like
13

how do I clone a repository again on the command line?

its git clone url.... I think

14

Yes. It would have been quicker if you tried it :slight_smile:

But I think you would need to set some configuration up. So if you can’t do it. There is a green button “clone or download” and just choose to download the zip file

15

Yeah it may be my PC im getting the same error when using the repo

but what does this even mean?

16

This is pretty in depth.

These 2 suggest that it’s a missing C:\Windows\System32 from your PATH variable.

http://stackoverflow.com/questions/31398380/fatal-error-spawn-cmd-enoent-grunt-serve

1 Like
17

That’s all I had! From this point on it all goes over my head :slight_smile: it took me hours/days to set up my own system and learned nothing from it, though the links provided by @mawburn look like what you need. Good luck

1 Like
18

Yeah I think im missing that too…should I add it to “User Variables” OR “System variables”?

377Ă—432 8.85 KB

19

aww sucks

20

Is there a PATH variable under system variables? If so, make sure it is in both. The User one and the System one.

21

Their is only a path variable on both lowercase for Ruby