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'))
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
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.
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
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
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?
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.
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?
@@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?
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'))
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?
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 : )
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
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
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.
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.
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
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'))
Thanks, man
GULP COMMAND NOT FOUND???
Just copy and paste the command in gitbash " npm install --global gulp-cli "
END OF PROBLEM
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
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.
I totally agree with you
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
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
I got the same error, anyway to fix it?
yup same error because its too old
@@juliandavidvidalgonzalez4536 make that function async, it works for me
gulp.task('css', function () {
return gulp.src('./css/*.css')
// this line, write return
.pipe(uglifycss({
"uglyComments": true
}))
just write : return
GULP GULP GULP GULP😍😍😍
You must really hate let, const and arrow functions...
I think he teaches like this just because it's easier for the majority to understand
gulp.task('default', gulp.series('server', 'watch')); after that i get AssertionError [ERR_ASSERTION]: Task function must be specified
Yes! Gulp 4.x requires this!
Use exports.default = gulp.series(server, watch);
// server and watch must be functions not gulp.task things.
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?
My Way + I Wanna Be Sedated - Nina Hagen & Snap Her live in New York 1995 - RUclips
Syntax changed for Gulp 4.0
:p damnit stuck for 30mins
@@PhilipDenys 2, ha ha
But It was a great introduction!
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.
This tutorial is great !! Thank you so much. I totally understand what gulp is. Again thank you.
💁♂️ "npm init --y" instead of hitting enter several times. It will enter the default values for you without prompting to change it.
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?
I get the same error! could you fix it?
@@juliandavidvidalgonzalez4536 gulp.task('default', gulp.series(function(done) {
// task code here
done();
}));
@@anthonyinit thanks bro
@@sm.1860 welcome bro
@@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?
So amazing to have a brave creator here
Can you do the autoreload too 😊
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'))
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?
I'm having issues I wonder if you or anyone could help would be much appreciated? posted pics here >> stevengamedev.com/
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 : )
@@MrVisheshsingh Thanks you're right I was just had to change a few things for it to work with 4 all sorted now :)
Thank you, brother.
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
I don't use any abstraction layer. Npm scripts + CLI tools = better.
Where is livereload?
sass --watch scss:css xD
Great tutorial,thank you very much!
Everything was fine, but there was a problem when I was writing gulp ('gulp' is not recognised)...why?
coding needs to be updated to Gulp 4.0. Otherwise, thanks for the nice tutorial.
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
Thanks, man ! I am happy that Ive opened Gulp for myself. Its like to go to a new level of web- developing xD
very nice..
what wpuld happen if did not put return gulp, and instead i put just gulp.src('')
Is there any reason why someone would pick Gulp over Webpack? Seems like Webpack is all you need to know.
cool video)
cool video)
cool video)
9:30 wouldn't **/*.sass be the same as *.sass ? (plus recurse into any other folders)
Why did you not metnion anything about JS in Gulp??
how can ilearn to code sass or is it not necessary, where should i look for a file .sass
Perfect Explanation, thanks !
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?
This will return an error with gulp 4 where gulp.series and gulp.parallel is the new approach.
Thank you so much. It's so useful for beginners like me. 🙂
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.
Oh, interesting. Yeah, I've tried parcel but webpack seems powerful and more understandable.
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.
Thanks Rand0m TV for clear explanation, I get it :)
is npm as popular as webpack?
Are you serious ? npm is a popular package manager and webpack is a popular asset bundler.
Thanks for the video. Really great demonstration and explanation
Excellent tutorial for beginners and who is new in sass
Only thanks not enough, wish you good luck.
for gulp v4 2020 .. How to use them
wich one is easier for a noob, gulp or webpack?
clear instructions and nice tutorial Good Job
Nice Stuff, Thank you for sharing.
This video needs a playlist or index.
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
Just as a suggestion, there is a extension on VS Code editor that just works fine without so many configurations. So try it out.
what's it..!!
can you help me
Thank You.
Nice tutorial! Thank you guys for sharing this.
great tutorial ...Thanxx
Nice Stuff, Thank you for sharing.
thank you so much for your explication :)
So greaat man!! 👏💻
Thanks brother
Excellent introduction!
Excellent!
what is sass
thanks for the content!!
Thank you so much!
"What's going on guys?" 🙄 Next!
Good tutorial. What VS Code theme are you using?
github.com/wesbos/cobalt2-vscode
I think it's cobalt2 by wesbos.
Wes Bos is the man.