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