Gulp.js Intro to Task Automation on Nodejs & Javascript 01

Key Takeaways

come on guys I'm already doing welcome to a new video from Ibanez today we're gonna create or we are actually going to let go in through introduction through a really awesome thing that you've been using if you are like probably what people because you've been using for quite some time right now but you can't quite figure out what it is so we got actually going to see how tasks automation works or no Jia's in JavaScript so if you're not using on a word like what peg what to get server extension that allows you to keep track of your files for any changes anything you change of power save it and like the the server or the page reloads auto reloads and you know like reload the changes and all the things so we've been using about something like this you're actually the right choice or the right place to learn how to do that on your own today and we're gonna learn more things about how tasks automation actually works on node.js and JavaScript and which vibe is being used so you are coaching actually going to go through gold dots yeah yes so go which is is a library that allows tasks automation on no yes so what I say on ideas so it pretty much runs on any platform Windows Mac OS X Linux or any other path from Nokia's supports so it's a very lightweight library it's being used actually for quite some time for like huge libraries for huge frameworks use gold-diggers huge teams companies all of them like use it for our tasks automation it's not only just concerned about simple tags or something it can do a lot of things if you try to I don't know if you have like a complicated task about deleting like images whenever you want to deploy or something or you want to like cope with images from one destination to another if you're actually really intended to deploy your website or see how many changes or depending on your like needs go through GS should help and do this so after go to the website go Jess calm your actually to get with this really also web page automated enhance your workflow so you option us from here you can quietly see that you're gonna need to install go to CLI and gulp on your directory and like running a file so all you're gonna need to do is just put in a file there it's very well talking documented so you can just go ahead and check out the documentation from here but I'm just gonna like go ahead and create a very simple script today so I can just give you a quick game started with gorgeous what is gorgeous and how is being used on a real world example so we'll just go ahead and jump into Visual Studio project I've got a project open um in here so I've gone like behind the scenes and created all of the different things in here they're just very basic thing I would have distribution folder the host inductor HTML and XHTML has nothing actually two basic HTML file I have no models as holds on models because I've already installed it but I'm just gonna walk you through which models that you're gonna need to require to run go to GSN like automate your tasks and we have like a SAS folder into this SOC this SAS folder holds a Starbucks and CSS which is a SAS language or SAS or CSS preprocessor we're gonna see how we can use go tortillas or the power took off go to Gia's to pre-process this put it on a normal CSS or pre compile it into a normal CSS then we can just use it later on on running the actual page in including on the actual index.html and here we basically we have package.json impact on loot - locked up Jason so it's quite basic as I've said it has nothing really special about that so first things first before starting I'm gonna need to install a couple five reasons you've seen in here so they install gocta CLI so you're gonna need to do go to CLI and make sure this is very important to install other global modulus so do not consult on your projects directory just putting the - D to make sure it gonna be installed like a global mod do it because it's gonna be needed by all of your projects like assured modular between them so this is the first thing gonna need the second thing is the actual gulp library for your project so on each project you're gonna need to install gold not go see how it'll go up and make sure to save it as a tip or put dependency because both actually gonna only need it on the developments face before deployment or something because it's not gonna be really needed by the application to run or something you actually be able or capable for using that on a server or some it BOTS like Moses is gonna be used on the development phase so start us there save development and for the SAS precompile in the sense of all different things we're gonna need notes SAS or we're gonna need the gold SAS so just put in gold SAS install this and obviously we're gonna need another thing which is browser sink browser same is gonna allow us to sing metadata between the video studio code editor and the chrome or any other browser like firefox or internet explorer of entering spoilers please support because it's like completely dead but obviously you are going to reuse Chrome or Firefox for this one so yeah this is the kind of thing the data so you would be able to like reload and Save Changes and you know keep track of changes and stuff like this so this is all you're gonna need to install for now and obviously before in started all this make sure to initialize your project so you know the basics of node.js and how he works if you do not let me just go ahead and watch I have a full series about know Jesus and how he worries I like on my channel so just go ahead find that or you can find a link in description below or my website abuse calm so you can quietly find everything though so now as you can see we have the project so I bet all of you guys have this project structure on your computer right now and you're actually waiting for me to start doing the real thing that you came for so presses first you don't create a new file under your routes projects in the rural projects call its go file dot j s so the goal file is gonna be responsible for like creating all of the tasks and automating them and which tasks need another tasks to run and so on and so forth so we're gonna need to require a couple of things so remember this is a no J's thing so you can't quietly use an important here so to import things of stuff because this is like an ESX it's gonna be used by you know like a pack or something to compute pre compiled into is five or any browser support JavaScript version but in this case you're gonna need to use like a native root like native node.js language lock with requiring stuff so here are probably gonna need throws the gulp library the main thing so gonna require that I'm gonna pull this goal the secondly I'm gonna need the SAS library so the five we're gonna all of us as I've told you to like compiled or recompile the a CSS file down into a normal SC or normal CSS file and so we're gonna need for this called sass and all we still gonna need browser sync so just gonna browse your sink require an browser sync so this should do the job perfectly we're actually gonna need to extract the reload function from the browser say I'm just gonna call browser sync in here so browsersync don't reload and it should like grab us the reader function because we're gonna need it later on now what we need is actually to create a task to actually like compile or pre-compile the s CSS files into c into a normal CSS font so this is the first thing you're gonna need to do and actually goal is actually all bit based on tasks so if you like want to do something you're actually gonna first create a tasks then you know like you can you can do a lot of things for this tasks task is being created by using the main library and you call the task function so you do a tasks function and a tasks need to tame so each task has a unique name so you have to provide it within like a very unique name you're gonna call this sass and you have to revise this name because you're gonna actually need it whenever you try to call this task or run the task or execute it so you are actually going to be yes and the second argument it has like a couple of definitions for this function or for this method exactly but the second one is gonna be the callback that runs whenever this task is being actually executed or whenever you tell it to execute let's say the sass task this this callback function is going to be running so what you're gonna need to do is using the Pope as well when are like like SRC so the associate function allow us to locate Powell's and layout them into the memory so I'll read a little bit before in there we also see the sass folder on the side of SSDs we're gonna need to go in and rock this file so we can like use the SAS function and pre-compiled into a normal CSS so therefore here we're gonna need to tell it to go into a source c4 slash SAS you can use like a relaxing path and you can probably see I'm doing in here and it has the piped method is the fact that it's just gonna like you know after finishing with this one it just gonna like provide us with Indiana and move to the other task and someone and so forth like a Shane of the Giza cuted commands or something like remember like this is the first command to do a layout of the file after loading the file move to the other one and so on and so forth so this is all the pipe like imagine it as a real word pipe so this is how you can visualize it inside your head so the pipe the pipe it I'm gonna need to use the SAS function so it's a function as I told you and we're going to check for errors so if there's any error so the events we have to check for that and there is any error gonna run a callback obviously a lot actually just simply get a console daughter and for console I'm just gonna put in here SAS log error so it's like saved and a function right over there for us to be able to ask very easily so also we're gonna need to pipe if there is any error if there's no no errors at all what gonna do is like actually we can put the destination or we can use the goal function the called destination or deaths to to push the actual the yielded file into somewhere so here after running the SAS thing so this function is just gonna go ahead and compile the Lehrer file down into from from the memory and finally if it does that correctly what we're gonna need to do is just put in the deed let me just save this to make it look a little bit more readable any destination where you want to put the final result or the final compiled file so you're just gonna give it a directory don't give its define name because the file name is gonna be the same as the source SAS name Wow so yeah us can clearly see this and finally we're just gonna like pipe without our chain tool or using the pipe after finishing all of that what we're actually going to do is like you know reload I use the reload function so we can tell the browser to reload but there is some changes and you have got to reload so we're getting provided with the configuration of this congregation object gonna have a stream so we're gonna give it a stream and it's gonna be like at the trip so that's there is something has been loaded and you've got to reload the actual browser in order to upload or like saying the changes so this is the first stack now the second task is gonna be about like serving the files or serving the distribution file one here which can unlike act as a server like a web pack dev server server leans into a chrome or something and this is where browser Singh comes in handy so let me just like serve this files so just gonna like use that so connect cool pork I'm gonna give it a new task this sounds gonna be called serve so to be quite interesting and if this task I don't know if you have but something some tasks on gold is related to another task like sometimes has to run another task in order to from this can from the collect ascii actually crunch correctly working on to work exactly the same so actually it requires another task so you have to attach it right away so you can encode it as many tasks as you want but in this case we're gonna only need the sad stuff so whenever we want to Sarah blue how we have birth to compile files then we can serve that and remember that it takes a called a class and easily does always so the serve and the sense function so we have to like whenever we call the serve task in here so we have to run the sass tasks first in order to carry on with the actual sort of callback function thing this is this is like a necessity and here we're gonna use the browser sink the brown versus actually a function whenever you call it you're just gonna like you know the startup process and open up and the URL creates a server and open up the URL on the browser you're actually having Depot on your platform so Windows I'm having in chrome so we're just gonna apply automatically by people are gonna open up the URL which is a your localhost server just open it into Chrome so we can easily see our service so I'm just gonna put in here the server and the server actually is gonna take another objects so it takes the base directory so as you can see in here with what is the base directory or the main directory of this survey are click on each one so I'm gonna just put it the distribution super your share folder is gonna be like the main directory so take it if you're not familiar with the distribution folder distribution part is simply works as the public folder so like he now serves the public files into the actual server stuff so yeah this is this is all it does in here and finally what you're gonna need to do is pretty much to compile that so or just run a watch for the files so I'm gonna here is the watch function one function runs some like you know some watching for a specific path so if there's any changes to this file we just gotta like do the whole process in here and we shove stuff and stuff like this so we've got to like keep an eye or watch the sass files with the sass style class so we just quickly copy that and put it right here and this is what it actually takes so we an ulcerated got to me to give it as the second argument is what is the task undertake or the task function so we're just gonna provide it with the sass function as we have created up in here since I've told you before that you're gonna need to memorize that so you're actually going to use it oh it's gonna be coming handy whenever you actually try to watch for files or actually running like this browser sync server or something like this so here let me just put in here keep an eye on the sass files so to keep it in easy pieces so here we go from this point you can probably say once we have finished working with gold and like all the tasks so quite simple script probably seen you have never used in tasks before or both or we have never used something like this it's quite simple so you're only gonna need to do is or all you're gonna need to have as a basic knowledge about like I have no J's actually runs and stuff and everything should be much work for you guys so after saying it is for me to zero pull terminal so you're gonna need two terminal and gonna need to do is run a GU serve so here if you try to open up the destination folder or a distribution folder pretty much it has no files whatsoever by your gonna run that so we put a gulp and you put the command in front of it the command you want actually run which is pretty much called the mink man they make email in here is the serve command which is related to the Sasuke main so here as you can see starting the SAS finished starting the serve finished serve after 334 milliseconds will stop like like waiting press to complete but if can clearly notice that so you're gonna go to the distribution you'll find a style of CSS pre-compile or compiled successfully to us or compiled from the actual SAS file into a normal CSS down so as you can clearly see this it's working with no problems nothing at all but I think this one you're going you don't pretty much need to provide it with the distribution or with the velocity part just putting the name of the base directory of it and you should actually work pretty much fine and sometimes actually takes a little bit of time to actually create this server and run it for you but finally here is we've got the local server or you can probably access em on the UI so you've got like a really nice user interface provided by browser sync the mode to do so you can easily manage yours or you can just easily access your files in here being served from the distribution folder which is has the index of G HTML and from index.html to be fair I'm just lucky you know require all linking it to the normal CSS file and this is all I'm going to do or actually I'm doing in here and serving all the different things in here so this is just preserving one file but let's say you have like a distribution or this this directory the sass director has a lot of files on a lot of directories asylum there is like a SAS files and stuff or you're gonna need to keep an eye on all and all of them so instead of putting in one file in here what you can do is just put it like an asteroid asteroid which means like allocate everything then a forward slash so this luxury means if there's any folders go deep or go inside these folders and keep an eye on if there is enough holders just put it like an asteroid for any file is gonna be matching and SCSS for the actual extension so we basically like provide us or match any directory has any likes a spouse or just satisfied standing like being living in this ass folder so just gonna keep an eye on all of them so you can probably see you it's very simple and it comes in very handy way with this really awesome I'll log in here so you can easily use it for more tasks even more advanced than this one this is like a very simple thing you can get behind the scenes after gold Wow it depends on your project the project actually running on you can just come up with a really complicated task that can hope you will last in your team if you like calibrating on some projects or like covering open source projects go is coming very very handy and it's actually very very awesome to use so that's actually God for this booster oh those are really quick thing and quick introduction about gold purchase and how it works and stuff if you really want the series to carry on no no no let me know in the comments I'll be very happy to do in all of these tutorials on the series and add more styles and give you more information examples and snippets and how he actually works with a little bit more advanced use of gold because this is just a very simple thing and yeah I'll be very happy to do so guys so as I've told you guys I'll catch you in the next video tutorial