Gulp 4 Tutorial with Node JS, ImageMin, Browser Sync, SASS, SourceMaps, CleanCSS & More

This is completely updated tutorial video on Gulp 4.0 with NodeJS, BrowserSync, SASS, SourceMaps, CleanCSS , AutoPrefixer, Gulp Changed, Gulp Uglify and more.

My previous videos have been rendered obsolete since Gulp has been updated from 3.9 to 4.0. That's the beauty of software development, it keeps you on your toes.

Code Your Very Own WordPress Theme with DevWP:

Code for your Gulpfile and Links to More Resources:

I felt it was my duty to create a new Gulp 4.0 video featuring some of the most widely used Gulp Plugins.

This is an Advanced Gulp tutorial video that I make approachable for beginners as well as advanced users.

I demonstrate how to create a gulpfile and a package json file along with how to use gulp to streamline your workflow and save you a tremendous amount of time.

Gulp is a toolkit for web designers and developers to help automate their workflow. It's usage has continuously grown over the years and with almost 4,000 gulp plugins available, it's no wonder Gulp is one of the most popular task runners.

Gulp uses NodeJS which is server side JavaScript used by a growing number of web developers.

In this video I showcase several useful Gulp plugins like:
1 - Browser Sync
2 - Image Min
3 - Gulp Sass
4 - Gulp Source Maps
5 - Gulp Concat
6 - Gulp Clean CSS
7 - Uglify for JavaScript Minification
8 - Line Ending Corrector
9 - and more

Table of Contents:
Unproductive Workflow 00:52
Gulp Plugins Used 05:08
Start The Actual Tutorial 05:46
Node 06:55
Remove Old Gulp Version 08:45
Install Gulp 4 Globally 09:16
Make a Directory for Gulp & Node 09:55
Package JSON File 10:42
Gulp Local Project Installation 11:42
Install Gulp Plugins: 13:18
Testing our Gulpfile 01:02:42

If you've found yourself running out of time with your coding projects, or spending to much time on very simple, basic but time consuming tasks, then using Gulp JS will make you a more productive web designer and developer.

My goal is to help you achieve your goal of becoming a productive coder.

Hopefully you enjoyed this Gulp 4.0.0 tutorial for beginners and advanced users.

#gulp #gulpjs #gulp4

[onurkanca]

This is the best GulpJs video I have ever watched ! Thanks a lot for all explanations. Cheers !

[DavidFT]

Hey. Just came back to say thank you for this tutorial. It's the most thorough Gulp4 tutorial I've come across (and the only one I needed). Since implementing this, it has improved my productivity immeasurably. I've tinkered with directories and few other things to suit my workflow and the results are perfect. Take care, David.

[KLNNNN]

It took me 20 minutes to love you. Amazing explanation! Slow, thorough and exaustive explanation

[luisdwq]

I tried a few gulp tutorials and this is the first one I did it actually worked, thank you!

[takerram]

Dude, that is one of the best explanation of gulp, thanks

[nilambarsharma]

This is all someone need in a WordPress theme. Thanks for the video.

[girlandhercomputer]

I really like your video, they are all really helpful in real work! I am very grateful for you have been doing!

[crashito_x]

this was such an adventure thanks for the tutorial

[tharakakarunarathne]

Please Help
The following tasks did not complete:
[02:04:55] Did you forget to signal async completion?

[remkospaans]

Thank man. It was a whole sitting with the laptop on my lap. Did the same as you streaming video on the TV. I am going to have a lot of fun with it. Again Thanks for that.

[navanshu]

Thankyou for making this video you have been a great help!

[jasonng]

This tutorial is simply fantastic! You've just saved me hours and hours of my life! Thank you thank you :D - SUBSCRIBED!

[gelous]

Hello,
Great material.
Is it still actual enough or something we should add/change?
Thanks, you are probobly the best programming online tutor.

[grimgwyllgi]

I'm very new to this and this video is one of the best examples I've found so far for 4.0. Very comprehensive and clear. I have one question: is there a reason why you created the default task the way you did instead of 'exports.default=watch'? I've actually not found a single example exporting the default task like this even though this is how Gulp's new documentation instructs you to do it. What am I missing?

[Uncaught_in_promise]

Awesome video, i have set up development environment. Once my theme is ready, how should I deploy it on live website?

[kleuner]

Where do you have your webdesignskills from? Books and videos and learning by doing? Or a special school? Your videos are very helpfull!

[KLNNNN]

I have a question about this line of code:
return gulp.src([scss + 'style.scss]')

Why use the [ ] inside the gulp.src to wrap scss + 'style.scss?

[NellyMoseki]

Hi Pixem. This has always been my favourite Gulp 4 tutorial. I've managed to set it up with a non CMS project and it worked perfectly now I'm trying to get this setup working on a drupal 8 site and I haven't been successful. My theme is located in web/themes/moseki/. At the moment gulp returns a white screened valet page with error message 404 - Not Found. How should I go about achieving this? You help will be much appreciated. Thank you!

[robeeeeen]

How did you integrate scss in your wordpress theme, so that you can call it from gulp? I mean sass compilation ....

[jackieriemersma]

Very nice video! I am using this to setup a gulpfile to work with the _s theme using local by flywheel to host. Everything is working for me aside from the browser not automatically refreshing. Any suggestions?