Gulp v4 - Sass and BrowserSync setup
Vložit
- čas přidán 19. 02. 2019
- In this video I look at how we can setup a gulp build that will compile Sass for us, and automatically sync all changes to html, sass files, and JS files, on save using BrowserSync. Save your file, and the page is updated. So nice!
If you're coming from a previous version of Gulp, you may have noticed that the upgrade to v4 brought in some breaking changes, which is never fun. Instead of creating tasks, we now create functions, but other than that most things are still the same luckily :)
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
Awesome job Kevin :) Your the only person to cover the new version of Gulp.
After watching your video I was able to redeploy my portfolio to Netlify using the latest version of Gulp.
Gulp is not that difficult, I noticed the only difference is that tasks now become functions and the functions need to be exported. Pretty straight forward to even add ecmascript support for the javascript task too.
Again great job and I can't wait to see more videos of yours :)
Kevin is the best teacher on CZcams. Never a wasted word - always precise, clear and informative. Thank you. :)
I can't thank you enough, Kevin. You save my job today! Greetings from a fan in Chile :)
Thank you Kevin! I was diving back into Gulp and was getting lost with some of the new changes. This video definitely helped!
After almost 3 years it is still the great starting point for everyone who's new to this. Thank you so much for creating this easy to follow tutorial. Keep up the good work.
Great stuff, man! Wonderful, got my browserSync up and running right away on the first attempt while watching this tutorial. Awesome way of explanation commenting every line of code on new and potentially complicated methods/objects!
I've been troubled with Gulp for too long, this has SAVED me. Thankyou!
Thank you so much man! I searched Google for a simple tutorial and yours was along the BEST of all the articles that I could find that could easily break down Gulp v4 to a complete beginner. Once again thanks man!
I had a lot of problems searching for a new gulp's version tutorial and you explained it in a cool way. Thanks a lot!!!
It's a really good lesson you've done there. I have struggled with the book I started after is an old version of Gulp, and now the syntax has changed from Gulp 4.0 Thank you from Carsten in Denmark
Awesome tutorial!!! I was working through some other tutorials that were giving me grief because the dev environment wasn't working correctly. The version changes in Gulp were to blame, and your video helped me correct it in a few minutes. Thanks again!
That change to v4 was a killer! Glad I could help though.
Amazing stuff!! Haven't used Gulp in ages and was struggling with version 4. You cleared all the doubts, thank mate.
You're a natural teacher. Thanks for the level of detail.
You saved my day!
I'm trying to use gulp with WordPress and unfortunately, there's a lot of old tutorials that only gave me bugs, but your tutorial is the perfect one! Thank you so much!
thank you! soon your tutorials will become one of the most popular because your explanation is great!
God job @Kevin Powel, I had trouble deploying the Gulp 4 with browser-sync, now I find the solution! Thanks a lot!
Thank you! So many useless / confusing vids on this topic on YT, yours saved my day
Thank a lot Kevin. You saved my life. You're creating amazing videos!
This seriously is the best tutorial for gulp. You are great, thank you for teaching these amazing lessons.
Hi Kevin Powell - this is a great video you have made about gulp sass. Super explanation and description. Thank you so much, I will follow your videos. Best regards from Carsten in Denmark
Thanks so much for uploading the gulpv4 tutorial, It’s been so difficult to set up gulp when all the existing tutorials are outdated!
I originally intended it to be with the old version. I didn't realize 4 had breaking changes, lol. Figured if I ran into the issue, many others probably were too!
Hi from Russia (St.Petersburg),
Thank you Kevin for the clear presentation of the material.
Keep it up. I look forward from you to new interesting topics.
Hi Kevin!I was just thinking about you and Gulp 4 these days.Great video!Thanks for your help.
It's me again.I just started a project after watching your video and I have to thank you again because your video makes my life much much MUCH easier.Thanks a lot again!Can't wait to see the next video.
great stuff, just starting an internship, I have to use gulp and this video was real help...cheers!
Wow!!! I've been meaning to find out more about Gulp and using scss/sass in my projects and this video did an AWESOME JOB explaining it!!! I've been using Express.js a lot and I think incorporating Gulp will help out a lot. Thank You for Sharing!!! Have a Great Day!!! ~ Peace :)
I've been troubled with Gulp for too long, this video helped me alot..thank you so much..
Thanks for this. Last time I used browserSync, v3 was the latest version, and I didn't know why my environment was failing. Thanks for the intro and explanation of v4. It was very helpful!
Glad I could help! It took me a LONG while to realize why it wasn't working, lol. Not many tutorials out there mention v4 either, so it can be really frustrating.
Thank you so much this was so helpful! I was messing around with gulp.series to figure out how to port my tasks from v3 to v4, but I was really struggling. This was a huge help!
I got so frustrated as well, and there was next to no info on it! Figured others would be running into the same problem as me. Glad I could help :D
I completed this yesterday after a few issues; the internet speed of 2mbps (where I was and could not be avoided) combined with a couple of typos on my part, yet amazed how this video simplifies everything :-) I have taken a huge leap forward in web design, thanks Kevin.
must have taken forever to install the npm packages 😫 - glad you got it working though!
Probably the best explanation out there on gulp
My old gulp file didn't work with my new setup and I had lost the original package.json file. This saved me a lot of head scratching. Thank you very much.
I've watched 3 outdated gulp videos. Your video saved me!!! THank you!!!
As now this is the only updated video tutorial for gulp...thanks a lot and love your all video
Great explained Kevin. Thankyou so much.
Thanks for very helpful tutorial, Kevin!
Thank you for this tut, really helped me out.
i was tired by searching how to do bla bla bla and here is simple and easy way to understand the gulp :) A big Thank you for this tutorial
Extraordinary!
Very clear and informative!
Thanks!
thank you so much! Finally after many hours of trying to set watcher for my .php files, your tut show me how to do this.
WOW!!! thanks very much , everything worked in 1 go on my crappy laptop , first ever tutorial with no hassle
big time upvote... .this saved my butt... I had to work on a directory from years ago that was gulp 3.0, so hard to stay up on all this stuff sometimes.
Really nice tutorials, and this one is going to save me a lot of time forward in debugging.
This is my first day with gulp and you made it easy, even tho I don't fully understand how gulp works but I will look out for a tutorial that will explain everything.
Thanks for the vid! helped me alot to start with gulp and the understanding of browser sync !
thanks a lot for this tutorial ! I was struggling to get BrowserSync to work with Gulp4 now it's working fine! After this video I was struggling to define the default task but found the solution which i share here: const { series } = require('gulp'); and then at the very bottom exports.default = series(watch);
Amazing tutorial for the hot reloading feature! Thank you very much!
Excellent tutorial, It helped me a lot to improve my template from gulp 3.9 to 4. Thanks amigo.
Hi, Kevin! Thank you for your video! It's very better what I find in youtube.
One of the best tutorial video I have seen. Thanks
Really awesome tutorial Kevin. I'd love to see an extension of this video to see a semantic way of how you organize your sass files.
I joining all the ancient comment under this video to say thanks a lot. It was well and clearly explained so good job and thanks again !
Cmder is the most unbelievably amazing command line tool for Windows. :)
You did a very good job with this tutorial. Thank you very much!
I watched a lot of tutorial video but none of that worked. only this video is very easy and it working .thank you
Thank you Kevin 🤙
This really helped me
Great video. You got me up and running. Thanks Kevin
i loved that tutorial. respect from Turkey
Great tutorial. Set up my project in no time ! Thanks!
Thanks Kevin, really helpful. You are a lifesaver.
Thank you so much!
Great explanation
The only vid on gulp 4 that actually worked for me. Ty.
Glad I could help
i really appreciate your work, you are heavenly splendid
Thanks Kev! keep up the good work.
damn bro
this huge
I like it.
you are doing amazing
Thanks for this. Good intro to gulp v4.
Very happy you made this!! Thank you!!
Thanks Kevin, you really helped me!
This worked great for me! Thanks!
If anyone had trouble setting this up for wordpress you may need to replace your browserSync.init in the gulpfile.js with the following instead of
server you need to use a port since in the tutorial the files are static.
browserSync.init({
port: 8888,
proxy: "localhost:8888/yourThemeName/"
});
Also use this line instead of .html since the files are .php
gulp.watch('./*.php').on('change', browserSync.reload);
I see you wrote 'yourThemeName' but do you mean the whole WordPress website directory?
I am so close. I changed to .html to php. i changed the browserSync.init to my port '80'. when i run gulp watch it throws up my website build. when i save any php file i see the terminal "Browsersync reloading' but my browser still doesn't refresh. Is there a final step i am missing?
one of the wonderful video, thank you very much for this video. many thanks bro :)
Thanks a lot mate, its working prety good, it's awesome.
Thank you, Kevin for this video!
Thanks, I was following a react tutorial and was completely lost until I found out that they were working with an older version of gulp. 😅
Thank you Kevin! You saved my day
Exactly the video I needed to see. Thank you. 🙏
Excellent video. Extremely helpful.
Thanks, man this tutorial helped me a lot
I have trawled the web for some decent gulp tutorials.
Some have been over complicated and some seem to have a bizarre mix of the old and new(v4). I also have some subscripotions to paid services and even on there they were way to complicated. In every case not many of them worked for my basic level of understanding.
This one however was perfect. Followed your instructions and it has worked perfectly. Well Done!.
Now I will try and hopefully build on this with things like sourcemaps, auto prefix, rename etc.
Glad I could help!
Kevin Powell do you think think you will do a part 2 to this where you add additional functionality. Mijification. Rename. Autoprefixer. Source maps.
Hint hint.
Did you use 4.0.2 version with the code form the video, does it work?
Dorian Sabo it worked yes
Thank you for the tutorial on Gulp 4 much Appreciated
Great Gulp4 tutorial. Thanks! They are hard to come by. I appreciate this. Are planning on taking this series to the next level with advance features such as build, series, parallel etc. I tried reading the documentation, but it's taking me forever to understand. If you sell courses on line I'd be happy to join. Cheers!
It as also be great to learn how to view your project local host from an external smart phone. You mentioned @22:02 that browser-sync assigns an external address for devices on the same network to view . How can we access this?
Thank you so much. What a great tutorial!
Thanks, Kevin. Really helpful.
thanks a lot it has solved my problem very very helping material i search it and finally i found it here
Hey I m ur new subscriber This video really so much helpfull...
Thank you so much....................
sir you are a great teacher...
Great tutorial, this help me a lot!, all clear thanks you.
Hey I m ur new subscriber This video really helpfull...
Thank you
sir you are a great teacher...keep it up 👌
17:03 c'est tout! (made me happy enough to back up and find the timestamp and write a comment.)
thank you, sir. It was very helpful.
Kevin you are AWESOMEEE ty very very much
That was so much helpful. Thanks a lot.
Same vscode color theme =)
Really good tutorial.
You saved my day! thank you . you are amazing
Thanks a lot! Great Gulp 4 tutorial!
You saved my life ❤️💕💕 thank you
My God thank you, it took me awhile because there is and error in my side but I did it, Awesome!
Exactly what i was looking for!
Very helpful! Thank you so much!
Thank you! This video really helped me!!!!!
Thanks for this video,
i finally learned
Thank you very much for the great tutorial.
This is real quality! Subscribed
Welcome aboard!