Now that we have an understanding of the various steps involved in building and deployment of our website, and also a brief introduction to NPM scripts in the previous lecture, let's take a deep dive into developing NPM scripts for automating many of the tasks that we had talked about earlier. As you saw in the previous lecture, we already have a couple of NPM scripts that we had included in our package.json file, one for starting the lite server and the second one for converting the SCSS code into CSS. In this exercise and the next, we will explore NPM scripts in a bit more detail. To get started, let's first do some housekeeping on the index.html file. Going to the index.html file, we see that we have this JavaScript code at the bottom of this index.html file. I would rather prefer to keep this JavaScript code in a separate file which contains all our scripts, and then include that file into my index.html. To do that, let's create another folder here with the name js. And in this js folder, I'm going to create a new file with the name scripts.js. And going to index.html, I'm going to simply cut this JavaScript code from here and then paste that into the scripts.js file, and then save the changes to scripts.js file. Now that we have moved all our JavaScript code into its own file, I'm going to now include that JavaScript file into my index.html right there. I would say <script src = ''js/scripts.js'' So this way, all my JavaScript code is now included back into my index.html file. This way, my index.html file contains all the html code, and all my CSS and JavaScript code are off in their own separate files. Let me copy this scripts line from the index.html page, and then go to the aboutus.html page, scroll down all the way to the bottom where I've included other scripts and then paste this. Similarly, let me go over to contactus.html page, and again scroll down to the bottom of the file there. Let me paste this line. Let's save the changes and then move on to the next step. The next step that I would like to do is to install a couple of NPM modules that I'm going to make use of for automating some tasks. The first NMP module that I'm going to install is called onchange. This onchange module is going to watch files in my project folder, and then whenever those files change, then it automatically triggers a task to be executed. This way, for example, if I set up a quote unquote watch on some files, say for example my SCSS file, then any time I make changes to my SCSS file, it'll automatically get recompiled into the corresponding CSS file. We already have the script that does the recompilation. So all I need to do is set up a watch on that particular file. Now this is where I'm going to make use of the NPM module called Onchange. There is another NPM model called Watch, which you can also use for the same purpose. In this exercise I'm going to use the Onchange module, then we deal with grant and gulp in the later lessons, we'll use the Watch module for the same purpose. In addition, I'm also going to install another NPM module called parallel shell. This Parallelshell module allows me to execute multiple NPM scripts in Parallelshells as the name implies. So this way, multiple NPM scripts can be simultaneously be executed and enable me to keep watch on various files, and also carry out other tasks. So lets install these two NPM modules. We're going to install them locally in this particular project. So to do that I'll type npm install. I must --save-dev and then I would say onchange and parallelshell and then wait for these two NPM modules to be installed. Once the two modules are installed, then I'm going include a couple of NPM scripts into my package.json file. And I will explain to you the reason as we include those scripts there. Going back to my package.json file, right after this SCSS, I'm going to include another script called ''watch:scss''. And as the name implies, this is going to keep a watch on the SCSS files. So this is where I will invoke the onchange NPM module that I just installed, and then I would say single code 'css/*.scss''. So which means that keeping watch on all the SCSS files that are there in the CSS folder. If any of them change, then you're going to trigger this particular script and the script is ''---npm run scss'' because that's the script that is going to do the recompilation of my SCSS code into the corresponding CSS code. So with this, I have set up a watch for my SCSS. Obviously I can type ''nmp watch:scss''. And then it will trigger the script there with the onchange module, so it will keep a watch on that. If you are doing this exercise on a Windows machine, instead of the single quote in the script, you should be replacing that with the backslash and the double quote. Similarly, the other single quote also replace that with the backslash and the double quote. So, this is how the script will look on a Windows machine. Now, I'm going to make use of the Parallelshell to trigger multiple of these scripts to be simultaneously active. So I would say ''parallelshell'', and then within quotes, I would say 'npm run watch:scss'. So the Parallelshell takes multiple of these as parameters, each one within single quotation marks there. And the second one is 'npm run lite'. So you can see that this Parallelshell allows me to execute two scripts simultaneously, one to keep a watch on my SCSS file, the other one to run the lite shell. If you are doing this exercise on a Windows machine, instead of the single code in the script, you should be replacing that with the backslash and the double quote. Similarly, the other single quote also replace that with the backslash and the double quote. So this is how the script will look on a Windows machine. Now after making these changes, let me save the changes and then I will go up here and then start a script that I have here. I will change that from ''npm run lite'' to ''npm run watch:all''. And save the changes here. So with this, the scripts that I need are now set up. So now, I can go ahead and do ''npm start'' and which will basically start these two scripts simultaneously, one keeping a watch on my SCSS files which in turn will trigger the compilation of the SCSS to CSS, the other one which starts my lite server. Now, I have started under table tab and then moved to the project folder, and then add the prompt. I will type ''npm start''. And this should trigger both my lite server which will save up the files from my confusion folder, and also trigger the Onchange module to keep a watch on the SCSS files. To help illustrate to you how this Onchange keeps a watch on my SCSS files, what I'm going to do is to go to my styles.scss file here, and then I will simply save the file again. Now anytime this file is saved, I'm not going to make any changes to it. I'm just going to hit the save on the file. So any time this file is changed, you'll see that immediately Onchange will trigger the node SAS script to be executed, which will compile the file from SCSS to CSS and creates the CSS file here, and then saves the file which will also trigger my webpage to be reloaded it into the browser. So, this is essentially what we have achieved by using the Onchange module to keep a watch on the files that then changed will trigger some of the NPM scripts automatically. Now, this frees us from the concerns about having to manually trigger these tasks. So for example, if you have a set of tasks that you want to trigger automatically, then certain changes occur. You can easily set up such watch tasks to keep a watch on these changes. Now I have illustrated that with one single example. In my example here, I'm only modifying the CSS files which need to be compiled. But later on, then we work with JavaScript frameworks. You would see that you may want to trigger compilations when various files have changed. And all these can be easily managed using this watch tasks. Will this, we complete this exercise. Here, we have learned how to set up a few more NPM scripts, and automatically trigger some of the scripts by using the onchange NPM module. We also saw the use of the parallel shell module to execute multiple NPM scripts simultaneously in our terminal Window. This is a good point for you to do a Git comment with the message ''NPM Scripts Part 1''.
