Grunt, Gulp, Npm, Webpack and when to use what

okay guys so in this video I'm going to show you kind of the differences between grunt gulp webpack and ambient script so let's get into it so what we're gonna cover is basically I'm going to give you an explanation as to what is grunt what is gulp what is a web pack and and BAM script like why these tools are useful what they kind of do and when to use what so first and foremost let's let's just walk through my notes here so let's talk about task runners so grunt and gulp are what we in the industry call task runners now a task runner is just a tool that allows you to run common tasks for example let's say that you have a bunch of files you want to copy q1 from one directory to another that's a task that's a task if you will as something that you have to do when it usually is something that is kind of tedious to do manually I mean if I wanted to copy this file here index dot HTML to this file folder over here I am doing that manually every time I do a recompilation on my code that would be a lot of hassle involved in doing that so having a task runner that can automatically do that for me is something that is really desirable because then I can automate some of my work process so that is what a task Runner is all about so web packs is something that is what we call a bundler so a bundler the job that a bundler has is that it takes your JavaScript files and it allows you to write basically one file of JavaScript with some code and then another file of JavaScript with some other code and then you can tell the bundler that alright I want the first file to include the code from the second file so you can actually connect your files together and create much more complicated programs then you could back in the day when you had to basically make sure that everything was in the same file you have to make sure that one thing came before another and so forth and basically that's what web pack does for you it figures out how to put together all of your files into one file or a few files that you can then use in the browser without you having to see that out yourself so it's really efficient for large-scale JavaScript development and then we have NPM scripts now what is MBM scripts well NPM scripts is just a it's just a think of it as a command structure that NPM the package manager provides to you so you can run common scripts is you can basically just given name to a shell command that you want to be able to run over and over so basically what we're saying here is that we we have three different tools that all tie into this one common notion which is that you have some type of operation or some task you want to be able to run but you don't want to have to do with manually so that's the kind of the red line through all of this now the thing that you need to consider when we talk about these different tools rather than these are the things that I've found when I've been working with these tools for a few years is that they have their own use case and they have luckily enough varies each of them have a very strong use case for the thing that I think that they were good at so if we talk about a task runner now in generally task Runner is just an abstraction on top of another tool in other words it's just a wrapper around another tool so if we take the comparison between grunt and God versus webpack now grunt and gulp can do almost all the things that we want to be able to do but they cannot do the bundling because that's what web pack is designed to do web pack can bundle grunting God cannot bundle so grunting cob depend on web pack to do the bundling but they can take care of the file copying and all the this other stuff that comes kind of that lives around the actual bundling so what that means is that grunt and gulp now wraps web pack so under the hood you're going to use webpack through grunt and gulp so I hope that's clear you use grunt to run web pack that's basically how it works or gulp whichever you prefer so why would you want to do this well the considerations as I apply here that I use when I think about a task runner versus not using a task runner is that if I have a really large amount of complex tasks or I have a lot of co-workers that have different computers that you might you may I mean I work on a Mac but your co-workers may work on a Windows machine or they might work on something like you they always say that you have a CI pipeline or an environment that you run all your code through that is working that's using a Ubuntu distribution or a Debian distribution or Linux or whatever like that the thing that grunting gulp helps you with is that they abstract way the operating system all these shell specific commands that you have to use if you use something like NPM script because as I said in BAM script is just a way for you to create a name for a one Commander a series of commands we're going to look at that in just a moment just we just have to cover it kind of the terms and the top bicky's before we can go dive into the actual examples so that's what I think about well I use grunt and gulp usually when I work on a large-scale project and I have a lot of different tasks that I need to run on different environments but if I'm working as a single developer I prefer to use NPM scripts and the reason for that is because it's much more convenient for me to just use an mbm script and use the tool directly because one the thing that you should be aware of is that when you create a wrapper around the scene that you want to use the actual tool what you're doing is that you are now - you're creating an abstraction on top of another abstraction the tool is helping you do the thing that you want to do but the task Cronus's is just another layer on top of that and I've found often that sometimes you go well you have a problem you want to solve her you want to do something in a specific way and you could do it if you just used the underlying tool as is but since you're using our task runner on top of it you now have to figure out how to do within the context of the task runner because the task runner is just wrapping the actual tool so you'd have to be sure that the value of that extra layer is going to outweigh the potential risk to whatever it is that you want to do so a great example is actually taking webpack swatch function like webpack can watch the filesystem as is but if you use a task from like grunt and call you may find that you have to have to have to do some extra trickery to do the thing that you actually want to do or it may be flipped more flexible it kind of depends on the situation but that's a general notion so finally let's talk about bonding and web pack because web pack is such a powerful tool that it can actually do a lot of the things that you would have grunt gulp or NPM script do for you now the thing that you need to know here is that web packs primary function is to bundle JavaScript allow you to build really big JavaScript projects so what I find to be a bit of a problem enlargers projects is that people use webpack for more things they use all these different plugins to do everything from image optimization to copying files to doing all these sorts of things right that has nothing to do with the actual bundling and what the end results is is that when you actually work because bundling javascript is something you do all the time and it's something that will especially if you're using something like react where you want to run a bunch of loaders and stuff of that nature you will find that that process is going to get slower and slower and slower the more plugins and the more tasks webpack gets responsible for executing the slower it's gonna be so that's a bit of a way of it sometimes the right thing to do because there are certain tasks you want to run SSO des associated with the bundling and sometimes you don't but let's let's let's just give you an example of how all this looks so here is my simple little web server which is to basically just an Express server that serves up a static file which is the file you find here which is this little file here you see that there's just an h1 tag called foo and then I have my public directory where I have my application which is this super trivial little application that just calls requires a module called foo and then calls the function in foo and Lords that out and this is basically the entire application now through this application I have created a scenario where we are going to need as it is stands right now - BTUs both a task runner and a bundler so let's just walk through how to be able how to do that so if I run NPM start so using a bamboo start I can now run a command called start so now I've executed some cold and what's gonna happen now is that if i refresh my page here is my application and if we open the tab here you see this is my entire trivial little application now if we look at my package JSON file here so what I've done well in my package JSON file I have declared that my command start my script start is going to run the command MPX nordmann's survey yes and node 1 is just a tool that allows me to watch the filesystem so if I change something about server doc yes here or I've shamed something about this specific file if I say that or anything or I think you see now that the server is now restarting so what no daman is doing for me it's watching that file and anything that is associated with that file and updating it or restarting my server over and over when I'm and this is very useful for me when I work then I have this little thing here which is called pre start now pre-start is just me saying that it's the same command start but with cream front of it so what I'm saying here is that hey whenever I run this command run that command first so if we go up in my little my little outline here you see that I actually have actually I ran NPM start and then NPM run bill ran before it and then it executed all this other stuff right so basically what I'm saying here is that all right when I run this command run this command first and in this command I declared that I want to do NPM run build which is this command which means that all right I want to run basically webpack I just want to run web pack and bundle my JavaScript before I start the server and that's that's all there is to it now if we have a look at my web pack configuration here it's basically yes it's it's a very see it's a fairly like this is like the smallest web pack configuration I can show you without getting too much into exactly how webpack works because that's another video because it's a quite big tool but basically what I've said here is that alright my empty file is this file over here and the output file is going to be put in the distant directories which is here and I'm gonna call that bundle yeah yes and this is this is a very very small impact bundle yes file which is the thing that I'm gonna send to the client and if we go through here we see that we actually have a lot of gibberish and mean code and so forth but this actually is the end result in code that we then sent to our user that shows our application and logout that little message and I also have this index.html file here now the reason why I have it in like if you if you were paying attention you should notice that there's a script tag here which isn't in the original file it's an almost the same file but with a script ID and the reason why I want that that's happening is because I'm using the HTML web pack plug-in now this is what I was saying earlier like this is a strong use case for a for a web pack plug-in because what I want is to avoid having to I want to be able to have this static file and I want to be able to inject in the script tag that references my bundle case file that I'm creating and I want to be able to do that without having to do it manually so I can use this plug-in to basically say that hey this is my output file I want you to put that there and this is my template file just grab this file here and inject the script tag here and then copy it over here that's all it is there is to it now that and that's basically the whole build flow now this is one way of doing this so what web pack is as we say just to reiterate NPM the NPM script is just a way for me to abstract a way to create these short commands to run more complicated commands or use the two of the underlining like use webpack for example so I don't have to type out web pack or my pack watch and all that good stuff but at the end of the day this is the same thing as if I were to go and do this in my shell NPM ax web pack if it's the exact same thing it's a it's just a layer on top of it however if we now look at say gulp now what does this mean well gulp is a task runner so what I like to do here is that I create a folder that is called tasks and we can actually look at these gulp files so let's start by looking at the gulp start so what is gulp start well this is just me declaring a task for God so I'm saying that all right I want God to have a command called start and before I run that I want to run the command build so what is build them well go build is this command over here so I've declared build and I give that a callback and then I depend on webpack and I say because web I can last in require web pack a say as a function and then I grab my configuration file which is this configuration file down here and I give it a callback so that we know when the task is actually finished running and I have a watcher here as well for the same sort of this sort of thing right so what now happens is that when I run start or gulp start if I do this and then go like that we will see the exact same behavior basically what's happening now is that my task runner is running the build task and then it's running the start test and the start task is depending on gulp node Mon which is a wrapper on top of node mom so now I have the same behavior like I can refresh this and it's the exact same thing because the task runner has done all the same things as I did with my npm script pretty cool now this is just gulps way of doing this but Grunk takes a slightly different approach where you do something like this where you declare a wave a city of function and you do grunt in a configuration where you now have different types of packages where you provide configuration objects and then you'd register your NPM tasks so I have a rapper called crumped node mom and there's a wrapper for web pack so in this scenario I'm not using webpack directory i'm using a wrapper and then i can register my tasks and I say ok I have a task that is called start and I want the tasks build to be run first and then I won't know long to be wrong after that and here's my my build step which is just going to contain a single step or as a configuration called web packet eval this will make sense in just a moment and then I have one for The Watcher as well so let's look at how grunt does this so grant has a task called or I have a configuration which is called node Mon which all it takes is it's just an object with a namespace basically saying that okay so this is the configuration that is as specified by my my grunt wrapper and all I do is that I declare the server the server file which you know I won't know mom to look at you can make much more sophisticated configurations and there's plenty of documentation for this wrapper but this is the bare bone basics and then we have the grunt web track configuration which is just going to take you'll require as sculpted my configuration file which is this file down here and then I have declared two tasks I have one for dev and one for watch and the thing here is that I want to just grab the configuration file and then I want to set the watch property either to true or false because if I run dev I just want to compile my own my assets or I won't just want to want run web pack but I don't want to run it in watch mode so he watches the file system so if I now do grunt start and it's going to spin up and it's going to start we will see once again that it's the exact same day it's the same behavior so basically grunt and gawk and NPM script with these setups are doing the same sorts of things now you may wonder why am i requiring these two here but that's basically because the convention or rather the way that the gulp works is that you have a gulp file which acts as the empty point this is where gulp the command-line interface will look for your commands and since I don't want to declare on my commands in the same file I just do it i just require them in the gulf file instead of having that i could just put all of this code inside of this file instead just like with grunt but i try to avoid that because if i'm already using a task runner odds are that i'm gonna have more than a few commands because if I just had a few commands and they're not that complicated I would prefer using in BEM scripts because it seemed it it's much simpler so to summarize basically or the way that you should think about grunt gulp web packing and BAM script is that grumping golf are amazing tools well you can use if you have a fairly large project where where you may have different people working on different computers different operating systems and you don't want to use anything that is in environmentally specific but you should also know that it is an abstraction on top of the tools that you are actually using so it it increases yours your surface or errors a little bit however if you want to keep things simple and you're just a single developer working on your own laptop or your own workstation using NPM scripts is perfectly fine there's nothing that grant and golf really does for you that you can't do for NPM scripts unless you have as I said this need to do much more complicated things or do things on different platforms in general and web pack is simply a bundler web pack is responsible for bundling javascript into something that you can send to that into the client or to the to the browser however it can do more things than that as well as we saw it actually copied the HTML file in this scenario but you should be very careful when using too many plugins because you don't want to treat web pack as a task runner because that's just going to slow down the read level the it-it's going to make web pack take longer for everything that you want to be able to do so the sweet spot in my personal experience is to figure out alright what are the things that I can have web pack do because these are the things that I want to be happen every single time that I'm bundling my JavaScript and anything that is not critical to happen every time I read bundle my dog if I want to kind of just allow mbm script or have some other setup with gulp or grunt that does that for me so I can form so I can deal o do some of the work from web pack hopefully this was enlightening to you and have a great day

Channel: Fredrik Christenson

Views: 18,496

Rating: 4.901566 out of 5

Keywords: software, software development, programming, coder, programmer, dev, develop, developer, engineer, software engineer, code, coding, development, Grunt, Gulp, Npm, Webpack and when to use what

Id: Mn6aj4kY-j8

Length: 19min 55sec (1195 seconds)

Published: Sat Sep 15 2018