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

El chapo

Hi,
you could upgrade to the current state of gulp?
thanks

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

finally a decent video! cheers!

Very nice tutorial, just a note: on line 95 instead of browsersync.reload, the reload constant created on line 6 should be used.

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?

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!

this was such an adventure thanks for the tutorial

Do you not need to use async callbacks with version 4?

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

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

Thanks for the tutoriel

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?

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

How to get this theme files

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

Great tutorial very comprehensive. I personally wouldn't have brought WordPress into the equation as it just added a layer of unnecessary complexity.

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

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

For some reason, I feel this has been made overly complicated deliberately.

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.

what about adding gulp-javascript-obfuscator in the end of it all :D even better than just minifying : )

Thank you sir , for these lovely tutorials .. it really helps . I have a question if you may


how can I achieve the following :

> make "php scripts" work on a file.pug

> and then make "gulp" convert "pug code" to "html code + php script (already included in file.pug)" under
" file.php " instead of " file.html "

> and finally make "browserSync" watch changes on "file.php" and show them "live " on browser

thank you

Very good tutorial sir, thanks :)

how can i set up localhost/dev with mamp?

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

Thanks!

Hello PixemWeb I did the gulpfile.js as you have done, with some added but when I put gulp in the terminal it starts with in the video but does not perform any task, my dist folders are empty. Could you please help me? There would be some way to send you my gulpfile.js file so you can review it.

awesome tutorial. Loved the way how you explained every single line.
I still have one confusion, the style.css file in root folder(theme folder), it also gets rewritten, which means the code we write in it for Theme name and details, author name etc, gets replaced with the compiled css code. So do I have to add that theme name code on top of style.css file every time I run gulp?

Thanks so much for this. Question:
I'm working with your devwp theme and there is no /css/ folder in the /src/ folder. This gives me problems when configuring my gulpfile.js according to the video. Any recommendations? Thanks!

You safe my life :DDDD

Anyone know the proper order for these videos? I checked the Wordpress playlist and they jump back and forth in time by no particular order, so I don't know what's what. I followed one from 2017 that didn't use Sass because it was created after the previous one but it doesn't have Prism.js, resizeSensor.js, sticky-sidebar.js, or sticky-sb.js. It was using Tether, but that was outdated. I currently have two halves that don't really work together, so I'm not going to run this gulpfile and destroy the site I just built from the previous tutorial I followed. Need to figure out what the in between videos are to close the gap here.

I did the leveluptuts tutorials a few years ago. for some reason i must have updated node or something because my gulpfiles stopped working. this got me going again, thanks.

Thanks a ton for sharing your workflow with us. Please, Can you share your workflow source code?

Very helpful, Thank you so much

Nice video. Thanks a lot. I followed you very attentively. But the concatenation of JS files doesn't work. All the rest works fine. Could you please give me some advises in this regards? Thanks

The only reason to need a taskrunner running every five seconds during development is if you need to compile css, transpile js - or are attempting some kind of load optimization... Or TDD... Or running tests. What you are doing now just needs a browser reloader, but ok, I'll play along.

Since gulp4 I just can't get the workflow for WordPress just don't know why it is not work. I like you setup. I have a question if I am pulling in the js files from the node_modules folder do I still need to put the "js +" before 'node_modules/bootstrap/dist/js/bootstrap.min.js'? Thanks for your tutorial.

My js part is not working. Actually I don't know how u put jQuery file in dist folder and u haven't mentioned it anywhere in gulpfile.js.

i tried to install gulp globally but i cannot use it at all it keeps on saying gulp command not found

I'm a Roots/Sage 8 theme product + Gulp 3 veteran. I've delayed upgrading to Gulp 4. I think I will be able to migrate my current workflow; it's not much different as far as I can tell. My old workflow used Bower where I pinned to specific dependencies but that is a no-go now.

Thanks for making the transition less painful. ☮️ Peace.

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

gulp 4 works in npm 8 or higher (npm in node 8.12 is version 6.4.1) ..tanks

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

Really good. Thanks!

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?