Gulp Issue in "Build a Responsive Web Site from Scratch" Lesson 3.4

JavaScript
1

I have begun “Build a Responsive Web Site from Scratch,” and it seems like the version of Gulp used in the video is an older version. In Lesson 3.4 the final Gulp task does not run properly, and an error will occur. I had to search online for a fix, but what I found doesn’t exactly fix the issue.

The problem is this piece of code:

gulp.task(‘watch’, [‘browserSync’, ‘css’], function() {
gulp.watch(‘src/sass/**/.scss’, [‘css’]);
gulp.watch('src/.html’, [‘copy’]);
});

In the newest version of Gulp, apparently they added a “series and parallel” option, which should be placed in the area in bold. But when I use the following code, and run gulp watch, it starts ‘watch’ and ‘browserSync’, but never gets to watching the scss or html file, which means browserSync is doing nothing, and it doesn’t load the html page I’m editing, it loads a blank webpage with the url: localhost:3000 (screenshot posted below).

gulp.task(‘watch’, gulp.series(‘browserSync’, ‘css’), function() {
gulp.watch(‘src/sass/**/.scss’, [‘css’]);
gulp.watch('src/.html’, [‘copy’]);
});

Does anyone have any clue how to resolve this issue? TIA!

gulp
gulp478×265 112 KB

2

@guilherme (No idea why a post from 8 days ago was on top of my forum list, but… worth tagging the author anyway to see if there’s a response.)

1 Like
3

I’m not able to test it, but it seems like the issue might be a small typo - going by the docs, it looks like the callback function should be passed to gulp.series() not gulp.task():

gulp.task('watch', gulp.series('browserSync', 'css', function() {
  gulp.watch('src/sass/**/.scss', ['css']);
  gulp.watch('src/.html', ['copy']);
}));
1 Like
4

If you use Gulp 3.*, the code will work. That said:
Gulp 4 introduces many breaking changes to how the gulpfile.js is written. I have not yet familiarized myself with it, so I couldn’t give you Gulp 4 code without some testing of my own. I will check this out later to see how this should be written to work with the latest version.

4 Likes
5

@mistawinta, please refer to this topic for the solution:

I apologize for the delay.

1 Like
6

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