1
00:00:03,510 --> 00:00:07,990
Bây giờ chúng ta có một sự hiểu biết về

2
00:00:07,990 --> 00:00:12,965
các bước khác nhau liên quan đến việc xây dựng và triển khai trang web của chúng tôi,

3
00:00:12,965 --> 00:00:18,690
và cũng là một giới thiệu ngắn gọn về các kịch bản NPM trong bài giảng trước đó, chúng ta

4
00:00:18,690 --> 00:00:22,830
hãy đi sâu vào việc phát triển

5
00:00:22,830 --> 00:00:28,755
các kịch bản NPM để tự động hóa nhiều nhiệm vụ mà chúng tôi đã nói về trước đó.

6
00:00:28,755 --> 00:00:31,350
Như bạn đã thấy trong bài giảng trước,

7
00:00:31,350 --> 00:00:38,760
chúng tôi đã có một vài kịch bản NPM mà chúng tôi đã bao gồm trong tập tin package.json của chúng tôi,

8
00:00:38,760 --> 00:00:41,735
một để khởi động máy chủ lite và thứ hai

9
00:00:41,735 --> 00:00:46,240
để chuyển đổi mã SCSS thành CSS.

10
00:00:46,240 --> 00:00:49,755
Trong bài tập này và tiếp theo,

11
00:00:49,755 --> 00:00:53,055
chúng ta sẽ khám phá các kịch bản NPM một cách chi tiết hơn một chút.

12
00:00:53,055 --> 00:01:00,810
Để bắt đầu, trước tiên chúng ta hãy thực hiện một số dịch vụ dọn dẹp trên tệp index.html.

13
00:01:00,810 --> 00:01:03,095
Đi đến tập tin index.html,

14
00:01:03,095 --> 00:01:09,325
chúng ta thấy rằng chúng ta có mã JavaScript này ở dưới cùng của tập tin index.html này.

15
00:01:09,325 --> 00:01:12,930
Tôi muốn giữ mã JavaScript này trong

16
00:01:12,930 --> 00:01:19,385
một tập tin riêng biệt chứa tất cả các kịch bản của chúng tôi,

17
00:01:19,385 --> 00:01:23,015
và sau đó bao gồm tập tin đó vào index.html của tôi.

18
00:01:23,015 --> 00:01:31,155
Để làm điều đó, chúng ta hãy tạo một thư mục khác ở đây với tên js.

19
00:01:31,155 --> 00:01:34,210
Và trong thư mục js này,

20
00:01:34,210 --> 00:01:41,520
tôi sẽ tạo ra một tập tin mới với tên scripts.js.

21
00:01:42,120 --> 00:01:49,060
Và đi đến index.html,

22
00:01:49,060 --> 00:01:54,890
tôi sẽ chỉ đơn giản là cắt mã JavaScript này từ đây và

23
00:01:54,890 --> 00:02:01,120
sau đó dán vào tệp scripts.js,

24
00:02:01,120 --> 00:02:05,305
và sau đó lưu các thay đổi vào tệp scripts.js.

25
00:02:05,305 --> 00:02:10,915
Bây giờ chúng tôi đã di chuyển tất cả các mã JavaScript của chúng tôi vào tập tin riêng của nó,

26
00:02:10,915 --> 00:02:20,430
bây giờ tôi sẽ bao gồm các tập tin JavaScript đó vào index.html của tôi ngay tại đó.

27
00:02:20,430 --> 00:02:24,540
Tôi sẽ nói <script src =

28
00:02:24,540 --> 00:02:31,040
“js/scripts.js” Vì vậy, theo cách này,

29
00:02:31,040 --> 00:02:35,005
tất cả các mã JavaScript của tôi bây giờ được bao gồm trở lại vào tập tin index.html của tôi.

30
00:02:35,005 --> 00:02:40,390
Bằng cách này, tập tin index.html của tôi chứa tất cả các mã html,

31
00:02:40,390 --> 00:02:46,345
và tất cả các mã CSS và JavaScript của tôi được tắt trong các tập tin riêng biệt của họ.

32
00:02:46,345 --> 00:02:52,590
Hãy để tôi sao chép dòng kịch bản này từ trang index.html,

