Add Watcher Default with airSlate SignNow

Add watcher default

[Music] hey what's up guys Alex here thank you for checking this video and welcome to this quick tutorial on how to upgrade gold version tree to the newly released gold version for this episode is brought to you by sky silk if you're looking for a powerful reliable and affordable VPS in the clouds Castle Combe is the answer for you look no further for amazing powerful cloud computing machine starting as low as $1 per month click the link in the description below to learn more if you've been following this series you probably have the same exact configuration that I have and we're currently using the latest version of code 3 point 9 point 1 but of course this is updated version 4 of gold was released and we should all upgrade the problem is that if we are great directly pretty much the entire gold file will stop working and all our tasks and piping and concatenation and default and watches everything is gonna break so we need to upgrade it so let's take a look at how to do it first of all it's access our terminal and let's inspect our packages to check which packages are actually outdated and we can upgrade to do that we can simply type NPM outdated an automatically NPM the node package manager will return the full list of all do data packages that we're currently using with different color stating which current version we have installed the wanted version that it's required in the package to JSON file and the latest version available for that specific package a quick heads up if you have a lot of outdated packages these NPM outdated command could take even a couple of minutes to complete so just sit tight and wait for the output of that command these are different color because as you probably can figure from the version number if the color is orange that means this is a major upgrade for example from version eight to portion 10 if the color is red this is a minor upgrade in order to upgrade automatically all the packages you could potentially do a simple NPM update and automatically only the packages that have a minor upgrade will be upgraded in our just the browsersync and a gold plumber' the rest of these packages will not and this is a safety precaution because most of the times a major release in an NPM package breaks backward compatibility with the previous version but we are here to break stuff so we want to date all and we want to save the latest version of our updated packages so in order to do that we can simply type a command saying npm install babel fi and we can specify an at latest version and then - they are safe - dev and you will probably get an error that it's really important because in this case by abilify 10 at version 10 cannot be installed because we're missing babel at Babel core so let's install that and let's do NPM install at maple core and then let's save it in the dev dependencies as well perfect and let's install again or let's update abilify to the latest version perfect we can double check that the installation was successful if we access our package JSON and we have the Babel if I file now with the latest updated version which is fantastic so why don't we do super quickly the same thing for all the other outdated packages that we currently have so just quickly go through all these packages and do the same command but by replacing the name of the package we shall see you in few seconds perfect after doing that if you run once again NPM out data we should have an empty output wonderful so now let's start updating a bunch of things in our package Jason first of all we need to replace the Babel core or actually we don't need a bubble core anymore because now the new version version 7 comes from the at Babel forward slash core package and also we need to install the new babel preset env d environmental preset of babel and we need to replace it also here this preset is important because in our go file were using that in order to minify it or babel if i the java script in order to convert the es6 ca-7 all the future version of java script to something more vanilla that every browser can read so we need to install the new version of this package that also in this case is at Babel for a slash preset EMV so let's open once again our terminal let's say npm install at babel for a slash preset - EMV and then let's save it in the dev dependences perfect now that we have this new package we can remove babel core and babel preset env let's copy this new at Babbo four slash preset EMV and let's replace the babel settings with the preset instead of just EMV the actual preset yeah we perfect and let's remember to do the same in the gold file when we state when using babel if i which process we should use the babel preset EMV so now all our dependencies are updated we're running gold for and if we try to run it by typing simple gulp and it's gonna potentially run the default task we're gonna ever an error so the error stays the task function must be specified and this is a new type of syntax of call basically we cannot declare a task like this anymore we need to name the task and then we need to register that task and this can be kind of confusing in the beginning but it's actually really straightforward really easy and there are a couple of methods that we could use so first of all just to not get ahead and just not get super confused let's comment all these stuff here let's comment all the tasks that we previously created so if now we run actually gulp we're gonna have an error because the default task was never defined so let's define a default task shall we let scroll all the way to the bottom of the file and let's type something like gulp task and these the syntax is pretty identical then we need to say that the default task should return something in our case is usually used to write a function but in this case we need to write a function with a name so let's write this function for example let's say this function is called a but you can call it however you want of course you cannot call it default because it's a proper attribute variable name of JavaScript so just call it whatever you want but not default then open and close the parentheses and open and close the curly brackets and semicolon at the end and here we can execute whatever script we want if we try to run these default tasks we're gonna have another Herer because the task didn't complete actually didn't say to golpe the default task is being completed like we are not running the default task anymore this is another extra update to the ghoul version for basically every function needs a callback that is gonna be automatically called when the task completed and this is necessary for group to know when the task finished executing know that you run multiple tasks one after another or run parallel tasks like multiple tasks all together in order to specify a callback we can define the name of the callback whatever name you want in the attribute of the function so in my case I can call it CB that's for callback or you can call it actually callback or sometimes you can find a line someone right done and then you need to write or need to call that exact callback that you declared after doing that if we run again gulp there you go we're not gonna have any error anymore I mean less than a millisecond our default task is trigger so these is basically the new convention of cope in order to run tasks but we can improve this code a little bit so for example we could do something like that we could extract this function right here and then we can say that the default task should run da function because we're referencing the name of the function and of course if we do something like that and we trigger once again gulp we're not gonna have an error and default task is properly triggered this is very useful because we can run multiple tasks at once with two different methods the go p-- series and the gold parallel so if for example we duplicate these tasks and we say hey this task is called B and something else happens also in this case we have done so we need a callback we can say that if the tasks default is trigger we want to trigger both a and B all together and if you remember the previous code in gold tree was stated that you can do that by wrapping the multiple functions multiple methods name around rackets it's not possible anymore you need to use a specific method of go up called serious so we can say gold serious and then we can pass the a and the B and these two tasks will be executed one after another so we called the default task starts a A's finish starts bee-bees finish and the default task is finally finished there's another matter that if we want we want to trigger for example these two at the same time we can check instead of calling the serious method so one after another we can call the parallel method that triggers all those tasks together at once and as you can see from our rapport we trigger the test default and then a ABI automatically triggers themselves at the same time and then we get the output after the a and B are finished and the overall outcome and this is really useful because you can see how the code speeds up or like slows down based on how you write your functions it's really really helpful in order to speed up a lot you're a gold file this was one of the main reasons people started to switch over to web pack or a lot of developers actually use web pack and prefer web pack compared to gold because this web pack is stupid fast compared to gold now with this new convention you can really speed up your things and execute multiple tasks in few milliseconds which is really great so knowing these things why don't we convert all these previous tasks that we have before with the new convention let's do it so first of all let's uncomment the browser sync task let's remove the wrapping of the task of browser sync and that's called DS browser underscore sync and also in this case it's called done and after browser sync is done we Cole D Colbeck done perfect then let's uncomment a style once again and here also let's remove the gold toss style let's call these CSS because makes more sense then let's cancel these parentheses and then at the end of all of these piping that we have here let's hit done and let's remember to pass these done cold back inside the method name perfect then let's uncomment the JavaScript method also here let's delete the last parenthesis let's remove the method name and let's actually name these yes and then done as well and then after all the piping that we have let's call the done method then let's cut these plumbing and let's put it up here that's uncommon the plumbing that we're doing here trigger plumber' and this method is interesting because we don't need a callback we don't need to specify you're done here because we are actually you're returning something so the script the goal file script already knows when this trigger plumber' is finished executing whatever has to execute because it's returning whatever output is coming from a specific method so this is another way of returning a function at the end without specifying a callback function perfect now we're ii declare all our methods and now we can register those method kind of like we were doing before but we can do it in a better way so first of all let specify the gulp task CSS then it's gonna call the CSS method that's it then duplicate this line we're gonna call the jes class perfect and then in the default we're gonna trigger the CSS the J yes awesome let's give it a try shall we so let's try to run gold CSS perfect the CSS was executed correctly if we run gold J yes there we go also the JavaScript task was clear here that if we run the default Kulp both CSS and JavaScript were executed at the same time and let's take a look here it took 50 milliseconds to complete what if instead of parallel we say serious how much time does it take 17 milliseconds so looks like it's better to running in parallel which is fantastic so now we can do exactly the same for the images fonts in HTML so we can comment these out and let's do it all super quickly we can remove this thing the lead to task delete the parentheses and name these respectively images fonts and then HTML so here we could potentially also do the same so create a callback and then call depth specific callback at the end of the execution but also we can potentially just do exactly like we're doing in the trigger plumber' and return that specific method without specifying a callback and this will work so it keeps our code a little bit shorter and now of course we can duplicate this 1 2 3 and let's say this is images and then these is fonts this is this is HTML and also here we can add to the parallel execution also the images the fonts and the HTML so if we trigger the gulp default method now go all these methods have been executed in a parallel way or so all together and the execution took just 100 milliseconds which is super fast so now the last thing that we need to do is actually create the watch and watch the change of all these files and trigger the browser sync method that yes we define here the beginning but we never use it so now it's time to do it so also in this case we can create a function called something like watch underscore files and we can use the building method of gold' called watch in order to actually watch all the files that we want so we can actually literally copy these style watch but we cannot pass the name of the method in a square bracket as a string we need to actually pass as as the name of a variable so the style watch is gonna trigger the CSS and then the GS watch is gonna trigger the GS method and then also here we have another matter called reload and the reload it's actually the browsersync reload so in order to call these method we can simply use the same thing that we were doing here instead of using the gold parallel in this case because we need to wait for the javascript meta to be finished before reloading the page we can do gold serious so one method is gonna get triggered after another and then we can call the reload and then we can specify the final search that is gonna pipe and trigger the notify method and we can remove the last thing perfect so whenever the main mintage is changes a notification will be triggered in our notification area fantastic now we need to trigger this method and in order to trigger a we can simply specify a new task watch and this watch will automatically trigger two tasks one after another so once again we need to use the gold Sirius to trigger one after another and the first one is watch all the files and the second one trigger the browsersync method so we're gonna automatically watch and reload our browser or our HTML whenever we call this watch method so let's give it a try go watch starting to watching starting and watching files and then we got the golden notification that gulp is watching and of course if we access one of our source files and we change something for example here and we just simply save it and we access our terminal automatically the CSS will trigger into just 16 under 16 milliseconds because we didn't write anything of course and also if we trigger something I don't know we just creating our space and then we access the terminal the JavaScript and the browser sync reload were executed one after another for the way we specified our watching of JavaScript and then triggering the J's method and a reload method that's pretty much it we actually now completely refactor our gulp file from version 3 of gold to version 4 and there's some optimization that we can do because gold automatically the gold class or the gold package comes with a lot of things come with tasks B comes with the parallel letters come with a serious it comes with a search and if we don't need to use all the things we were just using a bunch of methods we can just tap those methods so for example if we want instead of requiring full gulp we can declare a constant and inside the constant we can declare a bunch of variables so in our script we're using some things we're using the search then we're using the task then we're using the series then we're using the parallel parallel and let's actually take a look whenever we call gulp so we are gold gold dust gold search gold watch and gold task and parallel and serious perfect so we didn't call the watch and we can import these or actually you can declare these constants by extrapolating this constants from the gold package in this way we're not including the entire gold package in our goal file ogs is gonna be way tighter because we're not importing the symlink the last run the tree vinyl the registry and all the other methods that we're now using and the only thing that we have to do literally we have to remove every time we specify gold so gold dust and then search destination watch serious search toss toss toss task called parallel task bolts here delete we have these methods that have been declared as constant variable directly available for us and of course if we trigger it once again in the terminal close this clean end and we treat a cold parallel is not defined or I guess it's a typo yeah parallel sorry okay let's try again clean these up go there you go on a rarer desk oh the destination so search and dest boom let's try again oh we got a weird error iran images and an enfant in HTML okay so this is the interesting error so since we're using search and we declare it as a constant variable we can now use it as a local scope variable like a scope variable from the for D specific trigger plumber' method this is creating a conflict with our constant variable that we declare that is search so here we should actually replace a weed source like sirs file something like that and then just file yes let's replace this so we can not mistake and we cannot mess this up and if we trigger cope again there we go we don't have any error anymore everything works fine our all execution went down to just 100 milliseconds which is super fast because we lighten up our go file dodged a yes a lot and we're just including all the methods that we're actually using and not the entire goal the package which is kind of heavy and we don't want to use at all and look how clean it is our file this is pretty fantastic so that's pretty much it for this video please let me know in the comments below if you have any other questions about golf or if you want me to do a dedicated serious about goal for in order to create some unique and complicated tasks or if there's something you didn't understand about upgrading from gold tree to go for but other than that is pretty much it for this video thank you guys for watching and until the next one as usual happy coding