1
00:00:00,000 --> 00:00:04,535
[MUSIC]

2
00:00:04,535 --> 00:00:10,479
Bây giờ chúng ta sẽ tiếp tục hành trình của chúng tôi với các kịch bản NPM trong bài tập tiếp theo này.

3
00:00:10,479 --> 00:00:15,182
Ở đây, chúng ta sẽ tìm hiểu làm thế nào để có thể xây dựng

4
00:00:15,182 --> 00:00:20,335
một thư mục phân phối chứa tất cả các tập tin cho

5
00:00:20,335 --> 00:00:27,970
dự án của chúng tôi mà chúng ta có thể chỉ đơn giản triển khai đến một máy chủ web lưu trữ trang web của chúng tôi.

6
00:00:27,970 --> 00:00:33,050
Vì vậy, với các tập tin HTML, CSS và JavaScript mà

7
00:00:33,050 --> 00:00:39,010
chúng tôi đã chuẩn bị trong thư mục dự án của chúng tôi, chúng tôi sẽ, từ những,

8
00:00:39,010 --> 00:00:44,895
xử lý chúng bằng cách sử dụng các nhiệm vụ khác nhau mà chúng tôi đã nói về.

9
00:00:44,895 --> 00:00:49,246
Đó là thực hiện một sửa đổi CSS,

10
00:00:49,246 --> 00:00:54,740
nối và uglification JavaScript, thu nhỏ

11
00:00:54,740 --> 00:00:59,230
và HTML thu nhỏ và

12
00:00:59,230 --> 00:01:04,895
sau đó tạo ra một thư mục phân phối với tất cả các tập tin.

13
00:01:04,895 --> 00:01:09,520
Nhưng về cơ bản tạo thành tập hợp các tập tin có thể được

14
00:01:09,520 --> 00:01:13,200
triển khai đến máy chủ web của chúng tôi lưu trữ trang web của chúng tôi.

15
00:01:15,165 --> 00:01:21,005
Để giúp bạn hiểu những gì chúng tôi sẽ làm trong bài tập cụ thể này,

16
00:01:22,085 --> 00:01:29,102
như chúng tôi lưu ý từ trang index.html của chúng tôi, chúng tôi có một tập hợp các tập

17
00:01:29,102 --> 00:01:34,352
tin CSS mà bạn đưa vào đây bằng cách sử dụng thẻ liên kết này ở đây.

18
00:01:34,352 --> 00:01:38,742
Tương tự như vậy, bạn có một tập hợp các kịch bản mà bạn đã bao gồm

19
00:01:38,742 --> 00:01:42,847
ở cuối trang này bằng cách sử dụng thẻ kịch bản.

20
00:01:42,847 --> 00:01:46,152
Chúng tôi đã bao gồm một bộ mã JavaScript.

21
00:01:46,152 --> 00:01:51,150
Bây giờ, những gì chúng ta sẽ làm trong bài tập này là để kết hợp tất cả các tập

22
00:01:51,150 --> 00:01:56,760
tin này vào một tập tin JavaScript duy nhất sẽ được gửi

23
00:01:56,760 --> 00:02:03,710
từ máy chủ web của chúng tôi đến một trình duyệt đang cố gắng để xem trang web của chúng tôi.

24
00:02:03,710 --> 00:02:08,480
Bằng cách này, chúng tôi giảm thiểu số lượng tải xuống mà trình duyệt cần thực hiện

25
00:02:08,480 --> 00:02:10,930
để hiển thị trang web của chúng tôi.

26
00:02:10,930 --> 00:02:16,960
Tương tự như vậy, chúng tôi sẽ kết hợp tất cả các mã CSS vào một tập tin CSS duy nhất,

27
00:02:16,960 --> 00:02:18,325
để nó có thể được phân phối.

28
00:02:18,325 --> 00:02:24,353
Vì vậy, các tập tin CSS kết hợp sẽ chứa tất cả các mã cho

29
00:02:24,353 --> 00:02:31,751
Bootstrap cộng với Bootstrap xã hội, và cũng là Font Awesome và

30
00:02:31,751 --> 00:02:36,697
cũng là mã CSS mà chúng tôi đã viết.

31
00:02:36,697 --> 00:02:40,351
Tương tự như vậy, sẽ có một tập tin JavaScript duy nhất mà

32
00:02:40,351 --> 00:02:45,297
sẽ chứa jQuery tether, Bootstrap và mã JavaScript mà chúng tôi,

33
00:02:45,297 --> 00:02:49,790
chính chúng tôi đã viết, tất cả kết hợp với nhau trong một tập tin duy nhất.

34
00:02:49,790 --> 00:02:53,610
Bây giờ, đây là cách bạn có thể triển khai các trang web của bạn.

35
00:02:53,610 --> 00:02:58,190
Và thay vì có nhiều tập tin như vậy ở đó, một cách mà

36
00:02:59,560 --> 00:03:03,750
triển khai được thực hiện là kết hợp chúng thành một tập tin duy nhất để một tải xuống duy nhất

37
00:03:03,750 --> 00:03:08,840
bạn nhận được tất cả các mã JavaScript cần thiết để hiển thị trang web của bạn.

38
00:03:08,840 --> 00:03:11,810
Một tải về duy nhất bạn nhận được tất cả các mã CSS cần thiết để

39
00:03:11,810 --> 00:03:13,200
hiển thị trang web của bạn.

40
00:03:13,200 --> 00:03:16,590
Và sau đó, tất nhiên, bản thân tệp HTML sẽ được tải xuống.