33
00:02:52,590 --> 00:02:56,330
và sau đó đi đến trang aboutus.html,

34
00:02:56,330 --> 00:02:59,365
cuộn xuống tất cả các cách để dưới cùng nơi tôi đã bao gồm

35
00:02:59,365 --> 00:03:02,540
các kịch bản khác và sau đó dán này.

36
00:03:02,540 --> 00:03:07,405
Tương tự như vậy, hãy để tôi đi qua trang contactus.html,

37
00:03:07,405 --> 00:03:11,545
và một lần nữa cuộn xuống dưới cùng của tập tin ở đó.

38
00:03:11,545 --> 00:03:13,975
Để tôi dán dòng này.

39
00:03:13,975 --> 00:03:18,205
Hãy lưu các thay đổi và sau đó chuyển sang bước tiếp theo.

40
00:03:18,205 --> 00:03:23,075
Bước tiếp theo mà tôi muốn làm là cài đặt một vài

41
00:03:23,075 --> 00:03:29,905
mô-đun NPM mà tôi sẽ sử dụng để tự động hóa một số tác vụ.

42
00:03:29,905 --> 00:03:34,310
Mô-đun NMP đầu tiên mà tôi sẽ cài đặt được gọi là onchange.

43
00:03:34,310 --> 00:03:42,335
Module onchange này sẽ xem các tập tin trong thư mục dự án của tôi,

44
00:03:42,335 --> 00:03:44,445
và sau đó bất cứ khi nào những tập tin thay đổi,

45
00:03:44,445 --> 00:03:48,865
sau đó nó sẽ tự động kích hoạt một nhiệm vụ được thực hiện.

46
00:03:48,865 --> 00:03:50,660
Bằng cách này, ví dụ,

47
00:03:50,660 --> 00:03:56,860
nếu tôi thiết lập một dấu ngoặc kép đồng hồ trên một số tập tin,

48
00:03:56,860 --> 00:03:59,305
ví dụ như tập tin SCSS của tôi,

49
00:03:59,305 --> 00:04:02,270
sau đó bất cứ khi nào tôi thực hiện thay đổi cho tập tin SCSS của tôi,

50
00:04:02,270 --> 00:04:07,220
nó sẽ tự động được biên dịch lại vào tập tin CSS tương ứng.

51
00:04:07,220 --> 00:04:11,565
Chúng tôi đã có kịch bản thực hiện việc biên soạn lại.

52
00:04:11,565 --> 00:04:16,080
Vì vậy, tất cả những gì tôi cần làm là thiết lập một chiếc đồng hồ trên tập tin cụ thể đó.

53
00:04:16,080 --> 00:04:20,675
Bây giờ đây là nơi tôi sẽ sử dụng mô-đun NPM gọi là Onchange.

54
00:04:20,675 --> 00:04:23,170
Có một mô hình NPM khác được gọi là Watch,

55
00:04:23,170 --> 00:04:25,945
mà bạn cũng có thể sử dụng cho cùng một mục đích.

56
00:04:25,945 --> 00:04:29,240
Trong bài tập này, tôi sẽ sử dụng mô-đun Onchange,

57
00:04:29,240 --> 00:04:34,765
sau đó chúng tôi đối phó với cấp và gulp trong các bài học sau,

58
00:04:34,765 --> 00:04:37,580
chúng tôi sẽ sử dụng mô-đun Watch cho cùng một mục đích.

59
00:04:37,580 --> 00:04:42,845
Ngoài ra, tôi cũng sẽ cài đặt một mô-đun NPM khác gọi là shell song song.

60
00:04:42,845 --> 00:04:46,250
Mô-đun Parallelshell này cho phép tôi thực hiện

61
00:04:46,250 --> 00:04:51,320
nhiều kịch bản NPM trong Parallelshells như tên gọi của nó.

62
00:04:51,320 --> 00:04:55,095
Vì vậy, theo cách này, nhiều kịch bản NPM có thể được

63
00:04:55,095 --> 00:04:59,785
thực hiện đồng thời và cho phép tôi theo dõi trên các tập tin khác nhau,

64
00:04:59,785 --> 00:05:03,835
và cũng thực hiện các nhiệm vụ khác.

