🚨 NOTE: If you're getting an error "gulp-sass 5 does not have a default compiler; please set one yourself" you will need to update the line: const sass =require('gulp-sass'); to instead read: const sass = require('gulp-sass')(require('sass'));
fyi I had to go back and install(npm install sass) as in video the install was gulp-sass. After making the above change and your change to the gulpfile.js file all is good. Great work and you are view precise with your explanations. I think you do a better job than Kevin when it come to SASS. (nice work) I hope you keep doing more SASS video as your video are the best I seen on TH-cam.
Hello. Please help me, I have 3 folders in the scss folder, and they contain files + in the root of the scss folder, the style.scss file. The problem is that when I make changes in some files and click save or go to others, which also does automatic saving, then this saving does not happen (and there is no styles finished in the terminal, but when I go to the style.scss file and when I click save, the changes are applied. I don't know how to make the changes I made in *.scss apply when I click Save in this (any) specific file function styles() { return src('app/scss/style.scss') .pipe( autoprefixer({ overrideBrowserslist: ['last 10 version'], grid: true, }), ) .pipe(concat('style.min.css')) .pipe(scss({ outputStyle: 'compressed' })) .pipe(dest('app/css')) .pipe(browserSync.stream()) } function watching() { browserSync.init({ server: { baseDir: 'app/' } }); // watch(['app/scss/style.scss'], styles); watch(['app/scss/**/*.scss'], styles); watch(['app/images/src'], images); watch(['app/js/main.js'], scripts); // watch(['app/components/*', 'app/pages/*'], pages); watch(['app/*.html']).on('change', browserSync.reload); }
I am impressed with your accuracy and order in your code.I have learned a lot from You! I am glad to discover your channel Jessica !I can't wait for your live coding ! Could you do something more difficult ?? More Vanilla JS?More complicated Website ? Best regards from Europe...;) You are doing a great job Jessica!!!
After 3 months later on u again back. Nice to see again I'm excited about yours cool projects. Please carry on those cool projects so excited to watch out.
Thanks alot, I now exploring scss and I get tutorial how crate library from The Net Ninja, and I had any problem with the gulp, and more understanding this program. So thanks alot for you time. Devinitely I will use that and learning from you to :) Tcheers Tom
Wow, thanks a lot. This has really helped me. I had the same problem and i tried making a scaffold cli tool with python😅😅. It sucked mehn. I didn't know using Javascript to make such a tool was this easy
Hey I tried this one and it works perfeclty until I did try to use the type="module" in my HTML and used the import in my js file but the gulp was converting it to require() function which throwing an error like "app.js? [sm]:1 Uncaught ReferenceError: require is not defined" I looked arround at google but it requires me using webpack instead which has a lot of configuration. how to be able to fix this part?
Hi, I'm using your Gulpfile but it doesn't work for es6 modules and throws the error "ReferenceError: require is not defined". I think it is related to gulp-babel or something. Is there any way to use es6 modules with Gulp?
Hey first of all thanks for this tutorial its awesome, works perfectly, I have a question though, I wonder why scss @use not working I tried it several times but it won't work at all. what do you think about this?
Hello, thanks for this video but what's the difference between Gulp and the sass watch command + the Go Live extension of vs code ? Sorry for my very poor English ^^
when we install all those packages and plugins, isnt it necessary to add - - save-dev before their neame just like you did in your prevoious Gulp course in 2019?
Very good Tutorial. But it seems to me that gulp/browsersync will not work with node 16.15.1 and npm 8.13.1. SASS should be adapted but the watcher will not work in my environmentin Win10/wsl2.
Hi there! Thanks for your video. I started to learn HTML and CSS a month ago and try to move on to javascript but before I start I found out there is something call SCSS and I've stuck for 1week already...LOL there are so many terms pop up like npm, gulp, parcel... thanks to your video I started having some concept now....roughly... I have some question...hope you see my comment and help me out - Q: I tried to follow your video to install gulp but it said urix and resolve-url deprecated and no node_modules folder appear, what should I do? - Q: What's the difference between using npm installing gulp to use sass and just using VS code live sass comilper of any other parcel? Is it affect how I write code? Once again, thanks! *P.S. sorry for my poor english
Hello! When I try to install the npm packages they find 7 critical errors... how can I fix them? Pleeease! Love your videos, you really help a lot, thank you so much!
Sorry if this is a dumb question, but I currently use Live Server through Visual Studio Code. Why would I go through all this effort to utilize browsersync when I can just use the Live Server extension? Thanks :)
I have problem running that, but its ok :)' Pls can you for future explain Us every detail why and what u doing? like .pipe( )? ets? Its not only watch tutorial and copirate it and put, and that it. I would understand the point , what you doing. Thanks and sorry for my english.
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
🚨 NOTE: If you're getting an error "gulp-sass 5 does not have a default compiler; please set one yourself" you will need to update the line:
const sass =require('gulp-sass'); to instead read: const sass = require('gulp-sass')(require('sass'));
Worked for me! Thanks Ms. Coder Coder
fyi I had to go back and install(npm install sass) as in video the install was gulp-sass. After making the above change and your change to the gulpfile.js file all is good. Great work and you are view precise with your explanations. I think you do a better job than Kevin when it come to SASS. (nice work) I hope you keep doing more SASS video as your video are the best I seen on TH-cam.
Hello. Please help me, I have 3 folders in the scss folder, and they contain files + in the root of the scss folder, the style.scss file. The problem is that when I make changes in some files and click save or go to others, which also does automatic saving, then this saving does not happen (and there is no styles finished in the terminal, but when I go to the style.scss file and when I click save, the changes are applied. I don't know how to make the changes I made in *.scss apply when I click Save in this (any) specific file
function styles() {
return src('app/scss/style.scss')
.pipe(
autoprefixer({
overrideBrowserslist: ['last 10 version'],
grid: true,
}),
)
.pipe(concat('style.min.css'))
.pipe(scss({ outputStyle: 'compressed' }))
.pipe(dest('app/css'))
.pipe(browserSync.stream())
}
function watching() {
browserSync.init({
server: {
baseDir: 'app/'
}
});
// watch(['app/scss/style.scss'], styles);
watch(['app/scss/**/*.scss'], styles);
watch(['app/images/src'], images);
watch(['app/js/main.js'], scripts);
// watch(['app/components/*', 'app/pages/*'], pages);
watch(['app/*.html']).on('change', browserSync.reload);
}
@@ob5804 Can you give an example of a specific file and the full path to that file, where saving the file doesn't re-compile your Sass files?
@@TheCoderCoder
app/scss/layouts/header.scss
app/scss/base/base.scss
app/scss/abstracts/vars.scss
Welcome back once again !
Loving the new Intro 😍
Well explained too 🙌🏻
we Miss u♥️
what happened to her is she OK?
She's back😃
Cheers🥂
You are one of the best web dev youtubers in the world!!! love ya.
I ran on some problem while installing gulp and this helped me so much. Thank you for this video!
Welcome back, love your content! Stay healthy and keep doing awesome work! Cheers 🍻
I am impressed with your accuracy and order in your code.I have learned a lot from You! I am glad to discover your channel Jessica !I can't wait for your live coding ! Could you do something more difficult ?? More Vanilla JS?More complicated Website ? Best regards from Europe...;) You are doing a great job Jessica!!!
What's the difference between this and using an extension like Live Server? I mean, besides the minifying of the CSS and JS files.
Such awesome content. Just discovered you about a week ago and I have been binge-watching! LOL Thank you!
Glad you're back!
Love your new opening! ❤️
Thank you for this video, been hoping for this for awhile. Missed your videos.
Just want to say thanks and your videos really are very good. Clear, concise and super helpful.
After 3 months later on u again back. Nice to see again I'm excited about yours cool projects. Please carry on those cool projects so excited to watch out.
This was super helpful in getting my projects updated to the new version of gulp. Thank you!
can u make a e-commerce website front and back end
Finally come back....super :)
yoo, missed your videos, welcome back
i missed you so much :(
glad to see new awesome video
Thanks alot, I now exploring scss and I get tutorial how crate library from The Net Ninja, and I had any problem with the gulp, and more understanding this program. So thanks alot for you time. Devinitely I will use that and learning from you to :)
Tcheers Tom
I’m pretty noob when it comes to coding, so I *might* have focused a little too much on how comfy your hoodie looks.
I learnt lot from u Mam heartily❤️❤️ thanks to you
Thank you for putting me on Gulp and BrowserSync! Definitely going to test it out on my future projects.
Glad you are back😍
Amazing! still useful in 2023. can you make video on Gulp, Pug, BrowserSync, and Sass
I am extremely grateful to you Jessica for this Gulp Tutorial. Thank you very much !!!
God Bless you :)
And you saved my life again
She's back
You are my saviour!
Wow, thanks a lot. This has really helped me. I had the same problem and i tried making a scaffold cli tool with python😅😅. It sucked mehn. I didn't know using Javascript to make such a tool was this easy
After a long time and as always very nice and informative lesson..!😊😊
I tried that it didn't work but for some reason it worked with your method, thanks :)
You saved my day my dear. Only thanks not enough for appreciate you. Happy Coding!!! :)
Thank you for your content 😍
Loved ur tuts so much.
Love from india🇮🇳
sis your video editing skill is great..
it would be great if you post a series about video editing
Not sure if she is better programmer or video editor
Why does npm install gulp-cli -g with LTS node v14.15.4 throw a warning message about deprecated resolve-url and urix?
Hello from Ukraine.
Thank you for this guide.
🇺🇦❤️
Thanks! I was one of those who requested this. That account that got suspended, though. This is my backup.
Great content, thanks so much for sharing it with us!
You are the best👌
Thanks a lot for this Tutorial.
It's a pleasure to listen and follow your explanation.
Thumps up 👍 and many greetings
You're amazing, helped a lot, thank youuuuu 🙏🙏💗💗⭐⭐
Thank you!
I came here for the new intro 🍿
haha thank you!
Welcome back 🤗
Task never defined: default
[11:09:50] To list available tasks, try running: gulp --tasks
We love you
Hey I tried this one and it works perfeclty until I did try to use the type="module" in my HTML and used the import in my js file but the gulp was converting it to require() function which throwing an error like "app.js? [sm]:1 Uncaught ReferenceError: require is not defined" I looked arround at google but it requires me using webpack instead which has a lot of configuration. how to be able to fix this part?
Hey! can you make a video about the CSS crash course?
How do I make this work with php files?
Very Clean i like that about u keep it up
Thank you
Hallo, how to multipage indexed in index.html because i build gulp successed but all page in index.html not render. Please help me
I dont know where i did wrong but my browsersync doesnt automatically reload. whyy?
Thanks!!!!
Hi, I'm using your Gulpfile but it doesn't work for es6 modules and throws the error "ReferenceError: require is not defined". I think it is related to gulp-babel or something. Is there any way to use es6 modules with Gulp?
Hey first of all thanks for this tutorial its awesome, works perfectly, I have a question though, I wonder why scss @use not working I tried it several times but it won't work at all. what do you think about this?
thank you so much, it help me alot
Hello, thanks for this video but what's the difference between Gulp and the sass watch command + the Go Live extension of vs code ? Sorry for my very poor English ^^
Thank you!!!
when we install all those packages and plugins, isnt it necessary to add - - save-dev before their neame just like you did in your prevoious Gulp course in 2019?
you actually don't have to use save-dev anymore, because npm will now by default save packages to your dependencies
Great content thank tou
I tried reading a lot of documentation and I still couldn't make it work.
After this 15 min video I did it... first try. Thank you 😊
this vid has a lofi vibe to it, music volume just right. I get annoyed when the music is way too loud and cant hear the talking. Nicely balanced.
Very good Tutorial. But it seems to me that gulp/browsersync will not work with node 16.15.1 and npm 8.13.1. SASS should be adapted but the watcher will not work in my environmentin Win10/wsl2.
Will you still need to use browser-sync if you already use vscode`s liveserver?
Thanks:)
Hi there! Thanks for your video.
I started to learn HTML and CSS a month ago and try to move on to javascript but before I start I found out there is something call SCSS and I've stuck for 1week already...LOL
there are so many terms pop up like npm, gulp, parcel... thanks to your video I started having some concept now....roughly...
I have some question...hope you see my comment and help me out
- Q: I tried to follow your video to install gulp but it said urix and resolve-url deprecated and no node_modules folder appear, what should I do?
- Q: What's the difference between using npm installing gulp to use sass and just using VS code live sass comilper of any other parcel? Is it affect how I write code?
Once again, thanks!
*P.S. sorry for my poor english
Nice video ,quality is awesome!,could you share the vsCode theme?
Which theme you will use it. Really i loved it so much this theme. Please anyone gave the name of the theme.
setting up font-awesome in gulp?
Hello! When I try to install the npm packages they find 7 critical errors... how can I fix them? Pleeease! Love your videos, you really help a lot, thank you so much!
anyone having issues when installing the sass packages in the project file: 11 high severity vulnerabilities 7high 4 critical...should this worry me?
thx!
thank u
Whats the difference between live server extension of Vs Code and browser sync??
can we do the same thing with "go live " extension in vs vs code?
What is the deal with sourcemaps, why use them in sass?
Sorry if this is a dumb question, but I currently use Live Server through Visual Studio Code. Why would I go through all this effort to utilize browsersync when I can just use the Live Server extension? Thanks :)
Exactly what i thought
Umm! Long time no see! 👀
Isn't there a live server plugin in vs code?
Can someone explain to me what's the difference between Browsersync and Live server extension?
Seem to accomplish similar thing 😅
For some reason browser sync only works for like 1 minute, then it just stuck on reloading but never does. great video though!
Is browsersync an alternative to live share?
13:21 i typed glup but it didn't work. i downloaded your gulp-browsersync-main file and run exactly same as yours but i didn't work tho.
A new video!!!!
live server extention is same??
I have problem running that, but its ok :)'
Pls can you for future explain Us every detail why and what u doing? like .pipe( )? ets? Its not only watch tutorial and copirate it and put, and that it. I would understand the point , what you doing. Thanks and sorry for my english.
Does anyone know how to get the browser to inject the css on scss change, rather than reloading the page?
In the gulpfile I added .pipe(browsersync.stream()); to the bottom of the scssTask function and removed browsersyncReload from the scss watchTask.
Can you able to share your vs code settings.json???
Why doesn't this tutorial work with node 14.15.4 LTS version
Because of different node versions! Figured this one out. @CoderCoder which gulp-cli version did you use for this tutorial?
Please make also a tutorial how to import bootstrap 5 in gulp. Thank you!
Laravel-mix can be handy as well
can't do partials
Estas herramientas son consideradas viejas confiables
Could you maybe do a tutorial on next.js? Especially next.js + sass :-)
👍👍👍👍👍
Great Video! Isn't This Live Server's Source Code? 😂😂😂
Hahaha maybe? It does pretty much the same thing 😂
@@TheCoderCoder 😂😂😂
i have a question i how do you install emmet
Emmet comes built-in in current versions of VSCode.