41
00:03:18,530 --> 00:03:23,390
Để hoàn thành các nhiệm vụ này, chúng ta cần phải sử dụng

42
00:03:23,390 --> 00:03:29,070
một bộ mô-đun NPM nhất định để thực hiện việc này.

43
00:03:29,070 --> 00:03:33,810
Bây giờ, những gì chúng tôi sẽ kết thúc làm là xây dựng một thư mục

44
00:03:33,810 --> 00:03:38,760
trong tập tin dự án của chúng tôi, và sau đó chúng tôi gọi thư mục đó là dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Tôi chỉ ngẫu nhiên đặt tên đó là một thư mục dist.

46
00:03:42,580 --> 00:03:47,100
Trong trường hợp của tôi, những gì tôi có nghĩa là của thư mục dist là một thư mục phân phối.

47
00:03:47,100 --> 00:03:51,270
Vào cuối tập hợp các bước chúng tôi sẽ làm, thư mục này sẽ chứa tất cả

48
00:03:51,270 --> 00:03:59,510
các tệp có thể được sao chép đơn giản vào máy chủ web lưu trữ trang web của chúng tôi.

49
00:03:59,510 --> 00:04:03,930
Để bắt đầu, những gì chúng tôi sẽ làm là thiết lập một tập hợp các

50
00:04:05,140 --> 00:04:10,960
kịch bản ở đây sẽ giúp chúng tôi tự động hóa quá trình này.

51
00:04:10,960 --> 00:04:13,930
Vì vậy, điều đầu tiên, chúng tôi có thể

52
00:04:13,930 --> 00:04:18,850
chuẩn bị thư mục phân phối một lần sau đó có thể chúng tôi có thể thực hiện một số chỉnh sửa các

53
00:04:18,850 --> 00:04:23,310
tập tin nguồn của chúng tôi sau đó chúng tôi có thể cần phải biên dịch lại thư mục phân phối của chúng tôi.

54
00:04:24,420 --> 00:04:29,370
Bước đầu tiên, chúng tôi sẽ thiết lập kịch bản để làm sạch thư mục phân phối

55
00:04:29,370 --> 00:04:33,050
về cơ bản có ý nghĩa, xóa thư mục phân phối.

56
00:04:33,050 --> 00:04:37,950
Vì vậy, để làm điều đó, tôi sẽ lấy sự giúp đỡ của một mô-đun NPM gọi là rimfraf.

57
00:04:37,950 --> 00:04:47,760
Vì vậy, tôi sẽ cài đặt npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Mô-đun này giúp chúng tôi làm sạch một thư mục hoàn toàn.

59
00:04:51,920 --> 00:04:56,370
Vì vậy, một khi tôi đã cài đặt này, sau đó tôi sẽ thiết lập một kịch bản

60
00:04:56,370 --> 00:05:01,550
trong tập tin package.json của tôi để làm sạch tất cả các tập tin.

61
00:05:01,550 --> 00:05:05,360
Đi đến tập tin package.json, tôi sẽ thêm vào, vì vậy

62
00:05:05,360 --> 00:05:11,380
hãy nhớ luôn luôn rằng hôn mê là rất, rất quan trọng trong những kịch bản.

63
00:05:11,380 --> 00:05:15,200
Đôi khi bạn sẽ gặp vấn đề chỉ vì bạn quên dấu phẩy.

64
00:05:15,200 --> 00:05:18,230
Vì vậy, hãy chắc chắn rằng bạn đặt những dấu phẩy khi cần thiết.

65
00:05:18,230 --> 00:05:21,800
Mô tả tiếp theo mà tôi sẽ thêm là, sạch sẽ,

66
00:05:23,410 --> 00:05:29,000
rõ ràng như tên của nó, điều này sẽ làm sạch ra thư mục của tôi.

67
00:05:29,000 --> 00:05:32,510
Vì vậy, tôi sẽ nói rimraf quận.

68
00:05:32,510 --> 00:05:35,610
Điều này có nghĩa là điều này, khi được thực hiện,

69
00:05:35,610 --> 00:05:39,860
sẽ làm sạch thư mục phân phối.

70
00:05:39,860 --> 00:05:42,215
Vì vậy, tôi sẽ thêm vào đó, và

71
00:05:42,215 --> 00:05:46,780
sau đó tôi sẽ đặt dấu phẩy đó ở đó bởi vì tôi sẽ thêm nhiều kịch bản bên dưới này.

72
00:05:46,780 --> 00:05:51,814
Vì vậy, hãy để tôi lưu những thay đổi, bước tiếp theo mà tôi sẽ làm là

73
00:05:51,814 --> 00:05:57,048
để cài đặt một mô-đun npm gọi là tập tin sao chép được sử dụng để sao chép

74
00:05:57,048 --> 00:06:03,206
một số tập tin phông chữ từ thư mục module nút của tôi vào thư mục phân phối của tôi.

75
00:06:03,206 --> 00:06:07,430
Vì vậy, khi nó được triển khai, các tập tin phông chữ cũng được triển khai.

76
00:06:07,430 --> 00:06:12,840
Đi đến thiết bị đầu cuối, gói tiếp theo mà tôi sẽ cài đặt là

77
00:06:12,840 --> 00:06:19,860
npm -g, nhớ lại rằng điều này có nghĩa là nó nên được cài đặt trên toàn cầu.

78
00:06:19,860 --> 00:06:23,900
Vì tôi đang làm điều này trên máy Mac,