65
00:05:03,835 --> 00:05:06,340
Vì vậy, cho phép cài đặt hai mô-đun NPM này.

66
00:05:06,340 --> 00:05:09,645
Chúng tôi sẽ cài đặt chúng tại địa phương trong dự án cụ thể này.

67
00:05:09,645 --> 00:05:14,555
Vì vậy, để làm điều đó tôi sẽ gõ npm cài đặt.

68
00:05:14,555 --> 00:05:20,420
Tôi phải —save-dev và sau đó tôi sẽ nói onchange

69
00:05:20,420 --> 00:05:27,540
và parallelshell và sau đó chờ đợi cho hai mô-đun NPM được cài đặt.

70
00:05:27,540 --> 00:05:29,755
Một khi hai mô-đun được cài đặt,

71
00:05:29,755 --> 00:05:35,745
sau đó tôi sẽ bao gồm một vài kịch bản NPM vào tập tin package.json của tôi.

72
00:05:35,745 --> 00:05:40,930
Và tôi sẽ giải thích cho bạn lý do khi chúng tôi đưa vào những kịch bản đó.

73
00:05:40,930 --> 00:05:43,650
Quay trở lại tập tin package.json của tôi,

74
00:05:43,650 --> 00:05:46,270
ngay sau khi SCSS này,

75
00:05:46,270 --> 00:05:52,565
tôi sẽ bao gồm một kịch bản được gọi là “watch:scss”.

76
00:05:52,565 --> 00:05:55,125
Và như tên của nó,

77
00:05:55,125 --> 00:05:59,290
điều này sẽ giữ một chiếc đồng hồ trên các tập tin SCSS.

78
00:05:59,290 --> 00:06:07,435
Vì vậy, đây là nơi tôi sẽ gọi mô-đun NPM onchange mà tôi vừa cài đặt,

79
00:06:07,435 --> 00:06:12,610
và sau đó tôi sẽ nói mã đơn 'css/*.scss”.

80
00:06:13,960 --> 00:06:20,465
Vì vậy, điều đó có nghĩa là giữ xem trên tất cả các tập tin SCSS có trong thư mục CSS.

81
00:06:20,465 --> 00:06:22,095
Nếu bất kỳ trong số họ thay đổi,

82
00:06:22,095 --> 00:06:29,535
sau đó bạn sẽ kích hoạt kịch bản cụ thể này và kịch bản là “—npm

83
00:06:29,535 --> 00:06:35,915
chạy scss” bởi vì đó

84
00:06:35,915 --> 00:06:42,380
là kịch bản sẽ làm biên dịch lại mã SCSS của tôi vào mã CSS tương ứng.

85
00:06:42,380 --> 00:06:46,075
Vì vậy, với điều này, tôi đã thiết lập một chiếc đồng hồ cho SCSS của tôi.

86
00:06:46,075 --> 00:06:49,160
Rõ ràng là tôi có thể gõ “nmp watch:scss”.

87
00:06:49,160 --> 00:06:56,700
Và sau đó nó sẽ kích hoạt kịch bản có với module onchange,

88
00:06:56,700 --> 00:06:58,690
vì vậy nó sẽ giữ một chiếc đồng hồ trên đó.

89
00:06:58,690 --> 00:07:02,960
Nếu bạn đang thực hiện bài tập này trên một máy Windows,

90
00:07:02,960 --> 00:07:06,345
thay vì trích dẫn duy nhất trong kịch bản,

91
00:07:06,345 --> 00:07:10,760
bạn nên thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.

92
00:07:10,760 --> 00:07:13,660
Tương tự như vậy, dấu ngoặc đơn khác

93
00:07:13,660 --> 00:07:16,490
cũng thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.

94
00:07:16,490 --> 00:07:22,770
Vì vậy, đây là cách kịch bản sẽ nhìn trên một máy Windows.

95
00:07:22,770 --> 00:07:28,385
Bây giờ, tôi sẽ sử dụng Parallelshell

96
00:07:28,385 --> 00:07:35,765
để kích hoạt nhiều kịch bản này đồng thời hoạt động.

97
00:07:35,765 --> 00:07:39,670
Vì vậy, tôi sẽ nói “parallelshell”,

