1
00:00:03,660 --> 00:00:07,550
As a first approach to automating our tasks,

2
00:00:07,550 --> 00:00:12,515
let's look at the example of using NPM scripts.

3
00:00:12,515 --> 00:00:22,015
Indeed, we had already started using NPM scripts in this course in the earlier lessons.

4
00:00:22,015 --> 00:00:29,220
Let's quickly revisit our package.json file to see how we have used a couple of

5
00:00:29,220 --> 00:00:36,755
NPM scripts in our package.json file to automate a couple of tasks.

6
00:00:36,755 --> 00:00:40,310
Taking a look at our package.json file,

7
00:00:40,310 --> 00:00:42,960
you see that in the package.json file,

8
00:00:42,960 --> 00:00:47,650
we had this JSON object called scripts.

9
00:00:47,650 --> 00:00:55,065
Inside the scripts, we had this property called start that we defined here which we

10
00:00:55,065 --> 00:01:03,945
specified as NPM run lite and also we specified this lite as lite-server.

11
00:01:03,945 --> 00:01:07,825
So, then you start up your web development.

12
00:01:07,825 --> 00:01:15,240
We also started up our lite-server by typing on NPM start at the prompt.

13
00:01:15,240 --> 00:01:19,860
Now, what this enabled us is to start up the lite-server in

14
00:01:19,860 --> 00:01:25,715
our project directory and start saving up the files from the directory,

15
00:01:25,715 --> 00:01:28,410
so that we can view it in a browser.

16
00:01:28,410 --> 00:01:33,800
We found this to be a useful approach to be able to watch live

17
00:01:33,800 --> 00:01:43,305
the changes that we make to our files being reflected immediately in the browser.

18
00:01:43,305 --> 00:01:51,195
Now, in other tasks that we configured and used in the previous lesson was SCSS,

19
00:01:51,195 --> 00:01:58,520
which is used for transforming the SCSS code into the corresponding CSS code.

20
00:01:58,520 --> 00:02:08,235
So, we wrote this quote unquote NPM script called as SCSS which executed the node sass

21
00:02:08,235 --> 00:02:13,035
by looking for the SCSS files

22
00:02:13,035 --> 00:02:19,050
in the CSS folder and then transforming them into the corresponding CSS code.

23
00:02:19,050 --> 00:02:20,760
And to execute this,

24
00:02:20,760 --> 00:02:25,920
we typed NPM run SCSS at the command prompt.

25
00:02:25,920 --> 00:02:30,710
So, we've already see that we have used a couple of

26
00:02:30,710 --> 00:02:39,120
NPM scripts to automate some tasks during our web development.

27
00:02:39,120 --> 00:02:43,360
So to summarize, NPM scripts are supported through

28
00:02:43,360 --> 00:02:49,930
this scripts property in the package.json file as we have seen in the example earlier.

29
00:02:49,930 --> 00:02:52,370
There are several scripts that are supported.

30
00:02:52,370 --> 00:02:57,270
One in particular that is of interest to us is the start-script,

31
00:02:57,270 --> 00:03:00,790
so that you can add the prompt type NPM start,

32
00:03:00,790 --> 00:03:06,320
and then the corresponding script referred to by the start, will be started.

33
00:03:06,320 --> 00:03:10,275
Now, we can define arbitrary scripts in

34
00:03:10,275 --> 00:03:16,710
the scripts property and then run them by saying NPM run and the name of the script,

35
00:03:16,710 --> 00:03:22,165
as you saw the use of NPM run SCSS or NPM run lite and so on.

36
00:03:22,165 --> 00:03:28,790
We are going to leverage this to be able to develop a few additional scripts that will

37
00:03:28,790 --> 00:03:35,935
automate a lot of those tasks that we talked about in the previous lecture.

38
00:03:35,935 --> 00:03:40,890
So, to help us understand how we can leverage NPM scripts to

39
00:03:40,890 --> 00:03:45,730
automate a lot of our web development tasks,

40
00:03:45,730 --> 00:03:50,630
we will learn how to configure the NPM scripts in the package.json file,

41
00:03:50,630 --> 00:03:53,000
and then execute the scripts,

42
00:03:53,000 --> 00:03:56,850
sometimes automatically or sometimes manually invoke

43
00:03:56,850 --> 00:04:02,670
the scripts in order to do the building and deployment of our website.