79
00:06:23,900 --> 00:06:30,670
tôi nên nói sudo npm -g, nếu bạn đang làm điều đó trên Windows, bạn không cần sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g cài đặt tập tin sao chép.

81
00:06:42,837 --> 00:06:47,493
Và sau đó một khi đã được cài đặt, mô-đun NPM này sẽ giúp tôi sao chép các

82
00:06:47,493 --> 00:06:50,360
tập tin từ một thư mục sang một thư mục khác.

83
00:06:51,390 --> 00:06:54,650
Bây giờ, để tôi giới thiệu một kịch bản NPM khác ở đây.

84
00:06:56,110 --> 00:06:59,534
Đi đến tập tin package.json của

85
00:06:59,534 --> 00:07:05,046
tôi, tôi sẽ tạo ra một scrip mới ở đây tên copyfonts.

86
00:07:05,046 --> 00:07:09,666
Kịch bản này sẽ cho phép tôi sao chép tất cả các tập tin phông chữ từ thư mục

87
00:07:09,666 --> 00:07:13,650
Font Awesome của tôi vào thư mục phân phối của tôi.

88
00:07:13,650 --> 00:07:17,510
Vì vậy, khi trang web của tôi được render,

89
00:07:17,510 --> 00:07:21,500
tất cả các tập tin phông chữ cũng có thể được gửi đi, như vậy mà các

90
00:07:21,500 --> 00:07:26,110
trang web của tôi được render một cách chính xác với phông chữ tuyệt vời tại chỗ.

91
00:07:26,110 --> 00:07:30,949
Vì vậy, để làm điều đó, tôi sẽ nói, sao chép các tập tin -f,

92
00:07:30,949 --> 00:07:36,530
-f có nghĩa là nó chỉ đơn giản là sao chép các tập tin mà không có đầy đủ của hệ thống phân cấp và

93
00:07:36,530 --> 00:07:40,550
chỉ đơn giản là sao chép các tập tin từ một vị trí khác.

94
00:07:40,550 --> 00:07:43,594
Vì vậy, tôi sẽ nói sao chép tập tin -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/fonts/sao

96
00:08:03,367 --> 00:08:09,416
Và dist/font chữ,

97
00:08:12,386 --> 00:08:14,970
Và sau đó lưu những thay đổi.

98
00:08:14,970 --> 00:08:20,620
Bây giờ hãy để tôi minh họa cách hai kịch bản npm này làm việc cùng nhau.

99
00:08:20,620 --> 00:08:25,605
Đi đến cửa sổ lệnh của tôi, tôi sẽ gõ

100
00:08:25,605 --> 00:08:30,300
npm chạy copyfonts.

101
00:08:30,300 --> 00:08:34,650
Khi điều này chạy, nó sẽ tạo ra một thư mục

102
00:08:34,650 --> 00:08:38,640
tên dist trong hệ thống phân cấp thư mục dự án của tôi.

103
00:08:38,640 --> 00:08:39,880
Và sau đó bên trong dist,

104
00:08:39,880 --> 00:08:44,730
sẽ có một thư mục con có tên là phông chữ, sẽ chứa các tệp phông chữ.

105
00:08:44,730 --> 00:08:46,310
Vì vậy, chạy này,

106
00:08:46,310 --> 00:08:50,480
bạn sẽ ngay lập tức nhận thấy rằng thư mục phân phối được tạo ra ở đây.

107
00:08:50,480 --> 00:08:52,190
Và bên trong thư mục phân phối,

108
00:08:52,190 --> 00:08:55,000
bạn có thể thấy rằng có một thư mục con có tên là phông chữ.

109
00:08:55,000 --> 00:08:58,760
Và bên trong đó, tất cả các tập tin fontawesome đã được sao chép.

110
00:09:00,070 --> 00:09:03,700
Đây là cách kịch bản copyfonts hoạt động.

111
00:09:04,790 --> 00:09:08,720
Bây giờ, tôi sẽ chỉ cho các bạn cách kịch bản sạch hoạt động.

112
00:09:08,720 --> 00:09:15,275
Vì vậy, nếu tôi gõ vào npm chạy sạch, điều này sẽ xóa thư mục phân phối đó.

113
00:09:15,275 --> 00:09:17,805
Vì vậy, khi tôi chạy điều đó, sau đó bạn sẽ nhận thấy rằng

114
00:09:17,805 --> 00:09:22,435
thư mục phân phối bị xóa khỏi hệ thống phân cấp thư mục dự án của tôi.

115
00:09:22,435 --> 00:09:25,055
Vì vậy, đây là cách sạch sẽ hoạt động.

116
00:09:25,055 --> 00:09:28,075
Bây giờ chúng ta đã thiết lập hai tập lệnh này,

117
00:09:28,075 --> 00:09:32,735
bây giờ chúng ta cần có khả năng xây dựng các tập tin phân phối còn lại.

118
00:09:33,745 --> 00:09:39,034
Trong bước tiếp theo, chúng ta sẽ cài đặt một mô-đun nút gọi là imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
đó là giao diện dòng lệnh cho mô-đun imagemin.

120
00:09:43,182 --> 00:09:51,032
Mô-đun imaginemin sẽ lấy một phái các tập tin hình ảnh và sau đó nén chúng xuống.

121
00:09:51,032 --> 00:09:57,550
Vì vậy, nó xếp chồng lên nhau kích thước của những tập tin được giảm thiểu càng nhiều càng tốt,

