1
00:00:03,510 --> 00:00:07,990
Now that we have an understanding of

2
00:00:07,990 --> 00:00:12,965
the various steps involved in building and deployment of our website,

3
00:00:12,965 --> 00:00:18,690
and also a brief introduction to NPM scripts in the previous lecture,

4
00:00:18,690 --> 00:00:22,830
let's take a deep dive into developing

5
00:00:22,830 --> 00:00:28,755
NPM scripts for automating many of the tasks that we had talked about earlier.

6
00:00:28,755 --> 00:00:31,350
As you saw in the previous lecture,

7
00:00:31,350 --> 00:00:38,760
we already have a couple of NPM scripts that we had included in our package.json file,

8
00:00:38,760 --> 00:00:41,735
one for starting the lite server and the second one

9
00:00:41,735 --> 00:00:46,240
for converting the SCSS code into CSS.

10
00:00:46,240 --> 00:00:49,755
In this exercise and the next,

11
00:00:49,755 --> 00:00:53,055
we will explore NPM scripts in a bit more detail.

12
00:00:53,055 --> 00:01:00,810
To get started, let's first do some housekeeping on the index.html file.

13
00:01:00,810 --> 00:01:03,095
Going to the index.html file,

14
00:01:03,095 --> 00:01:09,325
we see that we have this JavaScript code at the bottom of this index.html file.

15
00:01:09,325 --> 00:01:12,930
I would rather prefer to keep this JavaScript code in

16
00:01:12,930 --> 00:01:19,385
a separate file which contains all our scripts,

17
00:01:19,385 --> 00:01:23,015
and then include that file into my index.html.

18
00:01:23,015 --> 00:01:31,155
To do that, let's create another folder here with the name js.

19
00:01:31,155 --> 00:01:34,210
And in this js folder,

20
00:01:34,210 --> 00:01:41,520
I'm going to create a new file with the name scripts.js.

21
00:01:42,120 --> 00:01:49,060
And going to index.html,

22
00:01:49,060 --> 00:01:54,890
I'm going to simply cut this JavaScript code from here and

23
00:01:54,890 --> 00:02:01,120
then paste that into the scripts.js file,

24
00:02:01,120 --> 00:02:05,305
and then save the changes to scripts.js file.

25
00:02:05,305 --> 00:02:10,915
Now that we have moved all our JavaScript code into its own file,

26
00:02:10,915 --> 00:02:20,430
I'm going to now include that JavaScript file into my index.html right there.

27
00:02:20,430 --> 00:02:24,540
I would say <script src =

28
00:02:24,540 --> 00:02:31,040
''js/scripts.js'' So this way,

29
00:02:31,040 --> 00:02:35,005
all my JavaScript code is now included back into my index.html file.

30
00:02:35,005 --> 00:02:40,390
This way, my index.html file contains all the html code,

31
00:02:40,390 --> 00:02:46,345
and all my CSS and JavaScript code are off in their own separate files.

32
00:02:46,345 --> 00:02:52,590
Let me copy this scripts line from the index.html page,

33
00:02:52,590 --> 00:02:56,330
and then go to the aboutus.html page,

34
00:02:56,330 --> 00:02:59,365
scroll down all the way to the bottom where I've included

35
00:02:59,365 --> 00:03:02,540
other scripts and then paste this.

36
00:03:02,540 --> 00:03:07,405
Similarly, let me go over to contactus.html page,

37
00:03:07,405 --> 00:03:11,545
and again scroll down to the bottom of the file there.

38
00:03:11,545 --> 00:03:13,975
Let me paste this line.

39
00:03:13,975 --> 00:03:18,205
Let's save the changes and then move on to the next step.

40
00:03:18,205 --> 00:03:23,075
The next step that I would like to do is to install a couple of

41
00:03:23,075 --> 00:03:29,905
NPM modules that I'm going to make use of for automating some tasks.

42
00:03:29,905 --> 00:03:34,310
The first NMP module that I'm going to install is called onchange.

43
00:03:34,310 --> 00:03:42,335
This onchange module is going to watch files in my project folder,

44
00:03:42,335 --> 00:03:44,445
and then whenever those files change,

45
00:03:44,445 --> 00:03:48,865
then it automatically triggers a task to be executed.

46
00:03:48,865 --> 00:03:50,660
This way, for example,

47
00:03:50,660 --> 00:03:56,860
if I set up a quote unquote watch on some files,

48
00:03:56,860 --> 00:03:59,305
say for example my SCSS file,

49
00:03:59,305 --> 00:04:02,270
then any time I make changes to my SCSS file,

50
00:04:02,270 --> 00:04:07,220
it'll automatically get recompiled into the corresponding CSS file.

51
00:04:07,220 --> 00:04:11,565
We already have the script that does the recompilation.

52
00:04:11,565 --> 00:04:16,080
So all I need to do is set up a watch on that particular file.

53
00:04:16,080 --> 00:04:20,675
Now this is where I'm going to make use of the NPM module called Onchange.

54
00:04:20,675 --> 00:04:23,170
There is another NPM model called Watch,