98
00:07:39,990 --> 00:07:42,660
và sau đó trong dấu ngoặc kép,

99
00:07:42,660 --> 00:07:49,150
tôi sẽ nói 'npm run watch:scss'.

100
00:07:49,590 --> 00:07:55,605
Vì vậy, Parallelshell lấy nhiều trong số này làm tham số,

101
00:07:55,605 --> 00:07:58,380
mỗi tham số trong dấu ngoặc kép duy nhất ở đó.

102
00:07:58,380 --> 00:08:05,380
Và thứ hai là 'npm chạy lite'.

103
00:08:05,550 --> 00:08:11,630
Vì vậy, bạn có thể thấy rằng Parallelshell này cho phép tôi thực hiện hai kịch bản cùng

104
00:08:11,630 --> 00:08:14,370
một lúc, một để giữ một chiếc đồng hồ trên tập tin SCSS của tôi,

105
00:08:14,370 --> 00:08:17,745
một trong những khác để chạy các lite shell.

106
00:08:17,745 --> 00:08:21,840
Nếu bạn đang thực hiện bài tập này trên một máy Windows,

107
00:08:21,840 --> 00:08:25,245
thay vì mã duy nhất trong kịch bản,

108
00:08:25,245 --> 00:08:29,665
bạn nên thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.

109
00:08:29,665 --> 00:08:32,560
Tương tự như vậy, dấu ngoặc đơn khác

110
00:08:32,560 --> 00:08:35,390
cũng thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.

111
00:08:35,390 --> 00:08:41,685
Vì vậy, đây là cách kịch bản sẽ nhìn trên một máy Windows.

112
00:08:41,685 --> 00:08:44,335
Bây giờ sau khi thực hiện những thay đổi này,

113
00:08:44,335 --> 00:08:48,160
hãy để tôi lưu các thay đổi và sau đó tôi sẽ đi lên

114
00:08:48,160 --> 00:08:52,890
đây và sau đó bắt đầu một kịch bản mà tôi có ở đây.

115
00:08:52,890 --> 00:08:59,480
Tôi sẽ thay đổi điều đó từ “npm run lite” để “npm run watch:all”.

116
00:09:01,950 --> 00:09:05,145
Và lưu các thay đổi ở đây.

117
00:09:05,145 --> 00:09:10,460
Vì vậy, với điều này, các kịch bản mà tôi cần bây giờ được thiết lập.

118
00:09:10,460 --> 00:09:15,745
Vì vậy, bây giờ, tôi có thể đi trước và làm

119
00:09:15,745 --> 00:09:21,124
“npm bắt đầu” và mà về cơ bản sẽ bắt đầu hai kịch bản này cùng

120
00:09:21,124 --> 00:09:24,850
một lúc, một giữ một chiếc đồng hồ trên các tập tin SCSS của tôi mà lần lượt sẽ

121
00:09:24,850 --> 00:09:28,825
kích hoạt việc biên soạn của SCSS để CSS,

122
00:09:28,825 --> 00:09:32,150
một trong đó bắt đầu máy chủ lite của tôi.

123
00:09:32,150 --> 00:09:41,125
Bây giờ, tôi đã bắt đầu dưới tab bảng và sau đó chuyển đến thư mục dự án,

124
00:09:41,125 --> 00:09:42,665
và sau đó thêm dấu nhắc.

125
00:09:42,665 --> 00:09:44,705
Tôi sẽ gõ “npm start”.

126
00:09:44,705 --> 00:09:46,585
Và điều này sẽ kích hoạt

127
00:09:46,585 --> 00:09:54,435
cả máy chủ lite của tôi mà sẽ lưu lên các tập tin từ thư mục nhầm lẫn của tôi,

128
00:09:54,435 --> 00:10:02,290
và cũng kích hoạt các mô-đun Onchange để giữ một chiếc đồng hồ trên các tập tin SCSS.

129
00:10:02,290 --> 00:10:09,100
Để giúp minh họa cho bạn làm thế nào Onchange này giữ một chiếc đồng hồ trên các tập tin SCSS của tôi,

130
00:10:09,100 --> 00:10:14,705
những gì tôi sẽ làm là đi đến tập tin styles.scss của tôi ở đây,