122
00:09:57,550 --> 00:10:01,650
nhưng vẫn được hiển thị đúng khi trang web của chúng tôi được hiển thị.

123
00:10:01,650 --> 00:10:05,060
Vì vậy, theo cách này, chúng tôi sẽ giảm lượng dữ liệu

124
00:10:05,060 --> 00:10:09,870
cần được tải xuống bởi trình duyệt khi nó cần để hiển thị trang web của chúng tôi.

125
00:10:09,870 --> 00:10:16,250
Vì vậy, nếu bạn đang bao gồm hình ảnh vào trang web của bạn, sau đó imagemin nhiệm vụ là một

126
00:10:16,250 --> 00:10:21,950
cái gì đó mà bạn nên học để tor giảm kích thước của các tập tin hình ảnh của bạn.

127
00:10:21,950 --> 00:10:29,740
Vì vậy, để làm điều đó, tôi sẽ cài đặt mô-đun nút imagemin này như là một mô-đun toàn cầu.

128
00:10:29,740 --> 00:10:36,145
Vì vậy, tôi gõ vào sudo, vì tôi đang sử dụng một máy Mac,

129
00:10:36,145 --> 00:10:41,270
npm -g cài đặt imagemin-cli,

130
00:10:41,270 --> 00:10:46,770
và sau đó cài đặt mô-đun nút này.

131
00:10:50,730 --> 00:10:56,670
Đôi khi trên máy Mac, một số plugin imagemin không được cài đặt chính xác.

132
00:10:56,670 --> 00:11:02,979
Vì vậy, đó là lý do tại sao tôi đưa ra những lá cờ bổ sung để lệnh,

133
00:11:02,979 --> 00:11:09,310
họ đang nói —unsafe-perm=true và —allow-root.

134
00:11:09,310 --> 00:11:12,497
Sau khi cài đặt hoàn tất,

135
00:11:12,497 --> 00:11:18,183
hãy để tôi thiết lập một kịch bản để thực hiện phóng đại hình ảnh của tôi.

136
00:11:18,183 --> 00:11:23,650
Đi đến package.json một lần nữa, tôi sẽ thiết lập kịch bản tiếp theo ở đây.

137
00:11:23,650 --> 00:11:32,350
Vì vậy, tôi có thể nói imagemin là tên kịch bản mà tôi sẽ làm,

138
00:11:32,350 --> 00:11:36,610
và tôi sẽ nói imagemin.

