Тёмный

Gulp Task Automation for Beginners 

freeCodeCamp.org
Подписаться 10 млн
Просмотров 116 тыс.
50% 1

You will learn how automate all your web development tasks with Gulp. In this video we will be compiling Sass files to CSS and then minifying the CSS for production.
🔗Install node: nodejs.org
🔗Install Gulp: gulpjs.com/
Install Gulp Packages:
🔗Sass: www.npmjs.com/package/gulp-sass
🔗Css uglify: www.npmjs.com/package/gulp-ug...
🎶Music by: Nicolai Heidlas Music - With you
/ nicolai-heidlas
⭐️Tutorial from iEatWebsites. Check out their channel for more great tutorials: / @ieatwebsites
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org

Опубликовано:

 

23 июл 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 103   
@halimtekin
@halimtekin 5 лет назад
This tutorial is great !! Thank you so much. I totally understand what gulp is. Again thank you.
@lemueljunior
@lemueljunior 5 лет назад
Nice tutorial! Thank you guys for sharing this.
@dimka3628
@dimka3628 2 года назад
Thanks, man ! I am happy that Ive opened Gulp for myself. Its like to go to a new level of web- developing xD
4 года назад
So amazing to have a brave creator here
@ganeshkolase7203
@ganeshkolase7203 3 года назад
Thanks for the video. Really great demonstration and explanation
@badrrinarayanan4659
@badrrinarayanan4659 2 года назад
Thank you so much. It's so useful for beginners like me. 🙂
@AnjumRizwi
@AnjumRizwi 3 года назад
Excellent tutorial for beginners and who is new in sass
@commanderbensisko
@commanderbensisko 4 года назад
Excellent introduction!
@gauravk8190
@gauravk8190 5 лет назад
Nice Stuff, Thank you for sharing.
@ChiakiNanami736
@ChiakiNanami736 5 лет назад
Despite all the naysaying in the comments, I think a tutorial like this still has a place in 2018; if you change employers or contracts or whatever and go from a webpack shop to a gulp shop, you need to know it. IMHO, the "best" tool is the one your employer uses because they're paying your bills.
@systemofadown1986
@systemofadown1986 5 лет назад
I totally agree with you
@josephjoy8390
@josephjoy8390 3 года назад
clear instructions and nice tutorial Good Job
@rotinaindependente
@rotinaindependente 5 лет назад
Great tutorial, you used uglifyCSS in another task, maybe you could use it after transpile sass to css and sending directly to "dist" folder, I think that would be a short approach
@karlozTQ
@karlozTQ 5 лет назад
thank you so much for your explication :)
@carstenwendelnielsen9433
@carstenwendelnielsen9433 4 года назад
When I do completely as in this turtorial, I don't get sass to create a directory with css. New versions of commands to use?
@jonathanself1263
@jonathanself1263 4 года назад
Does this need to be updated for gulp 4.0.2? The watcher seems to be breaking (simple google shows many had this problem). I've been trying to convert this to the newer syntax but keep running into issues.
@chooseForYourLife
@chooseForYourLife 5 лет назад
Thank you so much!
@everythingisfine9988
@everythingisfine9988 5 лет назад
Webpack and parcel.js is the standard now. But I’ll still use gulp to run customize tasks like replacing code within my project based on environmental variables
@user-hm2jl4cd3y
@user-hm2jl4cd3y 10 месяцев назад
Perfect Explanation, thanks !
@imranrafiqrather6228
@imranrafiqrather6228 3 года назад
This is how we setup our project npm install gulp-cli -g npm install gulp -D Then go to your project folder npm init -y touch gulpfile.js We are ready to proceed :) To look for gulp commands and help gulp --help
@tiagopiovesan2718
@tiagopiovesan2718 5 лет назад
thanks for the content!!
@e11world
@e11world 3 года назад
Great video. Can you show us how to use purgecss or something similar with gulp (trying to use it but I have paths as var and all css stuff in function so the usual pipe content thing they have in documentation is not working for me). Thank you so much
@qristinesargsyan3308
@qristinesargsyan3308 2 года назад
Great tutorial,thank you very much! Everything was fine, but there was a problem when I was writing gulp ('gulp' is not recognised)...why?
@manikandans7462
@manikandans7462 4 года назад
great tutorial ...Thanxx
@dennismohaaa6969
@dennismohaaa6969 3 года назад
Incase you are using gulp 4 and you get errors, then this is how you go about it const gulp = require('gulp'); const sass = require('gulp-sass'); var uglifycss = require('gulp-uglifycss'); gulp.task('sass',()=>{ return gulp.src('./sass/index.scss') .pipe(sass().on('error',sass.logError)) .pipe(gulp.dest('./css')); }) gulp.task('css', function (done) { gulp.src('./css/*.css') .pipe(uglifycss({ // "maxLineLen": 80, "uglyComments": true })) .pipe(gulp.dest('./dist/')); done(); }); gulp.task('run',gulp.series('sass','css')) gulp.task('watch',function(){ gulp.watch('./sass/index.scss',gulp.series('sass')) gulp.watch('./css/*.css', gulp.series('css')); }) gulp.task('default',gulp.series('run','watch'))
@persas1683
@persas1683 2 года назад
Thanks, man
@danielkrajnik3817
@danielkrajnik3817 3 года назад
9:30 wouldn't **/*.sass be the same as *.sass ? (plus recurse into any other folders)
@JohnDoe-xi6df
@JohnDoe-xi6df 4 года назад
Excellent!
@sabuein
@sabuein Год назад
Thank you, brother.
@fahadkhanchughtai3279
@fahadkhanchughtai3279 4 года назад
Thanks brother
@Lucas_Simoni
@Lucas_Simoni 3 года назад
💁‍♂️ "npm init --y" instead of hitting enter several times. It will enter the default values for you without prompting to change it.
@Microphunktv-jb3kj
@Microphunktv-jb3kj 4 года назад
wich one is easier for a noob, gulp or webpack?
@nimitindrasoni
@nimitindrasoni 5 лет назад
when i run "gulp css" (gulp-uglifycss) it shows error to me " 1. the following tasks did not complete: css 2. did you forget to signal async completion? " could you/anyone please help
@juliandavidvidalgonzalez4536
@juliandavidvidalgonzalez4536 4 года назад
I got the same error, anyway to fix it?
@deepjyotibaishya7576
@deepjyotibaishya7576 4 года назад
yup same error because its too old
@ondrejhadrava4109
@ondrejhadrava4109 3 года назад
@@juliandavidvidalgonzalez4536 make that function async, it works for me
@kristiankristian4652
@kristiankristian4652 3 года назад
gulp.task('css', function () { return gulp.src('./css/*.css') // this line, write return .pipe(uglifycss({ "uglyComments": true })) just write : return
@PepeTostado
@PepeTostado 4 года назад
what wpuld happen if did not put return gulp, and instead i put just gulp.src('')
@bacanalienigena
@bacanalienigena 3 года назад
Just as a suggestion, there is a extension on VS Code editor that just works fine without so many configurations. So try it out.
@bahaalrtemi5106
@bahaalrtemi5106 3 года назад
what's it..!! can you help me Thank You.
@PepeTostado
@PepeTostado 4 года назад
how can ilearn to code sass or is it not necessary, where should i look for a file .sass
@EddyVinck
@EddyVinck 5 лет назад
Is there any reason why someone would pick Gulp over Webpack? Seems like Webpack is all you need to know.
@rodrigokosta86
@rodrigokosta86 4 года назад
So greaat man!! 👏💻
@rafimiazi642
@rafimiazi642 3 года назад
GULP COMMAND NOT FOUND??? Just copy and paste the command in gitbash " npm install --global gulp-cli " END OF PROBLEM
@mattias3668
@mattias3668 2 года назад
I don't get it. So gulp(1) is just a bad alternative to the standard tool make(1), with built in inotifywait(1)? Why not just make(1) and inotifywait(1), or extend make(1) with inotify(7) support?
@erwindajose209
@erwindajose209 5 лет назад
Can you do the autoreload too 😊
@inambe3987
@inambe3987 5 лет назад
great tutorial! Guys can you please tell me which one is best, webpack or gulp ? I haven't heard much about gulp but heard alot about webpack. It seems like gulp is more decent and simple to use, then why webpack so popular ? Thanks.
@inambe3987
@inambe3987 5 лет назад
Oh, interesting. Yeah, I've tried parcel but webpack seems powerful and more understandable.
@rand0mtv660
@rand0mtv660 5 лет назад
Depends on your use case. If you build a single page application with multiple routes and more complexity, then webpack will be the better option because of its code splitting features and modern feature set and it has a lot of community support and it has become the standard in the industry. On the other hand, if you are building something simpler like a website maybe and you are using for example SASS, gulp might be the better option here for such simple tasks as compiling SASS to CSS or optimizing images for production or maybe even transpiling ES6 to ES5 javascript so you can write more modern javascript (since you probably won't write that much JS for a simple project), but still transpile it to javascript used by more browsers. Don't get me wrong, gulp can be used for bigger applications, but it's just that webpack handles it a lot better and is more modern after all.
@inambe3987
@inambe3987 5 лет назад
Thanks Rand0m TV for clear explanation, I get it :)
@JacoBluezz
@JacoBluezz 5 лет назад
is npm as popular as webpack?
@inambe3987
@inambe3987 5 лет назад
Are you serious ? npm is a popular package manager and webpack is a popular asset bundler.
@vygantaspauliukonis2002
@vygantaspauliukonis2002 4 года назад
gulp.task('default', gulp.series('server', 'watch')); after that i get AssertionError [ERR_ASSERTION]: Task function must be specified
@calebrunion
@calebrunion 4 года назад
Yes! Gulp 4.x requires this!
@pravinda333
@pravinda333 4 года назад
Use exports.default = gulp.series(server, watch); // server and watch must be functions not gulp.task things.
@AmitPatekar
@AmitPatekar 11 месяцев назад
Gulp 4.0 has changed the way that tasks should be defined if the task depends on another task to execute. The list parameter has been deprecated. Ex gulp.task('develop', gulp.series('clean', 'coffee'))
@marble_wraith
@marble_wraith 5 лет назад
I don't use any abstraction layer. Npm scripts + CLI tools = better.
@zihadhosan2459
@zihadhosan2459 4 года назад
Only thanks not enough, wish you good luck.
@maubg9434
@maubg9434 3 года назад
why would they use gulp if they dont know what nodejs is?
@thenumbersw
@thenumbersw 2 года назад
very nice..
@anthonyinit
@anthonyinit 4 года назад
i get error [03:39:35] Using gulpfile ~/Desktop/123/gulpfile.js [03:39:35] Starting 'css'... [03:39:35] The following tasks did not complete: css [03:39:35] Did you forget to signal async completion?
@juliandavidvidalgonzalez4536
@juliandavidvidalgonzalez4536 4 года назад
I get the same error! could you fix it?
@anthonyinit
@anthonyinit 4 года назад
@@juliandavidvidalgonzalez4536 gulp.task('default', gulp.series(function(done) { // task code here done(); }));
@sm.1860
@sm.1860 3 года назад
@@anthonyinit thanks bro
@anthonyinit
@anthonyinit 3 года назад
@@sm.1860 welcome bro
@disrael2101
@disrael2101 2 года назад
@@anthonyinit how he just writes gulp in CMD and it knows which file to look for? Does it require to call it gulpfile.js? Also in your solution you've wrote callback what it does , why it's necessary?
@pandu9933
@pandu9933 3 года назад
Why did you not metnion anything about JS in Gulp??
@user-ur4qo4ux1s
@user-ur4qo4ux1s 4 месяца назад
cool video)
@deepjyotibaishya7576
@deepjyotibaishya7576 4 года назад
for gulp v4 2020 .. How to use them
@CarlosWashingtonMercado
@CarlosWashingtonMercado 3 года назад
This video needs a playlist or index.
@leewoodlee557
@leewoodlee557 Год назад
GULP GULP GULP GULP😍😍😍
@PepeTostado
@PepeTostado 4 года назад
what is sass
@paolo-1283
@paolo-1283 5 лет назад
This will return an error with gulp 4 where gulp.series and gulp.parallel is the new approach.
@davehall6001
@davehall6001 2 года назад
coding needs to be updated to Gulp 4.0. Otherwise, thanks for the nice tutorial.
@dmmm876
@dmmm876 5 лет назад
Good tutorial. What VS Code theme are you using?
@inambe3987
@inambe3987 5 лет назад
github.com/wesbos/cobalt2-vscode
@inambe3987
@inambe3987 5 лет назад
I think it's cobalt2 by wesbos.
@UliTroyo
@UliTroyo 5 лет назад
Wes Bos is the man.
@julianhecker944
@julianhecker944 5 лет назад
Syntax changed for Gulp 4.0
@PhilipDenys
@PhilipDenys 5 лет назад
:p damnit stuck for 30mins
@abraaoazevedo5077
@abraaoazevedo5077 5 лет назад
@@PhilipDenys 2, ha ha
@abraaoazevedo5077
@abraaoazevedo5077 5 лет назад
But It was a great introduction!
@gosnooky
@gosnooky 5 лет назад
You must really hate let, const and arrow functions...
@abraaoazevedo5077
@abraaoazevedo5077 5 лет назад
I think he teaches like this just because it's easier for the majority to understand
@moto_venom
@moto_venom 3 года назад
Where is livereload?
@dieterjaut1196
@dieterjaut1196 2 года назад
My Way + I Wanna Be Sedated - Nina Hagen & Snap Her live in New York 1995 - RU-vid
@jawad7506
@jawad7506 4 года назад
not helpful, you are not explaining the concept . what is gulp? why is it used? what is it used for? you are showing us how to implement but to understand that we need to understand what we are actually doing in the big picture. What is sass? why 3 files? why convert them? additionally this is outdated, old syntax, which makes it even more confusing. but thank you for guiding us through the implementation
@ModerateDev
@ModerateDev 5 лет назад
I'm having issues I wonder if you or anyone could help would be much appreciated? posted pics here >> stevengamedev.com/
@MrVisheshsingh
@MrVisheshsingh 5 лет назад
You probably are using gulp v4.X. If you want to follow the tutorial you may need to downgrade to gulp v3.9.1 by using npm i -D gulp@3.9.1. Hope it helps : )
@ModerateDev
@ModerateDev 5 лет назад
@@MrVisheshsingh Thanks you're right I was just had to change a few things for it to work with 4 all sorted now :)
@MrDievez
@MrDievez Месяц назад
sass --watch scss:css xD
@GeneralBlorp
@GeneralBlorp 3 года назад
"What's going on guys?" 🙄 Next!
@magegam1
@magegam1 4 года назад
Nice Stuff, Thank you for sharing.
@zaidalikhan2749
@zaidalikhan2749 11 месяцев назад
How can we do push these changes automatically to production? or Do I need to commit the css , min css and sass file changes (by gulp tasks ) as a separate commit?
@user-hz1hf5nt1s
@user-hz1hf5nt1s 5 месяцев назад
cool video)
@user-co1dw3lx7t
@user-co1dw3lx7t 6 месяцев назад
cool video)
Далее
Gulp JS Crash Course
33:41
Просмотров 178 тыс.
The Worlds Most Powerfull Batteries !
00:48
Просмотров 7 млн
Learn Sass In 20 Minutes | Sass Crash Course
19:42
Просмотров 923 тыс.
Gulp v4 - Sass and BrowserSync setup
29:29
Просмотров 90 тыс.
Node.js Tutorial for Beginners: Learn Node in 1 Hour
1:18:16
Stop using an extension to compile Sass
21:39
Просмотров 126 тыс.
Rust's Alien Data Types 👽 Box, Rc, Arc
11:54
Просмотров 132 тыс.
Learn Webpack - Full Tutorial for Beginners
1:53:01
Просмотров 378 тыс.
Learn CSS Animations In 20 Minutes - For Beginners
21:22
The Worlds Most Powerfull Batteries !
00:48
Просмотров 7 млн