55
00:04:23,170 --> 00:04:25,945
which you can also use for the same purpose.

56
00:04:25,945 --> 00:04:29,240
In this exercise I'm going to use the Onchange module,

57
00:04:29,240 --> 00:04:34,765
then we deal with grant and gulp in the later lessons,

58
00:04:34,765 --> 00:04:37,580
we'll use the Watch module for the same purpose.

59
00:04:37,580 --> 00:04:42,845
In addition, I'm also going to install another NPM module called parallel shell.

60
00:04:42,845 --> 00:04:46,250
This Parallelshell module allows me to execute

61
00:04:46,250 --> 00:04:51,320
multiple NPM scripts in Parallelshells as the name implies.

62
00:04:51,320 --> 00:04:55,095
So this way, multiple NPM scripts can be simultaneously be

63
00:04:55,095 --> 00:04:59,785
executed and enable me to keep watch on various files,

64
00:04:59,785 --> 00:05:03,835
and also carry out other tasks.

65
00:05:03,835 --> 00:05:06,340
So lets install these two NPM modules.

66
00:05:06,340 --> 00:05:09,645
We're going to install them locally in this particular project.

67
00:05:09,645 --> 00:05:14,555
So to do that I'll type npm install.

68
00:05:14,555 --> 00:05:20,420
I must --save-dev and then I would say onchange

69
00:05:20,420 --> 00:05:27,540
and parallelshell and then wait for these two NPM modules to be installed.

70
00:05:27,540 --> 00:05:29,755
Once the two modules are installed,

71
00:05:29,755 --> 00:05:35,745
then I'm going include a couple of NPM scripts into my package.json file.

72
00:05:35,745 --> 00:05:40,930
And I will explain to you the reason as we include those scripts there.

73
00:05:40,930 --> 00:05:43,650
Going back to my package.json file,

74
00:05:43,650 --> 00:05:46,270
right after this SCSS,

75
00:05:46,270 --> 00:05:52,565
I'm going to include another script called ''watch:scss''.

76
00:05:52,565 --> 00:05:55,125
And as the name implies,

77
00:05:55,125 --> 00:05:59,290
this is going to keep a watch on the SCSS files.

78
00:05:59,290 --> 00:06:07,435
So this is where I will invoke the onchange NPM module that I just installed,

79
00:06:07,435 --> 00:06:12,610
and then I would say single code 'css/*.scss''.

80
00:06:13,960 --> 00:06:20,465
So which means that keeping watch on all the SCSS files that are there in the CSS folder.

81
00:06:20,465 --> 00:06:22,095
If any of them change,

82
00:06:22,095 --> 00:06:29,535
then you're going to trigger this particular script and the script is ''---npm

83
00:06:29,535 --> 00:06:35,915
run scss'' because that's the script that

84
00:06:35,915 --> 00:06:42,380
is going to do the recompilation of my SCSS code into the corresponding CSS code.

85
00:06:42,380 --> 00:06:46,075
So with this, I have set up a watch for my SCSS.

86
00:06:46,075 --> 00:06:49,160
Obviously I can type ''nmp watch:scss''.

87
00:06:49,160 --> 00:06:56,700
And then it will trigger the script there with the onchange module,

88
00:06:56,700 --> 00:06:58,690
so it will keep a watch on that.

89
00:06:58,690 --> 00:07:02,960
If you are doing this exercise on a Windows machine,

90
00:07:02,960 --> 00:07:06,345
instead of the single quote in the script,

91
00:07:06,345 --> 00:07:10,760
you should be replacing that with the backslash and the double quote.

92
00:07:10,760 --> 00:07:13,660
Similarly, the other single quote

93
00:07:13,660 --> 00:07:16,490
also replace that with the backslash and the double quote.

94
00:07:16,490 --> 00:07:22,770
So, this is how the script will look on a Windows machine.

95
00:07:22,770 --> 00:07:28,385
Now, I'm going to make use of the Parallelshell

96
00:07:28,385 --> 00:07:35,765
to trigger multiple of these scripts to be simultaneously active.

97
00:07:35,765 --> 00:07:39,670
So I would say ''parallelshell'',

98
00:07:39,990 --> 00:07:42,660
and then within quotes,

99
00:07:42,660 --> 00:07:49,150
I would say 'npm run watch:scss'.

100
00:07:49,590 --> 00:07:55,605
So the Parallelshell takes multiple of these as parameters,

101
00:07:55,605 --> 00:07:58,380
each one within single quotation marks there.

102
00:07:58,380 --> 00:08:05,380
And the second one is 'npm run lite'.

103
00:08:05,550 --> 00:08:11,630
So you can see that this Parallelshell allows me to execute two scripts simultaneously,

104
00:08:11,630 --> 00:08:14,370
one to keep a watch on my SCSS file,

105
00:08:14,370 --> 00:08:17,745
the other one to run the lite shell.

106
00:08:17,745 --> 00:08:21,840
If you are doing this exercise on a Windows machine,

107
00:08:21,840 --> 00:08:25,245
instead of the single code in the script,