131
00:10:14,705 --> 00:10:18,675
và sau đó tôi sẽ chỉ đơn giản là lưu các tập tin một lần nữa.

132
00:10:18,675 --> 00:10:20,860
Bây giờ bất cứ khi nào tập tin này được lưu,

133
00:10:20,860 --> 00:10:22,620
tôi sẽ không thực hiện bất kỳ thay đổi nào đối với nó.

134
00:10:22,620 --> 00:10:25,755
Tôi sẽ chỉ nhấn lưu trên tập tin.

135
00:10:25,755 --> 00:10:27,840
Vì vậy, bất cứ khi nào tập tin này được thay đổi,

136
00:10:27,840 --> 00:10:30,620
bạn sẽ thấy rằng ngay lập tức

137
00:10:32,750 --> 00:10:40,495
Onchange sẽ kích hoạt các nút SAS script để được thực hiện,

138
00:10:40,495 --> 00:10:47,555
mà sẽ biên dịch các tập tin từ SCSS để CSS và tạo ra các tập tin CSS ở đây,

139
00:10:47,555 --> 00:10:50,335
và sau đó lưu các tập tin mà cũng sẽ kích hoạt

140
00:10:50,335 --> 00:10:55,450
trang web của tôi để được tải lại nó vào trình duyệt.

141
00:10:55,450 --> 00:11:03,285
Vì vậy, điều này về cơ bản là những gì chúng tôi đã đạt được bằng cách sử dụng mô-đun Onchange để giữ

142
00:11:03,285 --> 00:11:07,660
một chiếc đồng hồ trên các tập tin mà sau đó thay đổi

143
00:11:07,660 --> 00:11:12,395
sẽ kích hoạt một số kịch bản NPM tự động.

144
00:11:12,395 --> 00:11:20,790
Bây giờ, điều này giải phóng chúng ta khỏi những lo ngại về việc phải tự kích hoạt các nhiệm vụ này.

145
00:11:20,790 --> 00:11:25,390
Vì vậy, ví dụ, nếu bạn có một tập hợp các tác vụ mà bạn muốn kích hoạt tự động,

146
00:11:25,390 --> 00:11:27,395
sau đó một số thay đổi xảy ra.

147
00:11:27,395 --> 00:11:35,100
Bạn có thể dễ dàng thiết lập nhiệm vụ xem như vậy để giữ một chiếc đồng hồ trên những thay đổi này.

148
00:11:35,100 --> 00:11:37,785
Bây giờ tôi đã minh họa điều đó với một ví dụ duy nhất.

149
00:11:37,785 --> 00:11:39,985
Trong ví dụ của tôi ở đây,

150
00:11:39,985 --> 00:11:45,260
tôi chỉ sửa đổi các tập tin CSS cần phải được biên dịch.

151
00:11:45,260 --> 00:11:50,125
Nhưng sau đó, sau đó chúng tôi làm việc với JavaScript framework.

152
00:11:50,125 --> 00:11:57,335
Bạn sẽ thấy rằng bạn có thể muốn kích hoạt biên dịch khi các tập tin khác nhau đã thay đổi.

153
00:11:57,335 --> 00:12:02,964
Và tất cả những điều này có thể dễ dàng quản lý bằng cách sử dụng các tác vụ đồng hồ này.

154
00:12:02,964 --> 00:12:07,560
Liệu điều này, chúng tôi hoàn thành bài tập này.

155
00:12:07,560 --> 00:12:13,685
Ở đây, chúng tôi đã học cách thiết lập một vài kịch bản NPM nữa,

156
00:12:13,685 --> 00:12:20,855
và tự động kích hoạt một số kịch bản bằng cách sử dụng mô-đun NPM onchange.

157
00:12:20,855 --> 00:12:24,550
Chúng tôi cũng thấy việc sử dụng mô-đun shell song song để thực hiện

158
00:12:24,550 --> 00:12:32,050
nhiều kịch bản NPM đồng thời trong cửa sổ thiết bị đầu cuối của chúng tôi.

159
00:12:32,200 --> 00:12:42,890
Đây là một điểm tốt để bạn thực hiện một nhận xét Git với thông báo “NPM Scripts Part 1".