🚨 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 RUclips.
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); }
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 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.
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
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?
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?
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?
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, 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 ^^
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?
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 :)
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!
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.
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.
🚨 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 RUclips.
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 🙌🏻
I ran on some problem while installing gulp and this helped me so much. Thank you for this video!
You are one of the best web dev youtubers in the world!!! love ya.
She's back😃
Cheers🥂
we Miss u♥️
what happened to her is she OK?
Welcome back, love your content! Stay healthy and keep doing awesome work! Cheers 🍻
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
Such awesome content. Just discovered you about a week ago and I have been binge-watching! LOL Thank you!
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.
Glad you're back!
This was super helpful in getting my projects updated to the new version of gulp. Thank you!
Love your new opening! ❤️
Thank you for this video, been hoping for this for awhile. Missed your videos.
I tried that it didn't work but for some reason it worked with your method, thanks :)
She's back
Just want to say thanks and your videos really are very good. Clear, concise and super helpful.
Loved ur tuts so much.
Love from india🇮🇳
Finally come back....super :)
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
Glad you are back😍
yoo, missed your videos, welcome back
What's the difference between this and using an extension like Live Server? I mean, besides the minifying of the CSS and JS files.
I learnt lot from u Mam heartily❤️❤️ thanks to you
i missed you so much :(
glad to see new awesome video
Thank you for putting me on Gulp and BrowserSync! Definitely going to test it out on my future projects.
I am extremely grateful to you Jessica for this Gulp Tutorial. Thank you very much !!!
God Bless you :)
And you saved my life again
Thanks! I was one of those who requested this. That account that got suspended, though. This is my backup.
You are my saviour!
I came here for the new intro 🍿
haha thank you!
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
Amazing! still useful in 2023. can you make video on Gulp, Pug, BrowserSync, and Sass
You saved my day my dear. Only thanks not enough for appreciate you. Happy Coding!!! :)
Hello from Ukraine.
Thank you for this guide.
🇺🇦❤️
I’m pretty noob when it comes to coding, so I *might* have focused a little too much on how comfy your hoodie looks.
Welcome back 🤗
After a long time and as always very nice and informative lesson..!😊😊
Thank you for your content 😍
You are the best👌
Great content, thanks so much for sharing it with us!
Why does npm install gulp-cli -g with LTS node v14.15.4 throw a warning message about deprecated resolve-url and urix?
Thanks a lot for this Tutorial.
It's a pleasure to listen and follow your explanation.
Thumps up 👍 and many greetings
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
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.
can u make a e-commerce website front and back end
We love you
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?
You're amazing, helped a lot, thank youuuuu 🙏🙏💗💗⭐⭐
Very Clean i like that about u keep it up
How do I make this work with php files?
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?
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
setting up font-awesome in gulp?
Will you still need to use browser-sync if you already use vscode`s liveserver?
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 ^^
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?
Thank you!
Task never defined: default
[11:09:50] To list available tasks, try running: gulp --tasks
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
I dont know where i did wrong but my browsersync doesnt automatically reload. whyy?
Thank you
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
Hey! can you make a video about the CSS crash course?
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!
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.
Great content thank tou
thank you so much, it help me alot
Thanks!!!!
Is browsersync an alternative to live share?
Thanks:)
Nice video ,quality is awesome!,could you share the vsCode theme?
What is the deal with sourcemaps, why use them in sass?
Umm! Long time no see! 👀
Which theme you will use it. Really i loved it so much this theme. Please anyone gave the name of the theme.
Whats the difference between live server extension of Vs Code and browser sync??
thank u
Isn't there a live server plugin in vs code?
live server extention is same??
thx!
can we do the same thing with "go live " extension in vs vs code?
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.
anyone having issues when installing the sass packages in the project file: 11 high severity vulnerabilities 7high 4 critical...should this worry me?
A new video!!!!
Can you able to share your vs code settings.json???
👍👍👍👍👍
Can someone explain to me what's the difference between Browsersync and Live server extension?
Seem to accomplish similar thing 😅
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?
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.
For some reason browser sync only works for like 1 minute, then it just stuck on reloading but never does. great video though!
Estas herramientas son consideradas viejas confiables
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.
Could you maybe do a tutorial on next.js? Especially next.js + sass :-)
Please make also a tutorial how to import bootstrap 5 in gulp. Thank you!
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't do partials
Laravel-mix can be handy as well