Automate your Front-end workflow with Gulp

[Music] hello everybody it's mario hernandez here from media current and this week's learning bits video will talk about how to build an automated goal-based workflow system that will allow you to automate a lot of the repetitive tasks in your project such as compiling code minifying and compressing images reloading the browser for you and a few other things we are going to be using gulp4 the main requirement for this workflow is to have node.js and npm installed and you can get those both of them from nodejs.org and install that in your system so for this tutorial i've i'm going to create a new folder inside my learning business directory called front-end workflow i'm going to go inside the folder the first thing i'll do is i'll check what version of node i am running in this case i am running version 14 and for npm i'm using version six anything uh similar to that will be good to go so once you have both node and npm installed the next thing is to install gulps cli command line interface this this will allow you to run gulp commands like gulp watch gulp build and others so to do that you are going to run npm install g for global meaning that you will install this tool globally across your entire system gulp cli it looks like i'm getting a permissions error on my system here i'm weird because i thought i had this already installed but let's take a look if you get this error it looks like it's a permissions issue normally you can fix this by running sudo however it is not recommended to use sudo when running npm commands it's just not a good thing to do so instead i would suggest you look into why the issue is happening and how you can fix it in my case after looking through it i found there is a a way to change the permissions on the node modules folder that you see here and that will allow me to set the proper permissions on this folder so that i don't have to run sudo every time i run npm commands so once that is fixed i'm going to go ahead and try the install the cli tool again and if everything looks correct then you should see a message similar to this and you should be good to go the first thing i need to do to start the gulp configuration is to do npm init this will initialize npm the npm project and it will create a package.json in the root of my folder and you'll be presented with a few prompts by default is giving me uh the folder the project the package name uh the same as my folder it's asking me a few other questions that i can just type some quick answers to uh the default responses are for the most part good enough once that is in place i can see that i have a package that jason created in my directory so let's open this in my code editor so that we can see this package digestion in more detail okay now that we have the gulp cli tool installed we can start running all commands but before we do we need to install a few things for our workflow so i'm going to go into my code editor's command line and install gulp so that it is available for us in our project after a few seconds you should see a message similar to mine here one thing about working with node dependencies is that sometimes you will see warning messages like this here and i i would say you can ignore those for the most part as long as the tools that you're installing are able to be properly installed and unless you start getting errors that completely stop or crash your system then that would be something worth looking into maybe you can look up the errors in google and that will give you some ideas of what the fix for those may be so we install gulp and one way we can tell that now gulp is available in our project is if i close my command line we can see that under the dependencies portion of our package digestion now gulp appears as one of the dependencies for this project in addition to that you notice that we have a package dash lock that json file which ensures that it tracks all the various dependencies versions for your project and what this means is that by lacking all these different versions of dependencies that if you have a team that works on this project everybody in that team will be able to use the exact same versions of all the dependencies and what this does it make sure that everybody's environment is consistent if somebody in your team is using different versions of some of these dependencies you know they may run into issues or errors that you are probably not running into or you will be the one running into those issues and they may not so it's very important that everybody uses the exact same versions so that's what this file does for you now we we see gulp under the dependencies section um but you know uh when we upload this file to our repository for example uh this dependency will be required up there when a build runs uh if we're running this uh bill on the server through continuous integration or some other kind of automated process and so sometimes it's best to install a lot of these dependencies so that they are only saved for development purposes meaning that they are not required on the server for the project to work so rather than doing npm install gulp one thing we can do is npm install dash task save deb and then the name of the dependency that we want to install and now if we look at our package.json we can see that now gulp is inside dev dependencies what this means is that this dependency is not required to be part of your project up on uh let's say github or or bitbucket or whatever versioning control system you use this dependency is only required while you work on the project locally at this point we can actually probably remove the dependencies object if there is a dependency that needs that it will actually create it on its own okay now the gulp is installed what we are going to do is we are going to install several new dependencies so that we can do a lot of the things in our project things like uh you've been able to use sas rather than playing css being able to process our css code by using a css tool that will allow us to do things like compressing our code minifying our code so it is optimized for performance also we are going to use a browser prefixer tool that will allow us to automatically add vendor or browser prefixes to our css rules those are usually added when a browser doesn't support a specific css3 property and so there are some prefixes that the browsers have to make that property uh supportive supported in that particular browser in addition to that we are going to add a source map tool which allows us to identify where a code particular css code is coming from since the code that we are looking at sometimes when the browser is rendering our website is not the sas code but it is the compile css the source maps tool allows us to identify where in the sas code that particular rule is coming from and then we are going to also install an image compression or image minifying tool that allows us to compress our images and optimizing for the web and finally we are going to install browser sync which is a tool that allows us to reload the browser every time our code changes every time we save a line of code or if we save a file our browser reloads automatically with the latest changes so that we don't have to keep reloading the browser by hand so those are all the tools that we're going to be using and we can install them all with a single command so back in my command line what i'm going to do is i'm going to run a pretty lengthy command just to be able to install all these tools all at once right looks like our tools are installed let's take a look at our package.json and as you can see each of the tools that we just added has now been added to the dev dependencies object along with gulp but that was already there one thing that i noticed in particular with auto prefixer is that this particular version conflicts with uh the version of uh post css i believe so um i noticed that reducing the version from 10 to nine allows us to get rid of that conflict it may not be an issue by the time you're watching this video but uh something that i did encounter as i was working with this so i'm going to save the change um one way to ensure that we're using these versions of the tool since i changed that particular version i need to run npm install so that i refresh my package digestion with the later latest versions of my dependencies since i changed the version that i originally installed for that particular one for the auto prefix one and this will ensure that i do in fact have the version installed all right so so now that we have all the dependencies that we need ready to go let's next move on and create the structure of our project so basically what are the folders that we want to create as we write our code so i'll create a new folder which will become the root of our project i'll call it app this name can be anything you like if app doesn't make sense just use a name that makes more sense to you and inside this folder is where we are going to create the different folders or directories for our code things like css javascript images anything like that typically on a modern development workflow you will have a source directory where you do all your work and then you'll have a dist or compiling directory where all your code is compiled into and so we want to be able to separate the working directory from the compile directory so we are going to create two folders here one will be called source other one will be this so source is where you do all your work this is where you have all your compile code you typically will never have to touch this directory this directory the content of it will be automatically created by the gold tasks that we are going to be setting up in just a moment so inside the source directory i've created new folders for images javascript and our sas code i don't need to do the same inside this folder because as i said before the content of the folder will be created by gulp and the tasks that we create i also created an index html page just for demo purposes obviously this this file may vary for you if you're using a different language for your application but this is good enough for us to start and the next thing now that i have the structure ready to go i need to create a gulp file this file needs to be created in the root of our project the gold file is where we actually going to create all the various tasks to automate our workflow and so this is just a typical javascript file where we're going to be configuring all the different things so that when we run some commands on our command line the tasks will run and we'll do things with our code like in most javascript files we're going to declare use strict to ensure that any variable that we want to use is first declared now we are going to be creating variables for each of the tools that we installed so the first variable is called gulp that simply will allow us to use gulp the the the tool that we installed to do certain things with our code i'm going to save this file one thing you don't see in this uh file or this structure here is the place where all the dependencies that we installed are stored and that is because globally i have that directory hidden because that directory should never be committed to our code it's simply a directory that is used for storing a lot of the gold and no dependencies let me show you what that looks like so i i'm here at the directory where my project is located uh here's the app directory and here's the three files that you see here the one folder you don't see is this node modules folder and if we expand this you can see that it's a pretty long folder it's got a lot of things that i don't know what all of that is these are all the things that node and gold and other dependencies need from each other and this folder is simply there to keep track of all those dependencies but it should never be committed to your code if you're pushing this to github or any other system this folder should never be committed it's only for development purposes but i wanted to mention it because if you see this folder and you wonder why why is this showing here where mario's video doesn't show it that's the reason i have inside my global git ignore file i have excluded this folder from any project where i work where this folder is never added into my repositories so when we say gulp require gulp this part of gulp is basically uh is indicating that this gulp should be stored inside the node modules now we have a variable for sas and again we are indicating which dependency which tool which package right is the one that will make use of that variable in this case is gulp sas the package that we installed previously and so the idea here is that we are going to set up a variable for each of the packages that we installed when we run all those commands and we can do var for each of those packages but there's also a way in which you can do a single var and then and separate each of the different packages so that the code looks cleaner otherwise you'll end up with too many repetitive lines of code here so uh let me organize this and when i come back you will see it all nicely organized so there you go let me close the command line and now you can see that we have a a variable for each of the packages that we installed and we are pointing to the corresponding package from node modules there right now you can see that everything looks uh dimmed the colors look faded and that's because my code editor is doing this so that things that are not being used in the file are faded this way as soon as we start making use of those variables you start seeing that things start to light up a little bit with brighter colors the same way that you see use strict here that's how the colors should look so you'll see that in just a moment okay now uh before we can create any tasks for our code we need to tell um gulp where our files are located right uh where is our source for our files and where is the destination for our files so i'm going to start by creating a variable for determining the path of our code first i'm going to create a path for our css and i'm going to call this css this takes two parameters one is the source and so we need to point to where our source directory for our css is located and we'll start by the top level directory so we are basically saying the source of our css or sas in this case is inside the apt directory source scss and the wildcard asterisk there is basically saying grab any file that ends with scss then we'll do something similar for the destination of our code right where do we want our code to be compiled into our css code and in our case we want our sas code to be compiled inside the this directory css right that css folder does not exist but it will be created by gulp we'll do something similar for our javascript code so we've done the same here we are saying insider source.js there should be any file that ends with js compile it and then copy the compile version of it inside the dist js directory and then we'll repeat the code with our html and our images right so that we can tell where our html files are located and where our images are located in the case of the images we are actually passing uh like a an array of possible versions or possible type of images that we may have in our images directory all right the next step is we are going to create some functions and these functions are the ones that are actually going to be doing the processing of our code right these are not yet the tasks but these are simply the functions that will allow us to process the code the way we want we'll start with a function for our css styles this function uses our goal package and it takes several parameters first we're passing the source of our css in this case the path that we created earlier once we provided the source for our styles we are going to use source maps uh to initialize so source maps so that um we can start processing the the source maps for css and i'll explain to you in just a minute what source map really does for us then we pass sas so that sas can do the compiling you know the pre-processing between sas to css the pipes that you see here the pipes are basically just a way for us to pass a string right a a string of uh code then when when sas has been compiled from sas to css um we want to uh determine whether you know if there are any errors right um let's say we write a an invalid line of code sas code or we miss a semicolon or or something like that then through our pos css package we are going to allow our code to go through out of prefix or another prefix will determine if there are any css properties that need vendor prefixes and it will add them or removing if we add them ourselves and then we are going to minify the code using css nano once our code has been processed compiled and all the good stuff has been added then we are writing the source maps that we prepared up here we are now writing them to the compile code so that when we inspect our code we can tell exactly where our css rules are coming from which sas files those are coming from because we'll be inspecting css they compile css and so the the the line numbers and and you know file names will be different in css than the source files that we use when we wrote the code once the the the source maps rules have been written then we will write we will copy our compile code from our source to our destination so that all the code that has been compiled let's say from scss will be copied into this directory css directory and finally we are going to then allow for browser saying to reload the page when all of that has completed so this is the process right if uh the from beginning to end how our code will be processed um every time we save a change of sas right now we are going to do something similar for javascript except javascript will not have as many of the items that you see on the style so we are calling this function scripts and we're again using gulp to do the processing we're passing the source of javascript we are passing the destination right and then we are reloading the browser when the code has been compiled so there's less things to do with javascript and then we are repeating the process for html files any html files that we have on our project every time we save changes to that will be compiled and the browser will be reloaded and images will provide the source of the images we'll compress them or minify them we'll copy them to the images directory and we'll load uh we'll reload the browser also let's save this so our functions are in place right now these functions are useless because there's no way for us to run them they're just ready to be around but we don't have tasks to run them so just before we create the watch uh task we are creating a function that basically will be um a callback function that will allow us to to do certain things when our task runs the first thing is we are going to initialize browser sync so the browser sync is aware and is paying attention to any code changes and this but in this case style changes so that the browser can reload automatically so to do that uh browser sync allows us to create a web server a local web server and we're telling browser thing that the destination for the server is the list directory so that's where our web server we will be running from because this is the directory where the entire website will be served from right this is where all of our compile code exists so when your website has been served from the server this is what it's looking at it's looking inside this directory where all the compile code exists then it's going to allow us to run the watch task by passing the path of our css and then using the function that we created above right the styles function that we created up here right by passing that cult this is a callback function that when evoked is going to go and go through this series of steps that we see here and then it will and it'll reload the browser so we are going to save this so for us to be able to run this task uh from our command line we need to export the task so we are exporting the watch function with the name of watch right so let's test it let's see if this is working uh the first thing we are going to do just for the sake of an example first we need to make sure that our html has something to show so i'm going to just create a little simple line of text for my html and i'm going to create a new sas file and in here i'm just going to create a simple rule so now that our sas file is created we know that that sas file will be compiled inside our this directory css directory with the same name except it will be css so we need to link our html to that file that we know will be created and you may wonder why this path well that's um eventually remember that everything that we have in the source will be compiled inside this so inside the disk we will have an html file and a css directory inside the css directory will be and that css file created and that's where we are linking there right now though neither of those things exist but we are going to make that happen now so i'm going to open my command line here and i'm going to run the watch task and i do that by using gulp watch so here is our site and we see that the browser automatically opened but we can't see anything so something must be going wrong let's take a look browser sync is running properly we can see that it's serving everything from our this directory nothing is inside the disk and um i may have misspoken before where i said that everything will be automatically created by gold but it looks like that's not the case so what i'm going to do is i'm going to first create the folder css i'm going to stop the task from running ctrl c and i'm going to run it again now the css directory exists i'm going to run gulp watch again the page still shows up with nothing and i'm going to make a quick change let's add text color white and you'll notice that as soon as i save the code this runs it just ran it compiled and now this file was created for me and there is when i click on the file you can see that here are the same rules that i just created they're minified and this is the source maps that i was telling you about we'll talk about that in just a moment now if i go to the browser the browser was reloaded already but there's still nothing there and the reason for that is because right now you notice that there is no html file here and the reason for that is because although we have created functions and everything for html we still don't have a task for compiling the html so let's fix that now so we have a watch task that will run our styles compiling which we know it works now i'm going to close this let's add a similar task for javascript right so just like we did before we are saying that it will be a watch task so every time the watch test runs we'll run this uh uh this compiling of javascript just like we did with the css or styles right and we are using the callback function of scripts which is the one we set up right here so now you can see that i remember before where things were faded out you can see the colors a little bit brighter now because now all of these things are being used so that is for our javascript let's add something for html so that our html is also compiled when we run the watch task so just like before we pass in the path to the html and we're saying that on change we're gonna browse our sync this is a little slightly different than the other ones but but it's okay it still will do the same thing it will still reload the page and finally we have the same thing for images right we want our images to be compiled so before we have the same issue as before let me create those folders so we need js inside our dist and we also need image right those are the three folders that we have inside source images js and scss inside this we have css images and js and those are the directories that we have already specified in our path variable here right here are the same folders right so they need to match there so okay now um let's see if this works so technically our watch task now should run the compiling of all the code i'm going to stop it because we did change some things we added new functionality in gulp that wasn't there before and so i'm going to stop the server from running and i'm going to save these changes right so now when we run our gold task we should be able to see all those tasks being ran by gulp so i'm going to do gold watch i think one thing that is confusing is that when we run the watch task we're simply getting browsers saying ready waiting for changes to happen there are ways in which we can set up the watch task so that when the watch tags task runs the first time it actually compiles the code as well our watch task is there is waiting right it's just saying okay let me see when our change is going to happen as soon as we make a change that's when the code will be compiled because if you notice here basically no compiling has happened here it's just browser sync sitting there waiting so let's make a change and as soon as i save this we should be able to see down here that the code is being compiled and we won't see it in fact one thing i can do well before i save it is i'm going to move this down so that we can see the browser and the background and let me move this well we won't see the call compiling but it will know it will happen when the browser reloads so as soon as i say this we should see the code compiling down here and the browser should be able to automatically reload and hopefully we see something let's see and that may be because we just changed css let's see if we re save the html page again there it didn't happen however if i reload by hand you can see that it does work something to to keep in mind i think although browser sync was there waiting since the first time it failed it it almost as if error basically and they wanted to just be triggered again so this time if i go and make another change for example let's say and i save it there you go you saw that text changed automatically so now browser sync is back in sync no pun intended and and now pretty much any change we make should be able to be captured there so that's working the last thing i want to do since i i said before that you know just running the watch test it doesn't look like it's compiling the code for the first time so i'm going to set up a default task that will do all of that while still watching for changes for the first time so what i've done here is i create a new variable for a build variable that will run uh gulp and all the tasks for gulp in parallel mode uh there's ways and you can run c in series or parallel depending on how code relates to each other where what things need to be done first and what thing needs to be done next if there are things that can be run simultaneously they that's what parallel allows you to do um and so i'm passing the parameters of running the styles scripts html and images functions right callback functions that we created here right so it'll run all this process and along with the watch task right so the wash task that we run and then we are setting a task a default task named build right so that when we run our npm build everything will be run compiled for the first time and and watch tasks will start washing our code so let me try that i'm going to stop our watch task from running and i'm going to save this call file since we just made these changes so now i'm going to run all of these at once by allowing the code to be compiled for the first time so we don't have that issue that we have before where browser sync was not properly syncing the first time now right now i don't have a specific command to run so if i just run gulp that will run everything for me so let's try this and you can see that our page loaded with all the code that is already available if we look at our our task here in addition to browser sync being ready watching for changes you notice that compiling took place this time we compile our sas code um there is no files to minified right so it did uh it did work it loaded the page properly and the code was compiled the first time um so how can we turn this so that we run a specific command when we want to run this rather than just run gulp there's nothing wrong with running gulp that's perfectly okay to do but let's create a a script that will let us run a different command so if we go to scripts here on our package.json we can actually add new scripts and i'm going to associate a build script with gulp script the other one that i can do i can do watch with called watch so basically right on the right rather than running gulp or gold watch i will run npm run build npm run watch depending on which tasks i want to run now in our case the tasks that we are going to be running are pretty much the same between watch and build the difference is that the build task does more for us right it builds everything from beginning versus the watch only gets the server ready but it only starts working once you start making changes to your code so i'm going to stop our task and try our new command there you go the browser loaded properly our code is compiled and the watch task is running so you may wonder why do i have to run these commands instead of just call for what you'll you'll nothing wrong with that you can just continue to run gold for world watch uh but you'll notice that in most projects that you work on modern workflows um you will be running mpm run something commands instead of gulp or ground or any other tool that you use what this helps you with is that tools change all the time right today you may be using gulp next week you may be using ground or some other tool that comes out right that is better and so by using this custom command you can actually associate the same commands with the new tools so that you don't have to keep learning new commands every time you change tools you can continue to run npm run build or mpron watch even if the tools have changed for you that just provides a consistent workflow especially if you're working on teams and you're working on multiple projects there may be projects that are new projects that you work on that are maybe six months old or a year old when you are using different tools so but from this point forward even if you are changing those tools regardless of the project you can continue to use the very same commands on all the projects because you are now associating the new tools with the commands that you are already used to so something to keep in mind uh just something that helps us a lot keep consistency among our team members and our projects so uh i hope this was helpful uh this is again just an intro of how you can automate your workflow there's a lot more you can do with this uh look into npm gulp and all the different tasks and packages you can add to your workflow to improve and make your work for more efficient so thanks for watching i'll see you on the next video thanks bye

Channel: Mediacurrent

Views: 1,410

Rating: 4.8947368 out of 5

Keywords: Learning Bits

Id: 4InNrO1phgA

Length: 38min 3sec (2283 seconds)

Published: Mon Nov 16 2020