Thanks so much for outlining this: gulptask - defines tasks gulp.src - points to the file to use gulp.dest - points to the folders to output gulp.watch - watch files and folders for changes
I don't know how many tutorials and videos I have tried, THIS one did it. Fantastic! For all those who can't figure out where to start from, START FROM YOUR PROJECT ROOT.
Watched this over the weekend, was expecting it to be super complex, and yet your explanation broke it down into simple steps. Thank you for an excellent tutorial.
This is not the best Gulp tutorial in youtube, its actually the best in web !! I love you man ! Now I see how working with gulp is easier than webpack and other ones ! Hope you have plan to create another video about advance staff.
i always used to approach gulp with a large, nervous, apprehensive and audible swallow, but not anymore! surprised you didn't include browser-sync, surely an essential part in anyone's workflow to see all the results of the gulp goodness thanks a bunch for another truly excellent tutorial!
I wish I could like this video multiple times. First 10 minutes with you I've learned more than the last couple of days reading through forums and online tutorials. Nice work man!!!
Great video, thank you! A small update (I guess): to have multiple tasks you need gulp.series, like > gulp.task('default', gulp.series('sass', 'imageMin'));
Sweet! Simple and to the point. One thing I would add is using gulp-clean-css to minimize your css after you parse it from sass! //Sass => CSS => Minify gulp.task('minify-sass', () => { gulp.src('src/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist/css')); });
You definitely earned my sub from this video. I have a job interview coming up next week, and they want someone with some Gulp experience. This looks much easier than I expected. Great explanation! Very clear and to the point.
Hi Brad, I have been following your channel since a month or so. You are simply amazing. Thanks a lot for making these videos. I really enjoyed this video. There are few other awesome gulp tasks which I have learnt in other tutorial videos that I would request if you can add to this video as a part 2. They include gulp-svg-sprite, gulp-svg2png, gulp-rename, gulp-postcss, autoprefixer, postcss-simple-vars, postcss-nested, postcss-import, postcss-mixins, postcss-hexrgba, browserSync, modernizr. Once again, thank you for making these videos for us
26:55 new version of gulp will give an error. This will resolve it using .series or .parallel - gulp.task('default', gulp.series(['message', 'copyhtml', 'imagemin', 'minify', 'sass']));
Just coming from a book where after reading hours i could not figure out what was gulp and what it is used for..but after 20mn on this video i grasped the whole concept..Brad you are awesome..i would like to say you are the Feynman of web Dev..they should stop writing books and focus on conrent like yours..that's actually the best learning method..
If you are using gulp 4, watching file changes works a little bit differently. You'll need to use gulp.series function instead of the array. gulp.task("watch", function(){ gulp.watch("src/js/*.js", gulp.series("concatJS")); gulp.watch("src/sass/*.scss", gulp.series("sass")); }); Thanks for the video BTW, great as always!
my biggest accomplishment in programming is when i made a calculator in school using Borland Delphi 7. And now I'm looking at this video. Man, so much to learn... Can't wait
To anyone still watching this at 2021+, This video is very good at introducing gulp but also make sure to then check out tutorials/documentation on your latest gulp version to fill out some missing information or new syntax/methods. ngl I would still reccomend watching this even if it's from 2017.
Great tutorial, loved how much you managed to cover in half an hour by being focussed on Gulp.js and not also trying to explain Node.js, SASS etc at the same time, which a lot of other tutorials suffer from. Considering moving to Gulp from Grunt due to frustration with the watch lag on Grunt for projects with lots of concatenating and SASS compiling. Looks like I’ll need much less code using Gulp to do the same thing too which is nice.
Thanks, Brad! I've been putting off using a task runner, build system, what have you for a while, but seeing how simple it is to set up I'm gonna start using Gulp tomorrow!
Gulp is really very handy!!! I heard that we can do much more using gulp. Is it possible if you can make another video with advanced things that are possible to do with gulp? As always, thank you for sharing your knowledge!!
Great Tutorial as always. I've come to depend on this channel to get straight to what I'm looking for without all the typical youtuber stuff. I can't handle most other channels that scream CTA at you. Most suck and are often a ripoff of this channel.
I actually watched this one to get a better explanation of Gulp for a project on a Udemy course where they just went over Gulp. Your's had so much more detail, I should be able to change around my Gulp workflow now no problem 👍❤
Thanks for this, you're so knowledgeable and awesome for sharing with us. I'm taking a web developer workflow course and the guy said he is often responsible for hiring developers and a lot of people are not hired because they don't have the right workflow, git, gulp and moreover I've seen a lot of employers ask for these things.
Thanks Brad, your crash courses are always great, when I dont understand anything or want to learn something about web development I always find what I'm looking for in your vidéos and you always make all the things look so simple. That's why I don't hesitate to buy your courses in Udemy. I wish you all the best and I'm still looking for your contents
Excellent work Brad, you've never let me down. Just a FYI, when I used your code in Gulp v4.0 I needed to add async or a promise to the code to make it finish properly
Thank you so much, was a really helpful tutorial had to update some code such as the function to "async function" if any one out there is stuck with that, but really helped me see how gulp works many thanks:)
In short: Gulp JS is a front-end build system just like Grunt, Webpack and Brunch. This allows you to speed up your page load. Also, it allows you to run your application on a local server instead of your browser. It will automatically reload/refresh your code (live reload). You can use utilities as Uglify to compress/minify JS files. It also allows you to use cool technologies such as SASS... Gulp JS is automatically installed with NPM.
if you're watching in 2018, alot has changed, if you try to minify the js and it throws an error, install gulp-terser require it at the top as per usual gulp-uglify does not work anymore
Hey Brad, I am trying to follow this course but I when I get to the images part it keeps giving me the following error and I tried several of the solutions on Stack Overflow but nothing is solving it. Here is the error message I keep getting. [07:22:41] Using gulpfile ~\desktop\sass_startup\gulpfile.js [07:22:41] Starting 'imageMin'... events.js:183 throw er; // Unhandled 'error' event ^ Error: The system cannot find the path specified. at notFoundError (C:\Users\pc\desktop\sass_startup ode_modules\execa ode_modules\cross-spawn\lib\enoent.js:11:11) at verifyENOENT (C:\Users\pc\desktop\sass_startup ode_modules\execa ode_modules\cross-spawn\lib\enoent.js:46:16) at ChildProcess.cp.emit (C:\Users\pc\desktop\sass_startup ode_modules\execa ode_modules\cross-spawn\lib\enoent.js:33:19) at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12) Any ideas as to what I did wrong?
I was excited to learn more about Gulp, but it looks like it's mostly geared towards web application stuff like compressing css and js bundles. I was thinking it was more of a build pipeline, but it seems you can't send parameters from the end of one task to the next (which is the very definition of a pipeline), so it seems for a deployment tool, Gulp is about as useful as sunscreen in England.
I always felt a bit lost with gulp files, but not anymore. Thanks Brad!
Thanks so much for outlining this:
gulptask - defines tasks
gulp.src - points to the file to use
gulp.dest - points to the folders to output
gulp.watch - watch files and folders for changes
I don't know how many tutorials and videos I have tried, THIS one did it. Fantastic! For all those who can't figure out where to start from, START FROM YOUR PROJECT ROOT.
Watched this over the weekend, was expecting it to be super complex, and yet your explanation broke it down into simple steps. Thank you for an excellent tutorial.
This is not the best Gulp tutorial in youtube, its actually the best in web !! I love you man ! Now I see how working with gulp is easier than webpack and other ones ! Hope you have plan to create another video about advance staff.
i always used to approach gulp with a large, nervous, apprehensive and audible swallow, but not anymore!
surprised you didn't include browser-sync, surely an essential part in anyone's workflow to see all the results of the gulp goodness
thanks a bunch for another truly excellent tutorial!
If you want to apply browser sync for live file reloading purpose...you can user nodemon..
26:26 use gulp.task('default',gulp.parallel(['message','copyHtml','imageMin','minify','sass']));
I wish I had read the comments before going over to Stack Overflow. Lol!
Thanks man! Very helpful!
This too as of 6/30/2019: gulp.task('develop', gulp.series('clean', 'coffee'))
Thanks a ton bro 💪🏾!
Thanks, it worked!
I wish I could like this video multiple times. First 10 minutes with you I've learned more than the last couple of days reading through forums and online tutorials. Nice work man!!!
Great video, thank you!
A small update (I guess): to have multiple tasks you need gulp.series, like
> gulp.task('default', gulp.series('sass', 'imageMin'));
Thank You!
Cheers!
Sweet! Simple and to the point.
One thing I would add is using gulp-clean-css to minimize your css after you parse it from sass!
//Sass => CSS => Minify
gulp.task('minify-sass', () => {
gulp.src('src/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});
Great simple intro to Gulp.
Whoever said 6 year old YT vids are out of date?
I can't wait to start Gulping 😊
You definitely earned my sub from this video.
I have a job interview coming up next week, and they want someone with some Gulp experience. This looks much easier than I expected.
Great explanation! Very clear and to the point.
Was wondering what is gulp when I came across it, but immediately after watching this, I feel at home and am going to use gulp. Thanks a lot!
this is actually the best explanation of working with gulp - most of those are just about frontend tasks
Once I see a video made by Brad, I watch it. I don't care if it's about politics. Thanks man. You are the best.
Awesome, thank you :)
lol. Me too
Hi Brad, I have been following your channel since a month or so. You are simply amazing. Thanks a lot for making these videos. I really enjoyed this video. There are few other awesome gulp tasks which I have learnt in other tutorial videos that I would request if you can add to this video as a part 2. They include gulp-svg-sprite, gulp-svg2png, gulp-rename, gulp-postcss, autoprefixer, postcss-simple-vars, postcss-nested, postcss-import, postcss-mixins, postcss-hexrgba, browserSync, modernizr. Once again, thank you for making these videos for us
is this the best channel on youtube for web development? YESSS!
26:55 new version of gulp will give an error. This will resolve it using .series or .parallel - gulp.task('default', gulp.series(['message', 'copyhtml', 'imagemin', 'minify', 'sass']));
I lost here, got to the point with your code for the latest version. Thanks!
can you help me, I still have this error, what it can be?
sorry, never mind, everything works, my bad)
@@Dieselyura-u2p gulp.task('message',async() => {
return console.log('gulp is working');
done();
});
Thanks
Just coming from a book where after reading hours i could not figure out what was gulp and what it is used for..but after 20mn on this video i grasped the whole concept..Brad you are awesome..i would like to say you are the Feynman of web Dev..they should stop writing books and focus on conrent like yours..that's actually the best learning method..
If you are using gulp 4, watching file changes works a little bit differently. You'll need to use gulp.series function instead of the array.
gulp.task("watch", function(){
gulp.watch("src/js/*.js", gulp.series("concatJS"));
gulp.watch("src/sass/*.scss", gulp.series("sass"));
});
Thanks for the video BTW, great as always!
my biggest accomplishment in programming is when i made a calculator in school using Borland Delphi 7. And now I'm looking at this video. Man, so much to learn... Can't wait
To anyone still watching this at 2021+, This video is very good at introducing gulp but also make sure to then check out tutorials/documentation on your latest gulp version to fill out some missing information or new syntax/methods. ngl I would still reccomend watching this even if it's from 2017.
lmao I was gonna look up how Gulp and Webpack differ on youtube and of course I find both of the videos from you. You're the best man.
Great tutorial, loved how much you managed to cover in half an hour by being focussed on Gulp.js and not also trying to explain Node.js, SASS etc at the same time, which a lot of other tutorials suffer from.
Considering moving to Gulp from Grunt due to frustration with the watch lag on Grunt for projects with lots of concatenating and SASS compiling. Looks like I’ll need much less code using Gulp to do the same thing too which is nice.
The best channel on TH-cam. Thank you very much! Much love and respect!
I couldn't help myself from commenting and liking on your video. This tutorial is really awesome. Thanks a lot.
Thanks, Brad! I've been putting off using a task runner, build system, what have you for a while, but seeing how simple it is to set up I'm gonna start using Gulp tomorrow!
Gulp is really very handy!!! I heard that we can do much more using gulp. Is it possible if you can make another video with advanced things that are possible to do with gulp?
As always, thank you for sharing your knowledge!!
Great point Fernando.
With the right plugins, Gulp could be a full fletched build system.
I realize I am pretty off topic but does anybody know a good place to watch new tv shows online?
Great Tutorial as always. I've come to depend on this channel to get straight to what I'm looking for without all the typical youtuber stuff. I can't handle most other channels that scream CTA at you. Most suck and are often a ripoff of this channel.
Easy and nicely crafted tutorial. I thought Gulp was something very difficult, but not NOW. Thanks to Traversy Media :)
This is the most important video ever in modern development, thanks Brad!
Awesome video, I saw Gulp being used in another tutorial and got a bit confused. This video cleared everything up for me - thanks!
im always like Brad couse
I alway thought it would be to complicated for me but its not. After your crashcours I am ready to go the next steps ;) Thank you so much !!!
I actually watched this one to get a better explanation of Gulp for a project on a Udemy course where they just went over Gulp. Your's had so much more detail, I should be able to change around my Gulp workflow now no problem 👍❤
Thanks for this, you're so knowledgeable and awesome for sharing with us. I'm taking a web developer workflow course and the guy said he is often responsible for hiring developers and a lot of people are not hired because they don't have the right workflow, git, gulp and moreover I've seen a lot of employers ask for these things.
First time commenting on one of these videos - this was such a good, clear tutorial (and better than the one I paid for on Udemy...) Thanks very much!
Thanks Brad, your crash courses are always great, when I dont understand anything or want to learn something about web development I always find what I'm looking for in your vidéos and you always make all the things look so simple. That's why I don't hesitate to buy your courses in Udemy. I wish you all the best and I'm still looking for your contents
Excellent work Brad, you've never let me down. Just a FYI, when I used your code in Gulp v4.0 I needed to add async or a promise to the code to make it finish properly
Great tutorial.. I had no idea what gulp was until now. Thanks!
Thats very helpful and you are so good at this
32:02 Update: Use gulp.series('scripts') in place of ['scripts'] in the watch task :)
gulp.task('watch', async()=>{
gulp.watch('src/js/*.js', gulp.series('scripts'));
gulp.watch('src/images/*', gulp.series('imagemin'));
gulp.watch('src/sass/*.scss', gulp.series('sasss'));
gulp.watch('src/*.html', gulp.series('copyhtml'));
});
you are an absolutely brilliant teacher
Great tutorial - well organized, to the point, easy to follow.
Great videos man! Was just telling myself yesterday that I needed to learn Gulp. Keep up the good work!
Thank you!! This gave me a great, quick overview for an upcoming project.
Needed a crash course for a project, this was really helpful .. thanks !!
Thank you for making these videos. This video is good for me who learned the existence of gulp at my workplace like last week :)
So much useful information in such a short video. Thanks.
This is what I've been looking for. Thank you so much for this, Brad!
Very informative tutorial, now I understand gulp fully. Thanks and more power
Just wanted to thank you for your brilliant videos. Very much appreciated.
Awesome tutorial. Love how you make everything so simple. I learn a lot from your off hand explanatory asides.
I love you thanks. kk
I take 30 minutes to learn something i was trying to learn for months.
Its Brad you know
Superbly explanied, as usual. Thanks!
Really helped me understand what gulp is all about! thanks
This video is pure gold. Thanks alot.
thanks brad for your hardworking , i love your all video with teaching experience .....good bless you
Thank you so much, you explained this Gulp very well this is a great framework to work off of!
This chanel is just too awesome. Thanks Brad, youre doing an amaing job
Thanks Brad. Helps me understand the essence of Gulp.
thanks. Im planning to use Gulp in my Angular 2 project for CI to push code gulp-rsync to SSH
right now is it fine to use this? in vs code there is minify options and there is sass compiler
Splendid, simple straight and well documented :)
Thank you so much Brad, your videos are helping me a lot :)
Thank you so much, was a really helpful tutorial had to update some code such as the function to "async function" if any one out there is stuck with that, but really helped me see how gulp works many thanks:)
This tutorial is pure gold, thank you!
LUV your videos... they have been a lifesaver when trying to learn new concepts!!!! :)
Thanks for such great video of this awesome tool. I am stuck with Webpack since I have been using React a lot lately.
Thank you! This video addressed all my doubts. Awesome content from end to end!
Very clear explanations and examples. Thanks a lot.
You're out here doing the Lord's work !!!
It was very hard to me...Now it's easy and clear all confusion
True Legend! Thank you Brad...
This is really a good tutorial for me to get to know Gulp, thanks.
Thank You so much for making this tutorial. I was scared using gulp but not anymore :)
Really helpful, a few things have changed since this was published but still a great tut.
In short:
Gulp JS is a front-end build system just like Grunt, Webpack and Brunch.
This allows you to speed up your page load. Also, it allows you to run your application on a local server instead of your browser. It will automatically reload/refresh your code (live reload). You can use utilities as Uglify to compress/minify JS files. It also allows you to use cool technologies such as SASS... Gulp JS is automatically installed with NPM.
i came back just to like this video. Great tutorial! Thanks.
Thanks! You have helped solidify this process big time for me!
So excited!! Your videos are awesome. Thks!!
This an excellent tool, I had no idea how useful it is. Thanks for this great tutorial :)
Thanks for clarifying gulp.js ..keep up the good work !!!
Where were you some months ago when I was struggling to write the perfect gulp boilerplate for my nodejs apps? :P
if you're watching in 2018, alot has changed, if you try to minify the js and it throws an error,
install gulp-terser
require it at the top as per usual
gulp-uglify does not work anymore
Thank you. This tutorial will make me to use gulp in my next project. Thanks again.
Hey Brad, I am trying to follow this course but I when I get to the images part it keeps giving me the following error and I tried several of the solutions on Stack Overflow but nothing is solving it.
Here is the error message I keep getting.
[07:22:41] Using gulpfile ~\desktop\sass_startup\gulpfile.js
[07:22:41] Starting 'imageMin'...
events.js:183
throw er; // Unhandled 'error' event
^
Error: The system cannot find the path specified.
at notFoundError (C:\Users\pc\desktop\sass_startup
ode_modules\execa
ode_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (C:\Users\pc\desktop\sass_startup
ode_modules\execa
ode_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (C:\Users\pc\desktop\sass_startup
ode_modules\execa
ode_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
Any ideas as to what I did wrong?
Nice and very informative video, thanks Brad.
I was excited to learn more about Gulp, but it looks like it's mostly geared towards web application stuff like compressing css and js bundles. I was thinking it was more of a build pipeline, but it seems you can't send parameters from the end of one task to the next (which is the very definition of a pipeline), so it seems for a deployment tool, Gulp is about as useful as sunscreen in England.
You nailed it with this video!!! Thanks so much for sharing the knowledge!
you never fail to amaze me Brad :D
I watched five seconds and liked the video.
Man, you're awesome.Period.
BRAD YOU ARE AWESOME, JESUS!!!!!! THANK YOUUU, MAN!
Like always Brad offers the best! Gulp now for free! What do you want more?
Appreciated for you're video on gulp.
Thank you for having these great videos.
Great demo .Thanks Brad !
Thanks a lot for the video. Clear and understanding. All 5 points for you.
You are just awesome. Now lot more clear. Thank you .
anyone having problems do it this way gulp.task('message',async() => {
return console.log('gulp is working');
done();
});
Thanks, that worked for me...not sure why this happens, but I appreciate the help
Thanks for this
Legend
done(); does nothing in this case. It's after the return BUT the async() => worked wonders. Thanks