108
00:08:25,245 --> 00:08:29,665
you should be replacing that with the backslash and the double quote.

109
00:08:29,665 --> 00:08:32,560
Similarly, the other single quote

110
00:08:32,560 --> 00:08:35,390
also replace that with the backslash and the double quote.

111
00:08:35,390 --> 00:08:41,685
So this is how the script will look on a Windows machine.

112
00:08:41,685 --> 00:08:44,335
Now after making these changes,

113
00:08:44,335 --> 00:08:48,160
let me save the changes and then I will go up

114
00:08:48,160 --> 00:08:52,890
here and then start a script that I have here.

115
00:08:52,890 --> 00:08:59,480
I will change that from ''npm run lite'' to ''npm run watch:all''.

116
00:09:01,950 --> 00:09:05,145
And save the changes here.

117
00:09:05,145 --> 00:09:10,460
So with this, the scripts that I need are now set up.

118
00:09:10,460 --> 00:09:15,745
So now, I can go ahead and do

119
00:09:15,745 --> 00:09:21,124
''npm start'' and which will basically start these two scripts simultaneously,

120
00:09:21,124 --> 00:09:24,850
one keeping a watch on my SCSS files which in turn will

121
00:09:24,850 --> 00:09:28,825
trigger the compilation of the SCSS to CSS,

122
00:09:28,825 --> 00:09:32,150
the other one which starts my lite server.

123
00:09:32,150 --> 00:09:41,125
Now, I have started under table tab and then moved to the project folder,

124
00:09:41,125 --> 00:09:42,665
and then add the prompt.

125
00:09:42,665 --> 00:09:44,705
I will type ''npm start''.

126
00:09:44,705 --> 00:09:46,585
And this should trigger

127
00:09:46,585 --> 00:09:54,435
both my lite server which will save up the files from my confusion folder,

128
00:09:54,435 --> 00:10:02,290
and also trigger the Onchange module to keep a watch on the SCSS files.

129
00:10:02,290 --> 00:10:09,100
To help illustrate to you how this Onchange keeps a watch on my SCSS files,

130
00:10:09,100 --> 00:10:14,705
what I'm going to do is to go to my styles.scss file here,

131
00:10:14,705 --> 00:10:18,675
and then I will simply save the file again.

132
00:10:18,675 --> 00:10:20,860
Now anytime this file is saved,

133
00:10:20,860 --> 00:10:22,620
I'm not going to make any changes to it.

134
00:10:22,620 --> 00:10:25,755
I'm just going to hit the save on the file.

135
00:10:25,755 --> 00:10:27,840
So any time this file is changed,

136
00:10:27,840 --> 00:10:30,620
you'll see that immediately

137
00:10:32,750 --> 00:10:40,495
Onchange will trigger the node SAS script to be executed,

138
00:10:40,495 --> 00:10:47,555
which will compile the file from SCSS to CSS and creates the CSS file here,

139
00:10:47,555 --> 00:10:50,335
and then saves the file which will also trigger

140
00:10:50,335 --> 00:10:55,450
my webpage to be reloaded it into the browser.

141
00:10:55,450 --> 00:11:03,285
So, this is essentially what we have achieved by using the Onchange module to keep

142
00:11:03,285 --> 00:11:07,660
a watch on the files that then changed

143
00:11:07,660 --> 00:11:12,395
will trigger some of the NPM scripts automatically.

144
00:11:12,395 --> 00:11:20,790
Now, this frees us from the concerns about having to manually trigger these tasks.

145
00:11:20,790 --> 00:11:25,390
So for example, if you have a set of tasks that you want to trigger automatically,

146
00:11:25,390 --> 00:11:27,395
then certain changes occur.

147
00:11:27,395 --> 00:11:35,100
You can easily set up such watch tasks to keep a watch on these changes.

148
00:11:35,100 --> 00:11:37,785
Now I have illustrated that with one single example.

149
00:11:37,785 --> 00:11:39,985
In my example here,

150
00:11:39,985 --> 00:11:45,260
I'm only modifying the CSS files which need to be compiled.

151
00:11:45,260 --> 00:11:50,125
But later on, then we work with JavaScript frameworks.

152
00:11:50,125 --> 00:11:57,335
You would see that you may want to trigger compilations when various files have changed.

153
00:11:57,335 --> 00:12:02,964
And all these can be easily managed using this watch tasks.

154
00:12:02,964 --> 00:12:07,560
Will this, we complete this exercise.

155
00:12:07,560 --> 00:12:13,685
Here, we have learned how to set up a few more NPM scripts,

156
00:12:13,685 --> 00:12:20,855
and automatically trigger some of the scripts by using the onchange NPM module.

157
00:12:20,855 --> 00:12:24,550
We also saw the use of the parallel shell module to execute

158
00:12:24,550 --> 00:12:32,050
multiple NPM scripts simultaneously in our terminal Window.

159
00:12:32,200 --> 00:12:42,890
This is a good point for you to do a Git comment with the message ''NPM Scripts Part 1''.