I thought this would help clear up these common tools for people as they are part of almost every project, private or professional. Have a great day and thank you so much for watching!
Thanks for this cool video. Some months ago I actually took my first steps into webpack by bundling JS files and Bootstrap's SCSS. I'm actually fairly new to JS and am considering picking it up (or TS) for React purposes. I have made some JS/React attempts throughout the years but the ecosystem was confusing, I'm sure your video would have helped if I saw it.
Hi Fredrik, This was an awesome video. It really helped me with understanding the differences and the purposes of each tool. Thank you. By any chance will you be sharing this example on github for students to use as a reference.
No worries m8 glad to hear that you enjoyed it. Here is the code: github.com/fChristenson/grunt-gulp-webpack-npm Have a great day and thank you so much for watching!
Let's say I have an application that needs to be linted with ESLint, tested with Jest, and compiled from TypeScript to JavaScript. Then I need to transpile all my sass and scss files into plain css. After that I need to build all of the JavaScript into a single bundle file with source maps, and have the whole thing minified. Should I stick with just Webpack or use Gulp with it? My current Webpack setup is working just fine, but it's a hassle to keep up with all of the processes that need to be done before my code is production ready. I'm interested in hearing what you think!
My rule of thumb is that if you have multiple environments where your tasks need to execute Gulp is a great way to do that but if you are just working on your own computer there is no need for it and you can just use Npm scripts. The way I set this up is to have Eslint, Jest and Sass as cli commands and then Webpack will handle the TypeScript compilation and bundling. The reason for this is that by splitting out these tasks you can run them independently of each other, this is great for performance reasons and gives you a lot of flexibility when you need a CI pipeline where you may want to lint code first and break if there is something wrong without needing to bundle as well. If you want to run everything together you simply create a build command that runs everything in a sequence or you can even run thing in parallel if you want. Have a great day and thank you so much for watching!
Yes however gulp and grunt does not require you to bundle a JavaScript file to work which is what webpack does. Think of Gulp and Grunt as tools that are more general and Webpack can do a lot of the same things but it was designed to do that as part of bundling JavaScript files. If you want to just copy a file Gulp and Grunt will let you do that but if you want to do it with Webpack you have to do it as part of bundling a JavaScript file and sometimes you just want to copy a file without the bundling. Have a great day and thank you so much for watching!
I am guessing that there is a typo here and that you want the repo m8. github.com/fChristenson/grunt-gulp-webpack-npm Have a great day and thank you so much for watching!
Going back to it, so, when working on a personal project, be it a game with JavaScript using JSON as the data and localstorage (learning purposes), would webpack be more suitable? I'm using gulp for this, as I though it'll save some I guess mess ro whatver be it faster with gulp. Though it seems I should use webpack? Still a bit hard to understand when to use what now that I came back to it, bit confused now considering that evertyhing is in JS. But, considering the app is mainly in front-end and php, and has little JS, gulp would be fine right. I'm working on a project right now that doesn't has that much JS, it's loaded with HTML/Sass and PHP, and uses JSON and it sort of re-invents the wheel with some of the JS functionality. They use gulp, but want to switch to webpack... and I[m thinking this isn't the best option, plus gulp already works and it's end of the project either way. Though considering this isn't a JS app, it seems gulp would be better than webpack anyway. Right now I'm creating a small MVC like app with JSON, using gulp. Should I use webpack? ANd if I want to make a game where you have users and a lot of data and a lot of JS, webpack? You know game "The Settlers" something like that in JS. I'm starting small though.
If you are loading more than 1 JavaScript file as part of your application Webpack is going to be useful but you have to weigh the benefit against the cost. For professional projects you usually end up with quite a few JavaScript files and it is a lot easier to structure your project if you can use Webpack to import the different files and then have Webpack produce the bundle file than if you yourself either add all those scripts to your html (in the correct order) or concat them all to one file (again, in the right order). Some people will hype http2 as being the solution to this problem and it is true that http2 will produce a solution but at this point very few projects leverages http2 and it is imo way to early stage to switch from bundling. Have a great day and thank you so much for watching!
Well, I'll stick with webpack! :D The website had more than one JS file, like 10, but those files were pretty small, it wasn't a font-end app, but more likely a back-end app. The fornt-end was for stuff like google maps api, creating a modal, creating a faq, which I don't thikn we need webpack for this, but considering webpack is for front-end, perhaps that's the right thing to do. I guess, webpack is better for most usage, unelss you're building a front-end framework, but even then, if you do, it will have a js files, unless it's mainly HTML/CSS Architecture concept based : p Alright, webpack for everything! xd
The only primer I could find on what these tools are all about and when to use them.
So clear and straight forward video ... So much thanks
Highly recommended to watch
Nice video, i had few doubts but got cleared after reading comments
Thanks for nice explanation
Grunt and Gulp aside from minification can indeed bundle too. I've been bundeling with grunt for ages.
Simple and clean explanation :)
That's a useful video! :)
Well, meaning the topic :) Because I had this discussion plenty of time here and there etc... so this her is a good one :D
I thought this would help clear up these common tools for people as they are part of almost every project, private or professional.
Have a great day and thank you so much for watching!
Thanks for this cool video. Some months ago I actually took my first steps into webpack by bundling JS files and Bootstrap's SCSS. I'm actually fairly new to JS and am considering picking it up (or TS) for React purposes. I have made some JS/React attempts throughout the years but the ecosystem was confusing, I'm sure your video would have helped if I saw it.
Hi Fredrik,
This was an awesome video. It really helped me with understanding the differences and the purposes of each tool. Thank you.
By any chance will you be sharing this example on github for students to use as a reference.
No worries m8 glad to hear that you enjoyed it.
Here is the code:
github.com/fChristenson/grunt-gulp-webpack-npm
Have a great day and thank you so much for watching!
Thanks a lot, Fredrik.
Great video, thanks :) . Is it possible to get the source code you used in order take a closer look?
Well explained. Thanks.
Let's say I have an application that needs to be linted with ESLint, tested with Jest, and compiled from TypeScript to JavaScript. Then I need to transpile all my sass and scss files into plain css. After that I need to build all of the JavaScript into a single bundle file with source maps, and have the whole thing minified. Should I stick with just Webpack or use Gulp with it? My current Webpack setup is working just fine, but it's a hassle to keep up with all of the processes that need to be done before my code is production ready. I'm interested in hearing what you think!
My rule of thumb is that if you have multiple environments where your tasks need to execute Gulp is a great way to do that but if you are just working on your own computer there is no need for it and you can just use Npm scripts.
The way I set this up is to have Eslint, Jest and Sass as cli commands and then Webpack will handle the TypeScript compilation and bundling.
The reason for this is that by splitting out these tasks you can run them independently of each other, this is great for performance reasons and gives you a lot of flexibility when you need a CI pipeline where you may want to lint code first and break if there is something wrong without needing to bundle as well.
If you want to run everything together you simply create a build command that runs everything in a sequence or you can even run thing in parallel if you want.
Have a great day and thank you so much for watching!
amazing video mate
nice explanation of why use g&g&webpack
Just awesome. Very nice.
Glad you enjoyed the video m8.
Have a great day and thank you so much for watching!
P H E - N O M - E - N A L .... thank you bro.
Good explanation
Thank you so much sir that was very good
What is a bem script? First time hearing it.
so webpack is able to do everything that gulp and grunt can do but gulp&grunt can't do everything webpack can do?
Yes however gulp and grunt does not require you to bundle a JavaScript file to work which is what webpack does.
Think of Gulp and Grunt as tools that are more general and Webpack can do a lot of the same things but it was designed to do that as part of bundling JavaScript files.
If you want to just copy a file Gulp and Grunt will let you do that but if you want to do it with Webpack you have to do it as part of bundling a JavaScript file and sometimes you just want to copy a file without the bundling.
Have a great day and thank you so much for watching!
That onClick Slack sound is scary
Thanks! for the video, what's the name of the video?
I am guessing that there is a typo here and that you want the repo m8.
github.com/fChristenson/grunt-gulp-webpack-npm
Have a great day and thank you so much for watching!
@@FredrikChristenson thank you man. you should put the link in description, so people can find it easely
Gulp has NPM package extensions that add bundling capabilities - in a way - to it. www.npmjs.com/package/gulp-concat
how to get terminal skin like you !?
This should help:
th-cam.com/play/PLBAZWBMYeVYi_ef87tmhfY4DCiiq31r8H.html
Have a great day and thank you so much for watching!
Going back to it, so, when working on a personal project, be it a game with JavaScript using JSON as the data and localstorage (learning purposes), would webpack be more suitable? I'm using gulp for this, as I though it'll save some I guess mess ro whatver be it faster with gulp.
Though it seems I should use webpack?
Still a bit hard to understand when to use what now that I came back to it, bit confused now considering that evertyhing is in JS.
But, considering the app is mainly in front-end and php, and has little JS, gulp would be fine right.
I'm working on a project right now that doesn't has that much JS, it's loaded with HTML/Sass and PHP, and uses JSON and it sort of re-invents the wheel with some of the JS functionality. They use gulp, but want to switch to webpack... and I[m thinking this isn't the best option, plus gulp already works and it's end of the project either way. Though considering this isn't a JS app, it seems gulp would be better than webpack anyway.
Right now I'm creating a small MVC like app with JSON, using gulp. Should I use webpack?
ANd if I want to make a game where you have users and a lot of data and a lot of JS, webpack? You know game "The Settlers" something like that in JS. I'm starting small though.
If you are loading more than 1 JavaScript file as part of your application Webpack is going to be useful but you have to weigh the benefit against the cost.
For professional projects you usually end up with quite a few JavaScript files and it is a lot easier to structure your project if you can use Webpack to import the different files and then have Webpack produce the bundle file than if you yourself either add all those scripts to your html (in the correct order) or concat them all to one file (again, in the right order).
Some people will hype http2 as being the solution to this problem and it is true that http2 will produce a solution but at this point very few projects leverages http2 and it is imo way to early stage to switch from bundling.
Have a great day and thank you so much for watching!
Well, I'll stick with webpack! :D The website had more than one JS file, like 10, but those files were pretty small, it wasn't a font-end app, but more likely a back-end app. The fornt-end was for stuff like google maps api, creating a modal, creating a faq, which I don't thikn we need webpack for this, but considering webpack is for front-end, perhaps that's the right thing to do. I guess, webpack is better for most usage, unelss you're building a front-end framework, but even then, if you do, it will have a js files, unless it's mainly HTML/CSS Architecture concept based : p
Alright, webpack for everything! xd
video made on Friday 13, has 513 likes and 13 dislikes.