Gulp JS Crash Course

alright guys in this crash course we're going to be talking about gulp or gulp J s so gulp is an invaluable tool when building JavaScript applications and I know it can be a little confusing to new developers and I think that's mostly because it's used for so many different things it has so many different plugins so in this video we're going to start from scratch and just talk about what gulp is and some of the tasks that it's used for so first we're going to take a look at a couple slides and then we'll see it in action by creating a few tasks all right so technically gulp is an open source JavaScript toolkit also called a task runner it's not a framework or a library it's not like react J s or angular or anything like that it's just a tool for building JavaScript applications now this may be pure JavaScript or es6 code it could be a react application or view Jas it really doesn't matter what other technologies you're using gulp works and is installed with NPM which is the node package manager so to install gulp you're going to want to have no js' installed and that's really simple just go to node.js org and go ahead and download it install it all right what's great about gulp is that you can you can take care of those annoying repetitive and time-consuming tasks gulp has its own ecosystem with hundreds of plugins for taking care of these tasks alright so let's take a look at a couple of those tasks so unification of scripts and styles so if you don't know what minification means basically it'll take a file either javascript or css it will condense it it will remove all the whitespace it will remove all the comments and this makes it much lighter which in turn makes your application faster so gulp can take care of that really easily it can also concatenate multiple files together into one big file which again optimizes your app cache busing which has to do with letting the browser know if there's a new version of a cached file testing linting error checking all those helpful debugging tasks gulp can handle that all right there's even a webserver plugin so that we can run our hold on a development server all right so these are just a few of very many tasks and plugins that are available all right so we're going to get a little nerdy for a second and just talk about how gulp works exactly all right so gulp is built on top of what are called node streams and a node stream is a continuous flow of data that can be manipulated asynchronously all right now these streams facilitate the connection of file operations through something called a pipeline and the pipeline is basically a chain of processing elements and they're arranged so that the output of one element is actually the input of the next element all right so we can essentially set up single purpose gulp plugins to run task after task and this is all done using the pipe operator or pipe function so basically one plug-in could be used to minify the JavaScript files and then it will be piped to the next one which could let's say compile SAS files down to regular CSS and so on alright and the original files aren't affected at all until the plug all the plugins are processed all right and I think this will be it'll become a little more clear when you actually see the code and see it in action all right so gulp isn't the only task runner out there one of the other big ones is grunt which you may or may not have used or heard of now I'm not here to bash grunt it's a great tool I just prefer gulp and I think gulp seems to be a bit more popular in the JavaScript community all right so one big difference is gulp is code over configuration and gulp tasks are coded using node style syntax while grunt is configuration over code meaning that all the tasks are configured inside of a configuration object inside of the grunt file alright so you'll have to figure out which method you like better but overall I prefer gulp I think gulp is much easier to read you can easily define the task and the pipe operator gulp is also based on streams which we talked about and grunt is based on files all right and configure a so that's enough for the slides guys let's go ahead and jump in and take a look at how golf works all right guys so we're going to jump in and get started with a gulp now as I said before you're going to need nodejs and this video is going to be completely cross-platform whether you're using Windows Mac or Linux and you just need to install node which you can get at nodejs org just download it install it and you should be good now as far as a command-line I'm on Windows and I'm using something called commander I actually did a video on it if you want to check that out but it just gives us some extra options and it looks a lot better but you can if you're on Windows just use your you know your standard command line all right and of course your Mac or Linux terminal all right so first thing we want to do is install gulp globally so we're going to do NPM install ok NPM is node package manager make sure you have that and nodejs they both come together and we're just going to say - g4 global and then gulp ok so this will install gulp globally which means that you'll have access to it from anywhere on your system all right so now what we want to do is create a folder for our project so I'm just going to do make dirt and let's call this I'll call it Gump gulp X app for gulp example app and then let's CD into that ok and then what I'll do is open this up in atom which is the text editor I'm using so I can just say atom dot and that should open up in the directory ok you don't have to use atom you can use whatever you like sublime text is really good Visual Studio code or even something like notepad plus plus is all fine now we want to create a package.json file in this directory which is kind of like a manifest file it'll hold all our application metadata as well as the dependencies and all that so to create that easily we can just do NPM in it for initialize and then it's going to ask us some questions I'm going to keep the default folder name is the the app name version that's fine description we'll say example app using gulp and entry point that's fine we'll just enter through the rest all right now you can see it created this package Jason file with that info now we install gulp globally but we also want to install it locally so to do that we're going to say npm install and this isn't something gulp isn't something we use in production so i'm going to save it as a dev dependency a development dependency to do that we do - - save - dev alright and then we want to say gulp and then that should show up over here in this package dot jacent file once it's installed okay there it is alright so now we're going to start getting into our file structure so right now we just have our package Jason and our node modules folder which is created automatically what I'm going to do is create a new folder called source or SRC and this is all of our our application source code this is before it gets compiled what we'll do is we'll put everything in here and then all of our tasks that we run in gulp it's going to go through and it's going to compile it and then put it in a directory called dist you don't have to call it dist you can call it build or public or something like that it's basically your production application that you would actually up deploy to your server all right so we're also going to need a file in the root directory called gulp file dot J s and this is where this is the only file we need for gulp for what we're doing this is where we describe all of our tasks ok everything we want gulp to do so very first thing we're going to do is bring in gulp okay so I'm going to use es6 and tax and use cons but you can use VAR or let but let's say gulp and we're going to require that we just want to say require gulp and since we installed it locally as a module it's going to know exactly where to look which is the node modules all right so that's all we're going to bring in for now we will be bringing in gulp plugins but we're just going to leave that from now okay now before we move any further there's a couple of things that I want to mention okay so these are going to be the gulp top-level functions okay and you should know what these four things are so first we have gulp dot task and what that does is it allows us to define tasks all right we're also going to have gulp dot SRC and this is going to be or this is going to point to the files to use all right then we have gulp dot desk okay or destination and this is going to point to the folder to output and then we have gulp dot watch which will watch files or yeah watch files and folders for changes ok so we don't have to keep running the Gulf command these are the four basic functions that we're going to use in this file all right so let's do something really easy and let's create a task that will just log out a message all right so let's put a call in here we'll say logs message good to put a comment to tell the user what it does if someone else is using your code all right so remember we use gulp task to define a task and you can call it anything you want I'm just going to call it message and then it's going to have a callback function right here and then what we want it to do so we want to return a console dot log and let's just say gulp is running all right so simple as that to create a task so let's go ahead and save this and then we can go to our project directory in the command line here and we can say dult message and right here you can see it says gulp is running it gives us kind of a timeline so using the gulp file starting the message task it runs it and then finished the message task alright and you can have it do apps anything that you want all right now if you don't want to specify the actual task you know how we did gulp message then you could put it in the default task so let's say gulp dot task I shall just copy this and then change this to default and now if we go over here we just run gulp you'll see it runs that the console log all right so let's go ahead and create an easy task to to copy HTML files so in the source folder we're going to create a new file called index.html alright and then let's just put some basic tags in here we'll just say my example app let's just put an h1 let's say my example app alright and then I'm going to create one more HTML file we'll just call this about HTML and let's copy everything in here and paste that in it'll just change the heading here to about us ok it doesn't really matter what's in these files now for the most part you're not really going to want to do any do much with your HTML files because they're just static it's just static markup so we do want to copy it to the desk the dist folder so we're going to set up a task that will do just that it's just going to take those HTML files and copy them over so let's put a comment here we'll say copy all HTML files and let's say golf dot task and we can call this whatever we want let's just say copy HTML and then we'll put our function and then what we can do is we can say gulp dot source okay so remember source point to the files that we want to use so the files that we want to use are all the HTML file in the source folder so let's say source slash and then star dot HTML so that's going to look at any file that has an HTML extension all right and then what we want to do is pipe it so we're going to do dot pipe and then we want to in here put gulp desk for the destination and it's going to be into a folder called dist ok and you can call it whatever you want it doesn't have to be dist so let's go ahead and save that and then if we go over here and we run gulp copy HTML okay you can see that it ran and then if we look over here in our folder structure there's a dist folder we didn't even have to create it it does that on its own and it brought over index and about alright so this is our basically our production application this is our source code now in some cases you might see the HTML files outside of the source and outside of dist and then what they'll do is for instance if they have tasks to minify the JavaScript they'll put the minified javascript in here and then just point to the dist folder from their HTML hey you might see something like that but I like this how we just have the entire thing in dist and we can just simply upload it to a server or whatever we're going to do with it alright so let's let's find some stuff that's a little more useful ok so let's uh let's optimize images so there's actually a plug-in we can use let me just go over here and it's called gulp - image min and this will take your image and optimize it automatically all right so if we go on here we need to install this so we're going to save it as a dev dependency and then this gives us a basic example that we'll use so let's go over here and to the NPM install we want to do save dev and then gulp - image min okay and then what we'll do is go over to our gulp file and we need to bring that in as well so say image min and set that to require gulp - image men all right and then we can get a simple example from the website here I'm just going to grab this okay let's put this right here we'll say optimize images paste that and I don't want it to be called default though let's just call it image min like that alright and then you'll see we're doing the gulp dot source we want to look in a folder called images in our source so let's create that folder called images and then it's going to pipe it it's going to run the image min function which is going to take care of you know all the stuff behind the scenes making the image smaller and so on and then it's going to pipe it to dist slash images okay and we don't have to create it it'll be created automatically so let's save this and then we're going to going to actually need an image so let's go over here and let's look for will say gulp logo alright and then let's grab yes let's grab this here and we'll just go view image and let's save it oh that's an SVG I don't want that you know what let's just say gulp J s PNG all right so let's grab this so we'll save it and we want to go to projects and then or is it right here and source images and we'll save it as a gulp dot PNG alright so let's take a look and see how big that image is so source images and if we say properties you'll see that it's nineteen point one kilobytes which is not big but let's go ahead and let's run over here gulp image min okay and now over here you exit Scott let's go to it over here and in the disk folder it now has an images folder and let's take a look at this properties and now look it's two point six seven kilobytes so it shrunk it crook that optimizes it quite a bit alright and there's a bunch of different options if you look at the documentation for image Minh there's a bunch of options you can use as far as how much to optimize it and so on alright but we're not going to get into the details of the particular plugin alright so now what I want to do is I want something to minify our JavaScript with so first of all let's create some JavaScript so we'll go in the source folder I remember you shouldn't be touching anything in the dist folder so in here we'll create a new folder called Jas and let's create a new file called file 1j s alright and then here let's put some comments we'll just say console.log one console dot log and let's say this is file one and then I'll grab this we'll put some white space I'll just enter down and then let's say - this is file - alright so we'll save that and then we want to minify this and there's a few different plugins you can use we're going to use one called uglify so let's go over here and say npm install save dev and it's going to be gulp - uglify alright and then we'll go over to our gulp file and of course we need to bring that in just like we did with these so let's say uglify set that to require gulp - uglify alright and then we'll go down here and create a new task so you minify j s and let's do gulp dot task and we'll just call this minify alright and then what we want to do is say gulp thoughts source and define files we want to look for and that's going to be in our source folder /gs slash and then any javascript file so star j s alright and then get rid of that we want to pipe it so let's say Tod and we need to call the uglify function like that and then we want to set the destination so pipe and then in here we'll do gulp test and we want that to go to our disk folder and then into a GIS folder all right so let's save that and remember what our file 1 looks like in the source code and then we'll go over here and run gulp minify and then let's look at our disk for GIS and then file 1 and all the comments are removed all the whitespace is removed and now it's a lighter file ok it is ugly but it is lighter and it's optimized so that's how we can easily minify javascript all right so let's keep it going and now i'm going to do is add a plug-in called gulp sass now if you don't know what sass is it's a CSS pre-compiled err I have a couple videos on it and it's similar to less and it gives us functionality like it lets us use variables in our CSS it lets us use mix-ins which are kind of like functions nesting is there's a lot of different things and a lot of reasons to use something like sass so let's install the plug-in NPM install save dev and it's going to be Gulf - sass ok notice all the plugins are prefixed with gulp - and then let's go over to our gulp gulp file and let's say compile staffs and we'll do a gulp dot task ok and we'll just call it let's just call this sass ok we need to do our gulp source source and let's see in here we want to put the location which will be source slash sass slash and then star dot F CSS ok sass files are they use an S CSS extension so we're basically saying any sass files in this folder okay and then we're just going to pipe and in here see actually you know what I actually want to do yeah we'll do sass and then we can also do a dot on here and we can say on error because sometimes we'll get an error for instance if we define a variable wrong or something like that and then we can just do sass dot log error okay and all this stuff is on the documentation for that plugin and then we just want to do our destination so here we'll say gulp desc and that's going to be in the dist folder and then in a CSS folder because it's not going to be sass anymore it's going to get compiled to regular CSS so let's go ahead and save that and then in our source folder we'll create a folder called staff and in here we'll create a new file called say style dot F CSS alright and then I'm just going to define a variable alright so let's say I will call this a BG color and let's set that to gray all right and then let's just put in a body and what will add a background and let's say we want that to be that BG color variable alright so we'll save that and then let's go over here and run gulp sass and looks like something is wrong sass is not defined did I not save this gulp task let's try that again that's not oh I didn't bring it in up here that's right so we need to do const sass and let's set that to choir and that's going to be gulp - assess alright let's try it again okay now if we look in our disk folder sorry about that there's a CSS file and style dot CSS and look at that compiled the sass there's no more variable because obviously that's not allowed in regular CSS but it put the gray for the background alright so this is starting to come together now what I want to do is edit the index.html file in the source and we're going to add a link here to go to that compiled stylesheet so it's going to be CSS slash style dot CSS and then down here let's put our script tag and let's point to J s slash file one dot J s alright so we'll save that and let's also do that in the about file I'll just copy all this paste that in and I'll change this okay now I want to copy these over to our distil door again so let's go over here and let's run gulp what was it copy HTML all right so now if we look in our dist and we look at index you can see it has those it's pointing to those files so let's go ahead and open that ok make sure you're in the dist and we take a look and you can see if we look at the source code it's bringing in those files so that's good what I want to do now is show you how we can have all of our tasks run with one command so let's go back to say I hope this all these files I'm confusing you guys but let's go back to our gulp file which is the most important and what we'll do is go down to the default and instead of putting a function here with with a single task we can actually put in a ray with the tasks we want to run so let's do all them let's do message let's do copy HTML let's do let's see image min and what else minify and let's do staffs alright so now if we save this and I'm going to delete everything and I'm going to delete the whole dist folder and completely and then let's go over here and then let's just run gulp and look it did all of those tasks and it also recreated the dist folder with all that stuff so we can now go back to our file and reload and it should be good alright so last thing I want to do is I want to create one more task to concatenate all of our JavaScript files together so let's go to our source folder and go to j/s and we're going to create a new file called file to dot j s and here let's just say console.log and we'll just do we'll say this is file to and you know what let's do an alert to just file to alright so we'll save that now we need one more plugin for this and it's a gulp concat so let's do npm install save dev we're going to do gulp - and cat ok and let's go over to our gulp file make sure we bring it in up here so it's what is this again this is cat require go - canned cat all right so what we want to do is we want to take file on file - and anything else isn't that's in here combine it into a file called main is okay and that's what we'll get compiled so I'm going to create a function here let's just say scripts and then we'll just do go dot tasks call it scripts oops all right so in here what we want to do is a gulp dot source okay and the location is going to be in the source folder /j s and then we want all javascript files in there so star j s and then let's see let's do dot pipe and in here we want to run oops it's the other one I want to do can cat and then let's do our gulp dot desk and then the destination is going to be the distal dur and then J s all right now if we were to just let's go down here and add scripts now if we go ahead and run this what it's going to do is it's going to see minify and it's going to minify file1 and file2 and then bring it over to the disk folder and then it'll go down here and then it will concatenate file1 and file2 into a file called alright here we need to define that into a file called main j s but it won't be minified because that already happened all right and we we don't want both of the files to go over we just want the main J s so what we're going to do is grab this which is the part that actually does the minifying and we're going to put it right under the concat and then we don't want to run this because this file will actually concatenate and then minify main j s so we just want to take minify out of the array down here want to run it alright you could even delete it if you want so let's save that and I'm going to delete the whole dist folder and then let's go over here and just run gulp okay and then let's look at our disk folder if we look in Jay s now there's only mange a s and it's all concatenated ok file1 and file2 is all in there so let's go back to actually let's go back to our HTML because now we don't want file one included we want named Jay s same thing with about alright and then we'll run gulp one more time to copy those HTML files and then let's open up this and reload and we get that alert that says this is file - all right if we look at the console it runs the logs from both files alright guys so that's pretty much it the last thing I want to show you is how we can just constantly watch instead of having to type gulp every time we change something so we'll go down to the very bottom here and say gulp dot task ok this is going to be called watch and then we're going to have a function and then I'm going to paste this in just to save a little time ok so what this will do is it's going to run all of these watch commands and what this takes as a parameter is the location to watch or and the file type and also the name of the task so for this scripts and we have our imagem and our staffs copy HTML all that stuff and then just the files that it's supposed to be watching so if we save this now we go over here and we run gulp watch see why to do that I'm just saying what they do I don't have a caller there should be a comma all right let's do that again Gulf Watch and now you'll see it's watching it so if we go and change let's say in the index and we say my awesome app save it you'll see over here it ran copy HTML if I go and I change let's say file one two this is file and we'll do one spell it out save it and you can see it ran scripts and if we go over to our app reload and my awesome app and then you can see that's changed as well alright so that's going to be it guys hopefully you learn something from this we went over quite a few different common tasks and hopefully you'll use gulp in your upcoming projects thanks for watching if you're not subscribed please do so and to leave it a like if you liked it dislike if you didn't and thanks for watching

Channel: Traversy Media

Views: 155,736

Keywords: gulp, gulp.js, gulp js, grunt, grunt js, gulp vs grunt, javascript, jafvascript task runner, gulp tutorial, gulp javascript

Id: 1rw9MfIleEg

Length: 33min 41sec (2021 seconds)

Published: Fri May 19 2017