139
00:11:36,610 --> 00:11:43,930
Và sau đó kể từ khi tất cả các hình ảnh của tôi nằm trong thư mục img, tôi sẽ nói img/*,

140
00:11:43,930 --> 00:11:49,913
và sau đó nhiều tập tin sẽ được sao chép vào hình ảnh dist.

141
00:11:49,913 --> 00:11:54,997
Vì vậy, các tập tin hình ảnh ban đầu từ thư mục hình ảnh mà tôi có sẽ được sao chép

142
00:11:54,997 --> 00:12:00,300
vào thư mục phân phối và vào thư mục con hình ảnh ở đó.

143
00:12:00,300 --> 00:12:03,616
Điều này hoàn thành imagemin của tôi.

144
00:12:03,616 --> 00:12:07,460
Hãy để tôi tiếp tục với thiết lập còn lại, và

145
00:12:07,460 --> 00:12:13,070
sau đó chúng ta sẽ thấy làm thế nào chúng ta sẽ sử dụng các kịch bản mà chúng tôi đã thiết lập ở đó.

146
00:12:14,260 --> 00:12:19,270
Bây giờ tôi có thư mục thử nghiệm trong đó, mà tôi có thể tạo ra,

147
00:12:19,270 --> 00:12:26,450
tôi không muốn kiểm tra trong thư mục dist vào kho lưu trữ Git của tôi.

148
00:12:26,450 --> 00:12:31,640
Vì vậy, đó là lý do tại sao vào tập tin .gitignore của tôi, tôi sẽ thêm vào thư mục dist cũng.

149
00:12:31,640 --> 00:12:37,060
Vì vậy, thư mục dist sẽ bị bỏ qua khi tôi kiểm tra của tôi vào kho Git.

150
00:12:37,060 --> 00:12:43,342
Vì vậy, chúng ta hãy lưu các thay đổi, quay trở lại package.json.

151
00:12:43,342 --> 00:12:49,710
Bây giờ, những gì tôi sẽ làm tiếp theo là để cài đặt ba

152
00:12:50,870 --> 00:12:56,080
mô-đun nút khác nhau, cho phép tôi thực hiện các sửa

153
00:12:56,080 --> 00:13:02,550
đổi cho tập tin index.html của tôi và các tập tin HTML còn lại ở đó.

154
00:13:02,550 --> 00:13:09,280
Tại dấu nhắc lệnh, gõ npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Tôi sẽ cài đặt một mô-đun gọi là usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Usemin-cli này là một trong đó cho phép tôi thực hiện chuyển đổi từ

157
00:13:21,166 --> 00:13:22,230
tập tin HTML của tôi.

158
00:13:22,230 --> 00:13:26,870
Và sau đó nối và kết hợp tất cả các

159
00:13:26,870 --> 00:13:30,650
tập tin CSS vào một tập tin CSS duy nhất, và sau đó đưa nó vào thư mục phân phối.

160
00:13:30,650 --> 00:13:36,700
Tương tự, tất cả các tập tin JS sẽ được nối và đưa vào một thư mục duy nhất.

161
00:13:36,700 --> 00:13:38,720
Vì vậy, usemin-cli này rất hữu ích.

162
00:13:38,720 --> 00:13:44,005
Nhưng usemin-cli này có sự giúp đỡ

163
00:13:44,005 --> 00:13:51,051
của ba mô-đun nút khác được gọi là cssmin,

164
00:13:51,051 --> 00:13:56,350
sau đó uglifyjs, và htmlmin.

165
00:13:56,350 --> 00:14:01,600
Vì vậy, tôi cần phải cài đặt ba module nút này ngoài usemin-cli.

166
00:14:01,600 --> 00:14:04,610
Và tôi sẽ cài đặt này tại địa phương vào dự án của tôi, vì vậy

167
00:14:04,610 --> 00:14:08,330
đó là lý do tại sao npm cài đặt —save-def.

168
00:14:08,330 --> 00:14:13,910
Vì vậy, bằng cách này, họ sẽ được ghi nhớ trong tập tin package.json của tôi.

169
00:14:13,910 --> 00:14:15,890
Vì vậy, chúng ta hãy tiếp tục và hoàn thành việc cài đặt.

170
00:14:17,230 --> 00:14:21,270
Bây giờ tôi đã cài đặt các usemin và

171
00:14:21,270 --> 00:14:26,440
các module nút liên quan, tôi cần phải thực hiện một số chuyển đổi

172
00:14:26,440 --> 00:14:30,695
để tập tin index.html của tôi và các tập tin HTML còn lại.

173
00:14:30,695 --> 00:14:35,750
Như vậy mà usemin node_module nhận ra rằng nhóm này là

174
00:14:35,750 --> 00:14:42,330
một loạt các tập tin CSS cần phải được nén, tính toán và xác minh.

175
00:14:42,330 --> 00:14:47,730
Tương tự, đây là nhóm các tập tin JavaScript cần được uglyfied,

176
00:14:47,730 --> 00:14:51,130
kết hợp, và nối với nhau.

177
00:14:51,130 --> 00:14:54,480
Vì vậy, để giúp các gói usemin làm việc,

178
00:14:54,480 --> 00:15:00,430
tôi cần phải thêm một chút mã vào tập tin index.html của tôi.

179
00:15:00,430 --> 00:15:07,942
Vì vậy, ngay trước khi liên kết đầu tiên ở đó,

180
00:15:07,942 --> 00:15:14,747
tôi sẽ thêm vào một dấu hiệu ở đây, trong

181
00:15:14,747 --> 00:15:21,100
đó nói! — xây dựng:css.

182
00:15:21,100 --> 00:15:25,621
Bây giờ, cái này! -, như bạn sẽ nhận ra,

183
00:15:25,621 --> 00:15:29,640
là một nhận xét từ quan điểm html.

184
00:15:29,640 --> 00:15:33,405
Vì vậy, bên trong nhận xét đó, tôi sẽ bao gồm rằng dòng đặc biệt này

185
00:15:33,405 --> 00:15:38,480
sẽ được sử dụng bởi trình đơn sử dụng để nhận ra khối

186
00:15:38,480 --> 00:15:43,370
mã xác định tất cả các tập tin CSS cần phải được chuyển giao.

187
00:15:43,370 --> 00:15:49,743
Vì vậy, tôi nói build.css, và sau đó tôi sẽ chỉ

188
00:15:49,743 --> 00:15:54,770
định tên tập tin là css/main.css.

189
00:15:54,770 --> 00:15:57,160
Đây là cú pháp để xác định.

190
00:15:57,160 --> 00:16:04,080
Điều này có nghĩa là các khối của các tập tin CSS tất cả sẽ được kết hợp với nhau,

191
00:16:04,080 --> 00:16:10,510
và sau đó nối, thu nhỏ, và sau đó đưa vào tập tin này được gọi là main.css.

192
00:16:10,510 --> 00:16:15,723
Và sau đó khối này sẽ được xác định ở phía bên kia bằng cách nói,

193
00:16:21,873 --> 00:16:27,090
gạch nối —, được rồi, xin lỗi.

194
00:16:27,090 --> 00:16:34,210
Tôi quên bao gồm dấu gạch ngang đôi ở cuối đó.

195
00:16:34,210 --> 00:16:37,050
Đó là lý do tại sao điều này không chuyển màu.

196
00:16:37,050 --> 00:16:41,780
Vì vậy, đôi khi bạn đang hạnh phúc khi

197
00:16:41,780 --> 00:16:46,540
biên tập viên của bạn chỉ ra những sai lầm tiềm ẩn mà bạn có thể đang cam kết.

198
00:16:46,540 --> 00:16:51,779
Vì vậy, ngay đó tôi sẽ nói endbuild và

199
00:16:51,779 --> 00:16:56,206
sau đó — khung bên phải ở đó.

200
00:16:56,206 --> 00:17:00,904
Bây giờ, bất cứ điều gì là giữa xây dựng và

201
00:17:00,904 --> 00:17:06,708
endbuild này, nhóm này sẽ được coi là một đơn vị để

202
00:17:06,708 --> 00:17:12,252
được kết hợp bởi mô-đun npm usemin của chúng tôi ở đó.

203
00:17:12,252 --> 00:17:14,890
Xem cú pháp module usemin sử dụng ở đó.

204
00:17:16,230 --> 00:17:22,020
Tôi cần phải làm chuyển đổi tương tự để contactus.html và aboutus.html cũng.

205
00:17:22,020 --> 00:17:26,759
Vì vậy, tôi sẽ sao chép cái này

206
00:17:26,759 --> 00:17:31,306
ở đây cái lười biếng của tôi.

207
00:17:31,306 --> 00:17:35,149
Tôi sẽ chỉ đơn giản là sao chép và

208
00:17:35,149 --> 00:17:39,866
dán vào contactus.html và

209
00:17:39,866 --> 00:17:44,770
sau đó cũng aboutus.html ở đó.

210
00:17:44,770 --> 00:17:50,263
Tương tự như vậy, quay trở lại index.html,

211
00:17:50,263 --> 00:17:56,477
tôi sẽ sao chép inbuild này và sau đó cũng sao chép nó vào

212
00:17:56,477 --> 00:18:01,840
contactus.html và aboutus.html dữ liệu.

213
00:18:03,530 --> 00:18:08,990
Được rồi, chúng ta hãy lưu các thay đổi cho tất cả các tập tin.

214
00:18:08,990 --> 00:18:12,190
Sau đó, quay trở lại index.html.

215
00:18:12,190 --> 00:18:16,670
Tôi sẽ lặp lại cùng một điều ở phía dưới cho các

216
00:18:16,670 --> 00:18:22,220
kịch bản JavaScript của tôi mà tôi đã bao gồm ở đó.

217
00:18:22,220 --> 00:18:26,730
Vì vậy, đi đến dưới cùng ở đây,

218
00:18:26,730 --> 00:18:30,026
những gì tôi cần phải làm ở đây,

219
00:18:30,026 --> 00:18:34,883
là để chỉ định <! - xây dựng js,

220
00:18:34,883 --> 00:18:39,225
và tôi sẽ nói js/main.js.

221
00:18:41,216 --> 00:18:43,130
Dấu gạch nối đôi, dấu gạch chéo.

222
00:18:43,130 --> 00:18:47,781
Vì vậy, đó là sự khởi đầu của khối và sau đó kết thúc được xác định bởi,

223
00:18:51,540 --> 00:18:55,034
Build, okay?

224
00:18:55,034 --> 00:19:00,782
Vì vậy, với những thay đổi này, bây giờ, tập tin index.html của tôi đã sẵn sàng,

225
00:19:00,782 --> 00:19:07,899
và tôi phải thực hiện chuyển đổi tương tự để contactus.html ở phía dưới.

226
00:19:14,090 --> 00:19:18,715
Và aboutus.html cũng ở phía dưới.

227
00:19:25,340 --> 00:19:29,505
Tương tự như vậy, enbuild này sao chép trong.

228
00:19:32,892 --> 00:19:38,649
Vào contactus.html và aboutus.html và sau đó lưu tất cả các tập tin.

229
00:19:40,130 --> 00:19:44,550
Và điều đó chuẩn bị các tập tin HTML của chúng tôi để

230
00:19:44,550 --> 00:19:48,940
được chuyển đổi để chuẩn bị thư mục phân phối.

231
00:19:48,940 --> 00:19:53,540
Những tập tin này sẽ vẫn như vậy, nhưng sau đó các tập tin được chuyển đổi sẽ được đưa vào

232
00:19:53,540 --> 00:19:58,380
thư mục phân phối được tạo ra từ các tập tin này.

233
00:19:58,380 --> 00:20:02,948
Bây giờ, một khi chúng ta hoàn thành điều đó, chúng ta hãy thiết lập một số kịch bản.

234
00:20:02,948 --> 00:20:07,875
Đi đến package.json, tôi sẽ thiết lập kịch bản tiếp theo của tôi được gọi là usemin.

235
00:20:11,930 --> 00:20:15,890
Và sau đó điều này nói usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, đây là cú pháp cho

237
00:20:24,671 --> 00:20:29,366
chỉ định -d dist ý nghĩa rằng điểm đến cho

238
00:20:29,366 --> 00:20:32,507
phân phối này phân phối thư mục.

239
00:20:32,507 --> 00:20:39,110
Và sau đó tôi sẽ nói htmlmin, điều này cũng sẽ giảm thiểu các tập tin HTML.

240
00:20:39,110 --> 00:20:43,300
Vì vậy, nó sẽ loại bỏ tất cả các không gian không liên quan và ý kiến từ các tập tin HTML.

241
00:20:43,300 --> 00:20:45,110
Nhưng họ nén nó xuống để

242
00:20:45,110 --> 00:20:48,350
nó chứa số lượng ký tự tối thiểu ở đó.

243
00:20:48,350 --> 00:20:55,165
Chúng ta sẽ xem xét kết quả sau khi chúng ta hoàn thành và thực hiện chuyển đổi ở đó.

244
00:20:55,165 --> 00:21:00,528
Vì vậy, và sau đó, không chỉ có vậy,

245
00:21:00,528 --> 00:21:05,509
và sau đó htmlmin, và sau đó nói

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html và

247
00:21:10,684 --> 00:21:15,664
&&, điều này có nghĩa là có

248
00:21:15,664 --> 00:21:19,970
nhiều hơn để đến sau này.

249
00:21:19,970 --> 00:21:25,730
Sau đó, tôi sẽ nói usemin

250
00:21:25,730 --> 00:21:31,171
sau đó aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d quận —htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
Vì vậy, đó là cái thứ hai để chuyển đổi tập tin aboutus.html.

254
00:21:50,078 --> 00:21:55,135
Và sau đó &&, đây là một kịch bản dài,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
chúng ta cần phải chuyển đổi tất cả các tập tin.

257
00:22:02,890 --> 00:22:08,150
Vì vậy, đó là lý do tại sao tôi cần phải xác định từng cái một cách rõ ràng ở đó.

258
00:22:08,150 --> 00:22:11,910
usemin không mất thẻ hoang dã, vì vậy

259
00:22:11,910 --> 00:22:16,080
đó là lý do tại sao tôi phải xác định giữ như [không nghe được].

260
00:22:16,080 --> 00:22:21,365
Và như vậy usemin index.html

261
00:22:21,365 --> 00:22:27,426
-d quận —htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
Và sau đó tôi đặt một dấu phẩy bởi vì tôi sẽ giới thiệu các kịch bản tiếp theo,

264
00:22:40,656 --> 00:22:45,940
đó là, Gọi là xây dựng.

265
00:22:45,940 --> 00:22:50,490
Vì vậy, kịch bản xây dựng này sẽ tạo thư mục phân phối của tôi.

266
00:22:50,490 --> 00:22:54,159
Vì vậy, để tạo thư mục phân phối

267
00:22:54,159 --> 00:22:59,328
của tôi, điều đầu tiên mà tôi sẽ làm là npm chạy sạch.

268
00:22:59,328 --> 00:23:07,090
Và sau đó npm chạy copyfonts.

269
00:23:07,090 --> 00:23:12,347
Bạn đã nhìn thấy hai trong hành động trước

270
00:23:12,347 --> 00:23:18,950
đó, sau đó tôi sẽ nói npm chạy imagemin để tạo ra các hình ảnh giảm thiểu,

271
00:23:18,950 --> 00:23:23,220
và sau đó tôi sẽ nói npm chạy usemin.

272
00:23:23,220 --> 00:23:29,257
Và kịch bản đặc biệt này sẽ xây dựng thư mục phân phối của tôi,

273
00:23:29,257 --> 00:23:36,171
nội dung của nó sau đó có thể được sao chép vào máy chủ web của tôi để giải quyết quảng cáo của tôi.

274
00:23:36,171 --> 00:23:39,238
Lưu các thay đổi.

275
00:23:39,238 --> 00:23:45,837
Bây giờ chúng ta hãy xem cách chúng ta xây dựng trang web.

276
00:23:45,837 --> 00:23:49,431
Tại thời điểm này, để xây dựng trang web của chúng tôi và

277
00:23:49,431 --> 00:23:55,950
dấu nhắc lệnh chỉ đơn giản là gõ npm chạy build và sau đó chỉ cần thực hiện.

278
00:23:55,950 --> 00:24:00,430
Kịch bản đó, lần lượt sẽ thực hiện một tập hợp

279
00:24:00,430 --> 00:24:05,440
các kịch bản, do đó sẽ hoàn thành toàn bộ tập hợp

280
00:24:05,440 --> 00:24:10,870
các tác vụ phải được thực hiện để chuẩn bị thư mục phân phối của tôi.

281
00:24:10,870 --> 00:24:13,690
Vì vậy, chúng ta hãy đi trước và chạy điều này và

282
00:24:13,690 --> 00:24:18,520
sau đó điều này sẽ chạy qua tất cả các kịch bản khác nhau ở đó.

283
00:24:18,520 --> 00:24:23,320
Phải mất vài phút để hoàn thành, và khi nó được hoàn thành,

284
00:24:23,320 --> 00:24:29,838
thì thư mục phân phối của bạn bây giờ sẽ sẵn sàng triển khai lên máy chủ web của bạn.

285
00:24:29,838 --> 00:24:34,950
Đi đến trình soạn thảo của chúng tôi,

286
00:24:34,950 --> 00:24:38,750
bây giờ bạn thấy rằng thư mục phân phối đã sẵn sàng.

287
00:24:38,750 --> 00:24:44,020
Bên trong thư mục phân phối, bạn sẽ thấy ba tập tin chỉ mục,

288
00:24:44,020 --> 00:24:48,580
và trong thư mục CSS, bạn sẽ thấy tập tin duy nhất được gọi là m ain.css,

289
00:24:48,580 --> 00:24:55,050
chứa tất cả các Bootstraps CSS, Bootstraps CSS,

290
00:24:55,050 --> 00:24:57,660
và mã CSS mà bạn đã tạo ra.

291
00:24:58,690 --> 00:25:01,863
Và thư mục JS sẽ chứa main.js,

292
00:25:01,863 --> 00:25:05,287
chứa Bootstrap, jQuery, và

293
00:25:05,287 --> 00:25:10,905
tất cả các bó toàn bộ mã JavaScript kết hợp với nhau thành một tập tin duy nhất.

294
00:25:10,905 --> 00:25:15,638
Hình ảnh sẽ chứa các hình ảnh được tối ưu hóa, và các phông chữ, rõ ràng,

295
00:25:15,638 --> 00:25:18,730
bạn đã thấy trước đó, chứa các tập tin phông chữ.

296
00:25:18,730 --> 00:25:24,030
Bây giờ, chúng ta hãy xem xét nhanh index.html đã được tạo ra ở đây.

297
00:25:24,030 --> 00:25:27,290
Vì vậy, khi bạn nhìn vào index.html đã được tạo ra ở đây,

298
00:25:27,290 --> 00:25:31,120
bạn sẽ nhận thấy rằng toàn bộ điều là nghĩa đen không thể đọc được,

299
00:25:32,530 --> 00:25:37,850
bởi vì khi bạn đã làm HTML phút nó đã tước bỏ tất cả các

300
00:25:39,500 --> 00:25:42,800
ý kiến không liên quan, nó đã tước bỏ tất cả các không gian, và

301
00:25:42,800 --> 00:25:48,100
sau đó tạo ra toàn bộ này chạy bộ ký tự.

302
00:25:49,540 --> 00:25:52,800
Với máy tính, nó không tạo ra bất kỳ sự khác biệt nào bởi vì nó sẽ hiển thị

303
00:25:52,800 --> 00:25:55,190
trang web này chỉ là tốt.

304
00:25:55,190 --> 00:25:58,727
Đối với bạn và tôi, nó tạo nên sự khác biệt, bởi vì chúng ta không thể đọc nó dễ dàng.

305
00:26:01,038 --> 00:26:05,620
Vì vậy, đây là những gì thu nhỏ gây ra cho tập tin HTML của bạn.

306
00:26:05,620 --> 00:26:08,180
Chúng ta hãy nhìn vào main.css.

307
00:26:08,180 --> 00:26:12,200
Khi bạn nhìn vào main.css, bạn thấy toàn bộ điều này được crunched lên

308
00:26:12,200 --> 00:26:15,090
thành một đơn vị duy nhất, khi bạn đi đến phía dưới.

309
00:26:16,300 --> 00:26:20,808
Nếu bạn đủ dũng cảm, đi xuống phía dưới và sau đó bạn sẽ thấy,

310
00:26:24,793 --> 00:26:29,683
Bạn sẽ thấy giờ đặc biệt bằng văn bản

311
00:26:29,683 --> 00:26:34,870
CSS lớp ngay xuống ở dưới đây.

312
00:26:37,220 --> 00:26:42,801
Ngay tại đó, bạn nhận ra nút băng chuyền, và những thứ

313
00:26:42,801 --> 00:26:49,693
khác, cái nồi tối, và những thứ khác ở đó, vì vậy tất cả đều bị cuốn vào.

314
00:26:49,693 --> 00:26:52,896
Vì vậy, đó là những gì thu nhỏ, và chi phí.

315
00:26:52,896 --> 00:26:55,530
Main.js, cùng một thứ.

316
00:26:55,530 --> 00:26:56,545
Mã không thể đọc được ở đó.

317
00:26:56,545 --> 00:26:59,440
Máy tính của họ, không có gì khác biệt.

318
00:26:59,440 --> 00:27:03,580
Vì vậy, với điều này, thư mục phân phối của chúng tôi bây giờ đã hoàn tất.

319
00:27:03,580 --> 00:27:06,250
Hãy kiểm tra thư mục phân phối của chúng tôi.

320
00:27:06,250 --> 00:27:08,669
May mắn thay, chúng tôi có máy chủ ánh sáng của chúng tôi đã chạy.

321
00:27:08,669 --> 00:27:12,014
Vì vậy, những gì tôi sẽ làm là để đi đến trình duyệt, và

322
00:27:12,014 --> 00:27:16,867
sau đó kiểm tra các tập tin CLM sẵn sàng chỉ mục trong thư mục phân phối này để

323
00:27:16,867 --> 00:27:20,507
xem liệu nó đang được hiển thị một cách chính xác hay không.

324
00:27:20,507 --> 00:27:25,870
Đi đến trình duyệt, trong thanh địa chỉ của tôi, tôi sẽ gõ,

325
00:27:25,870 --> 00:27:31,440
dist index.html, và

326
00:27:31,440 --> 00:27:36,920
nhận thấy rằng tập tin cụ thể này là tập tin phân phối

327
00:27:36,920 --> 00:27:40,680
đã được tạo ra, và nó chứa chính xác cùng một điều và hiển thị chính

328
00:27:40,680 --> 00:27:47,370
xác theo cách tương tự như trang web ban đầu của chúng tôi mà chúng tôi tạo ra.

329
00:27:47,370 --> 00:27:52,230
Về, tương tự, nhận thấy rằng aboutus.html này là từ

330
00:27:52,230 --> 00:27:57,490
thư mục phân phối và điều này được hiển thị chính xác như trước,

331
00:27:57,490 --> 00:28:01,350
và cũng là tệp contactus.html.

332
00:28:01,350 --> 00:28:03,360
Mọi thứ đều hoạt động hoàn hảo.

333
00:28:03,360 --> 00:28:08,970
Vì vậy, bây giờ tất cả những gì còn lại cho bạn để làm để triển khai trang web của bạn,

334
00:28:08,970 --> 00:28:15,530
hoặc trang web của bạn, chỉ đơn giản là sao chép nội dung từ thư mục dist,

335
00:28:15,530 --> 00:28:19,460
và sau đó tải nó lên máy chủ web của bạn, và

336
00:28:19,460 --> 00:28:24,830
sau đó máy chủ web của bạn đang hoạt động và phục vụ trang web của bạn.

337
00:28:26,080 --> 00:28:28,740
Với điều này, chúng tôi hoàn thành bài tập này.

338
00:28:28,740 --> 00:28:33,620
Trong bài tập này, chúng tôi đã thấy cách chúng tôi có thể sử dụng các tập

339
00:28:33,620 --> 00:28:38,636
lệnh NBM để xây dựng và triển khai trang web của chúng tôi.

340
00:28:38,636 --> 00:28:40,610
Đây có thể là thời điểm tốt

341
00:28:40,610 --> 00:28:45,223
để bạn thực hiện một Nhận Nhận xét với tin nhắn NPM Scripts, Phần 2.

342
00:28:45,223 --> 00:28:50,815
[ NHẠC]