1
00:00:03,510 --> 00:00:06,510
Hãy tiếp tục cằn nhằn của chúng tôi.

2
00:00:06,510 --> 00:00:11,175
Như chúng ta đã làm trong phần thứ hai của bài tập kịch bản NPM,

3
00:00:11,175 --> 00:00:14,660
trong phần thứ hai của bài tập grunt đó,

4
00:00:14,660 --> 00:00:17,080
chúng ta sẽ cấu hình chính xác các nhiệm vụ tương tự.

5
00:00:17,080 --> 00:00:20,475
Chúng tôi sẽ làm sạch thư mục phân phối,

6
00:00:20,475 --> 00:00:23,175
sao chép các phông chữ vào thư mục phân phối,

7
00:00:23,175 --> 00:00:29,780
sau đó chúng tôi cũng sẽ làm thu nhỏ hình ảnh của chúng tôi bằng imagemin,

8
00:00:29,780 --> 00:00:37,530
và sau đó cuối cùng sử dụng nhiệm vụ usemin để xây dựng và chuẩn bị thư mục phân phối của chúng tôi.

9
00:00:37,530 --> 00:00:40,420
Tiếp tục với bài tập của chúng

10
00:00:40,420 --> 00:00:43,590
tôi, tôi sẽ cài đặt một vài mô-đun grunt.

11
00:00:43,590 --> 00:00:49,990
Vì vậy, hãy cài đặt NPM, cài đặt-grunt-contrib-copy.

12
00:00:51,110 --> 00:01:00,665
Điều này được sử dụng để sao chép các tập tin và sau đó grunt-contrib-sạch,

13
00:01:00,665 --> 00:01:04,575
và trừ đi tiết kiệm dev.

14
00:01:04,575 --> 00:01:06,655
Và một khi hai cái này được cài đặt,

15
00:01:06,655 --> 00:01:10,595
sau đó chúng ta sẽ tiếp tục và cấu hình các nhiệm vụ tương ứng.

16
00:01:10,595 --> 00:01:12,800
Đi đến tập tin grunt của bạn,

17
00:01:12,800 --> 00:01:19,770
chúng tôi sẽ thêm vào cấu hình cho cả bản sao và các nhiệm vụ sạch.

18
00:01:19,770 --> 00:01:22,895
Vì vậy, bắt đầu với dấu phẩy,

19
00:01:22,895 --> 00:01:26,295
luôn luôn nhớ không quên dấu phẩy.

20
00:01:26,295 --> 00:01:30,360
Nó sẽ quay lại để cắn anh vào những lúc sai lầm nếu anh làm vậy.

21
00:01:30,360 --> 00:01:32,245
Vì vậy, hãy thiết lập nhiệm vụ sao chép.

22
00:01:32,245 --> 00:01:38,180
Đối với bản sao, usemin mong đợi chúng tôi cũng giữ

23
00:01:38,180 --> 00:01:41,110
các tập tin HTML của chúng tôi sao chép vào thư mục phân phối để

24
00:01:41,110 --> 00:01:44,760
nó có thể thực hiện thao tác trên đó.

25
00:01:44,760 --> 00:01:47,250
Vì vậy, trong trường hợp này,

26
00:01:47,250 --> 00:01:48,630
chúng ta sẽ đầu tiên sao chép

27
00:01:48,630 --> 00:01:53,440
các tập tin HTML từ thư mục dự án của chúng tôi vào thư mục phân phối.

28
00:01:53,440 --> 00:01:55,330
Vì vậy, để làm sao chép,

29
00:01:55,330 --> 00:02:01,535
tôi sẽ thiết lập một phần HTML của nó.

30
00:02:01,535 --> 00:02:04,740
Vì vậy, đây là nơi chúng tôi sẽ sử dụng một

31
00:02:04,740 --> 00:02:09,920
số cú pháp grunt để xác định các tập tin cần phải được sao chép.

32
00:02:09,920 --> 00:02:19,880
Vì vậy, tôi nói các tập tin và cũng chỉ định các

33
00:02:19,880 --> 00:02:23,560
dấu ngoặc phải, trái và phải có vì vậy trong này,

34
00:02:23,560 --> 00:02:27,855
tôi cần phải xác định bây giờ cấu hình nhất định.

35
00:02:27,855 --> 00:02:37,600
Vì vậy, tôi có thể nói, mở rộng true và dot true, sau đó CWD,

36
00:02:37,600 --> 00:02:42,015
thư mục làm việc hiện tại là dấu gạch chéo chấm,

37
00:02:42,015 --> 00:02:44,440
và sau đó,

38
00:02:44,440 --> 00:02:51,730
chúng tôi sẽ cấu hình tiếp theo đó là SRC, các tập tin nguồn,

39
00:02:51,730 --> 00:02:56,690
và sau đó các tập tin nguồn là star.html,

40
00:02:56,690 --> 00:02:59,325
tất cả các tập tin HTML,

41
00:02:59,325 --> 00:03:05,850
và sau đó chúng tôi sẽ sao chép chúng vào thư mục dist.

42
00:03:05,850 --> 00:03:10,135
Vì vậy, đó là lý do tại sao điểm đến được đặt vào thư mục phân phối ở đây.

43
00:03:10,135 --> 00:03:12,385
Vì vậy, với thiết lập này,

44
00:03:12,385 --> 00:03:18,880
nhiệm vụ sao chép của tôi sẽ sao chép tất cả các tệp HTML vào thư mục phân phối.

45
00:03:18,880 --> 00:03:22,285
Bây giờ cùng với đó, chúng ta cũng cần phải sao chép các phông chữ.

46
00:03:22,285 --> 00:03:26,200
Vì vậy, tôi sẽ thiết lập cái thứ hai cho các phông chữ.

47
00:03:26,200 --> 00:03:31,090
Vì vậy, tôi chỉ định phông chữ và sau đó ở đây tôi cũng cần phải chỉ định

48
00:03:31,090 --> 00:03:37,500
các tập tin cần phải được sao chép và vì vậy chúng tôi nói

49
00:03:37,500 --> 00:03:41,780
các tập tin, và sau đó đây là

50
00:03:41,780 --> 00:03:47,465
một số tham số cấu hình mà bạn cần phải thiết lập cho tác vụ sao chép.

51
00:03:47,465 --> 00:03:49,225
Bây giờ, nếu bạn cần phải hiểu,

52
00:03:49,225 --> 00:03:54,510
sau đó bằng cách đọc tài liệu cho plugin grunt tương ứng,

53
00:03:54,510 --> 00:03:57,650
bạn sẽ có thể tìm ra điều này và do đó hoặc bạn

54
00:03:57,650 --> 00:04:00,960
chỉ có thể làm theo ví dụ mà tôi đang đưa ra ở đây.

55
00:04:00,960 --> 00:04:05,350
Vì vậy, chấm true, và sau đó CWD,

56
00:04:05,350 --> 00:04:14,780
thư mục làm việc hiện tại là node module và font chữ awesome.

57
00:04:14,780 --> 00:04:18,295
Vì vậy, đó là nơi tôi sẽ sao chép các tập tin từ,

58
00:04:18,295 --> 00:04:27,180
và sau đó nguồn của các tập tin là fontsstar.star, đó là

59
00:04:27,180 --> 00:04:30,310
những tập tin mà tôi cần phải sao chép,

60
00:04:30,310 --> 00:04:38,370
và đích là thư mục phân phối.

61
00:04:38,370 --> 00:04:42,050
Vì vậy, với điều này, tôi đã thiết lập nhiệm vụ sao chép của tôi để sao chép

62
00:04:42,050 --> 00:04:47,490
cả hai tập tin HTML và các tập tin phông chữ vào thư mục phân phối của tôi.

63
00:04:47,490 --> 00:04:52,370
Bây giờ, nhiệm vụ tiếp theo mà tôi sẽ thiết lập là nhiệm vụ sạch sẽ.

64
00:04:52,370 --> 00:04:56,290
Vì vậy, để tôi cấu hình các nhiệm vụ sạch sẽ.

65
00:04:56,540 --> 00:05:05,825
Đối với nhiệm vụ sạch sẽ, tôi sẽ cấu hình xây dựng,

66
00:05:05,825 --> 00:05:13,460
và sau đó tôi sẽ nói nguồn là thư mục phân phối.

67
00:05:13,460 --> 00:05:19,660
Vì vậy, về cơ bản chỉ định rằng thư mục phân phối nên được làm sạch.

68
00:05:19,830 --> 00:05:27,835
Vì vậy, bây giờ chúng tôi đã thiết lập bản sao và các nhiệm vụ sạch, vì vậy chúng ta hãy lưu các thay đổi.

69
00:05:27,835 --> 00:05:31,530
Nhiệm vụ tiếp theo mà tôi sẽ thiết lập là nhiệm vụ imagemin.

70
00:05:31,530 --> 00:05:40,030
Đây là những gì chúng tôi sẽ sử dụng để nén và sao chép các hình ảnh vào thư mục phân phối.

71
00:05:40,030 --> 00:05:44,200
Để bắt đầu với nhiệm vụ imagemin, bước đầu tiên,

72
00:05:44,200 --> 00:05:49,910
cài đặt plugin grunt tương ứng.

73
00:05:49,910 --> 00:06:00,520
Vì vậy, grunt-contrib-imagemin, trừ đi save.dev.

74
00:06:00,520 --> 00:06:03,470
Và một khi đã được cài đặt,

75
00:06:03,470 --> 00:06:07,330
sau đó chúng tôi sẽ tiếp tục và cấu hình nhiệm vụ imagemin tương ứng.

76
00:06:07,330 --> 00:06:12,015
Đi đến tập tin grunt của chúng tôi sau khi cấu hình cho nhiệm vụ sạch,

77
00:06:12,015 --> 00:06:15,620
tôi sẽ cấu hình nhiệm vụ imagemin.

78
00:06:15,620 --> 00:06:18,050
Vì vậy, tôi sẽ nói imagemin,

79
00:06:19,460 --> 00:06:22,055
và sau đó ngay trong đó,

80
00:06:22,055 --> 00:06:26,225
tôi sẽ chỉ định động,

81
00:06:26,225 --> 00:06:30,950
và bên trong đó tôi sẽ chỉ định các tập tin để bạn có thể

82
00:06:30,950 --> 00:06:36,010
thấy rằng đặc điểm kỹ thuật tập tin sẽ tương tự.

83
00:06:36,010 --> 00:06:39,130
Tôi muốn nói, mở rộng true,

84
00:06:39,130 --> 00:06:46,830
sau đó CWD là thư mục hiện tại.

85
00:06:49,680 --> 00:06:58,350
Sau đó, nguồn của các tập tin là imagestar.

86
00:07:00,840 --> 00:07:05,405
và sau đó trong dấu ngoặc đơn, trong dấu ngoặc đơn,

87
00:07:05,405 --> 00:07:12,910
tôi chỉ định PNG, GIF và JPG.

88
00:07:12,910 --> 00:07:17,000
Vì vậy, về cơ bản, bạn có thể thấy các tập tin mô hình toàn cầu ở đây.

89
00:07:17,000 --> 00:07:18,640
Vì vậy, nó nói bất kỳ

90
00:07:18,640 --> 00:07:21,610
tập tin PNG, GIF, hoặc JPG phù hợp với mô hình này và sau đó

91
00:07:21,610 --> 00:07:25,755
bắt đầu dấu chấm có nghĩa là tất cả các tập tin của mô hình đó

92
00:07:25,755 --> 00:07:29,280
, và nguồn, và đích,

93
00:07:29,280 --> 00:07:34,310
tôi đặt làm thư mục phân phối.

94
00:07:34,310 --> 00:07:37,790
Vì vậy, với điều này, chúng tôi đã cấu hình bản sao của chúng tôi,

95
00:07:37,790 --> 00:07:39,425
sạch và imagemin nhiệm vụ.

96
00:07:39,425 --> 00:07:46,670
Hãy cấu hình một nhiệm vụ ở đây được gọi là xây dựng.

97
00:07:46,670 --> 00:07:49,365
Vì vậy, tôi sẽ nói, đăng ký nhiệm vụ,

98
00:07:49,365 --> 00:07:55,700
grunt đăng ký nhiệm vụ và sau đó tôi sẽ đặt tên cho nhiệm vụ như xây dựng,

99
00:07:55,700 --> 00:07:57,695
và sau đó bên trong này,

100
00:07:57,695 --> 00:08:03,160
chúng tôi sẽ chỉ định các bước thiết lập để được thực hiện bởi nhiệm vụ xây dựng.

101
00:08:03,160 --> 00:08:09,105
Vì vậy, ngay tại đó, dấu chấm phẩy và sau đó trong đó,

102
00:08:09,105 --> 00:08:13,685
tôi sẽ chỉ định ba nhiệm vụ trong trình tự mà họ nên được thực hiện.

103
00:08:13,685 --> 00:08:16,650
Đầu tiên, tôi sẽ nói, sạch sẽ.

104
00:08:16,650 --> 00:08:19,420
Vì vậy, chúng tôi sẽ dọn dẹp thư mục phân phối

105
00:08:19,420 --> 00:08:22,340
và sau đó bắt đầu xây dựng lại thư mục phân phối.

106
00:08:22,340 --> 00:08:27,320
Làm sạch, sau đó nhiệm vụ tiếp theo sẽ được

107
00:08:27,320 --> 00:08:36,980
sao chép và sau đó tôi sẽ làm, imagemin.

108
00:08:37,380 --> 00:08:41,340
Vì vậy, ba nhiệm vụ được cấu hình ở đây.

109
00:08:41,340 --> 00:08:43,910
Vì vậy, với điều này, để tôi lưu lại những thay đổi.

110
00:08:43,910 --> 00:08:46,590
Để xem thứ này hoạt động như thế nào.

111
00:08:46,590 --> 00:08:50,280
Bây giờ, đi đến dấu nhắc nếu tôi gõ,

112
00:08:50,280 --> 00:08:57,955
grunt và xây dựng, bạn sẽ thấy rằng nó sẽ đầu tiên làm sạch,

113
00:08:57,955 --> 00:09:01,550
sau đó để làm bản sao và làm nhiệm vụ imagemin.

114
00:09:01,550 --> 00:09:05,600
Vì vậy, nó thực hiện tất cả ba và sau đó bạn sẽ ngay lập tức thấy rằng

115
00:09:05,600 --> 00:09:11,810
thư mục phân phối được xây dựng trong thư mục dự án của tôi ở đây.

116
00:09:11,810 --> 00:09:15,200
Và bên trong thư mục phân phối bạn có thể thấy rằng các phông chữ đã được sao chép,

117
00:09:15,200 --> 00:09:16,590
các hình ảnh đã được sao chép và

118
00:09:16,590 --> 00:09:20,665
ba tệp HTML đã được sao chép vào thư mục phân phối.

119
00:09:20,665 --> 00:09:22,350
Anh chỉ ở đó nửa đường thôi.

120
00:09:22,350 --> 00:09:29,370
Bây giờ, chúng ta cần để có thể xử lý các tập tin này bằng cách sử dụng plugin usemin.

121
00:09:29,370 --> 00:09:31,675
Vì vậy, chúng ta hãy đi đến điều đó tiếp theo.

122
00:09:31,675 --> 00:09:35,140
Bây giờ, tôi sẽ cài đặt một vài mô-đun NPM

123
00:09:35,140 --> 00:09:38,555
hữu ích cho việc xây dựng thư mục phân phối.

124
00:09:38,555 --> 00:09:42,225
Vì vậy, để làm điều đó, tôi sẽ nói NPM cài đặt.

125
00:09:42,225 --> 00:09:47,120
Tôi có thể chỉ định một tập hợp các mô-đun ở đây vì vậy,

126
00:09:47,120 --> 00:09:52,300
tôi sẽ nói, grunt-contrib-concat.

127
00:09:52,300 --> 00:10:01,000
Vì vậy, điều này được sử dụng để nối các tập tin, sau đó grunt-contrib-cssmin,

128
00:10:01,000 --> 00:10:13,512
grunt-contrib-htmlmin, sau đó nói, grunt-contrib-uglify.

129
00:10:13,512 --> 00:10:18,240
Sau đó grunt-filerev.

130
00:10:18,240 --> 00:10:21,910
Bạn sẽ thấy lý do sử dụng filerev trong một thời gian ngắn,

131
00:10:21,910 --> 00:10:32,925
và sau đó grunt-usemin, và lưu def và sau đó,

132
00:10:35,475 --> 00:10:40,050
cài đặt tất cả các mô-đun grunt này.

133
00:10:40,050 --> 00:10:42,205
Một khi tất cả chúng đã được cài đặt,

134
00:10:42,205 --> 00:10:44,305
bước tiếp theo là đi và cấu hình,

135
00:10:44,305 --> 00:10:47,625
usemin nhiệm vụ mà cũng sử dụng

136
00:10:47,625 --> 00:10:55,090
cssmin Uglify Concat nhiệm vụ để thực hiện việc xây dựng thư mục phân phối.

137
00:10:55,090 --> 00:10:59,140
Bây giờ, cho phép tiến hành trước cấu hình tác vụ usemin.

138
00:10:59,140 --> 00:11:03,750
Vì vậy, đi trở lại tập tin grunt sau imagemin,

139
00:11:03,750 --> 00:11:10,950
tôi sẽ thêm vào nhiệm vụ tiếp theo cho usemin để làm việc với grunt.

140
00:11:10,950 --> 00:11:17,165
Nhiệm vụ đầu tiên mà tôi cần cấu hình được gọi là UseminPrepare.

141
00:11:19,145 --> 00:11:25,175
Nhiệm vụ UseminPrepare này sẽ chuẩn bị các tập tin và sau đó cũng cấu hình

142
00:11:25,175 --> 00:11:32,655
ConCache CSS min và uglify và file ref plugin,

143
00:11:32,655 --> 00:11:35,070
để họ có thể làm công việc của họ một cách chính xác.

144
00:11:35,070 --> 00:11:36,915
Vì vậy, đó là lý do cho UseminPrepare.

145
00:11:36,915 --> 00:11:42,220
Vì vậy, đây là cách cấp usemin plugin đã được thiết kế.

146
00:11:42,220 --> 00:11:48,340
Hơi khác với cách usemin mà chúng tôi sử dụng với các kịch bản trò chơi kết thúc wooks.

147
00:11:48,340 --> 00:11:50,295
Vì vậy, trong useminPrepare,

148
00:11:50,295 --> 00:11:59,590
chỉ cần một số tên ngẫu nhiên mà tôi sẽ sử dụng và sau đó nói đích là dist.

149
00:11:59,590 --> 00:12:08,730
Và sau đó tôi sẽ chỉ định nguồn như tất cả các tập tin html ở đây.

150
00:12:08,730 --> 00:12:13,605
Vì vậy, tôi sẽ nói contactus.html,

151
00:12:14,875 --> 00:12:23,550
aboutus.html, và index.html.

152
00:12:23,550 --> 00:12:26,915
Vì vậy, tất cả ba tập tin này cần phải được xử lý.

153
00:12:26,915 --> 00:12:30,765
Phần tiếp theo của cấu hình usemin này, U

154
00:12:30,765 --> 00:12:37,735
seminPrepare cấu hình là nơi tôi chỉ định các tùy chọn.

155
00:12:38,115 --> 00:12:43,245
Đây là một cái gì đó tôi đã tìm ra bằng cách thử nghiệm và sai lầm.

156
00:12:44,995 --> 00:12:47,395
Chỉ cần làm theo các bước.

157
00:12:47,395 --> 00:12:48,845
Vì vậy, tôi cần phải cấu hình

158
00:12:48,845 --> 00:12:54,125
một vài điều ở đây bên trong nơi tôi cần phải cấu hình một cái gì đó gọi là Flow.

159
00:12:54,125 --> 00:13:00,695
Và sau đó bên trong đó tôi cần phải cấu hình một phần gọi là bước,

160
00:13:00,695 --> 00:13:07,875
và sau đó ở đây tôi chỉ định các bước ở đây và sau đó nói cssmin,

161
00:13:07,915 --> 00:13:14,645
và sau đó tôi sẽ nói js là uglify.

162
00:13:14,645 --> 00:13:21,515
Vì vậy, đây là một cái gì đó mà tôi cần phải xác định ở đây và sau đó sau này tôi nói bài viết,

163
00:13:24,405 --> 00:13:29,695
và ở đây tôi có thể cho phép điều này để cung cấp

164
00:13:29,695 --> 00:13:36,475
một số tùy chọn cho nhiệm vụ cụ thể của họ mà tôi đã cấu hình.

165
00:13:36,475 --> 00:13:40,175
Vì vậy, tôi cung cấp một số tùy chọn bổ sung cho css.

166
00:13:40,175 --> 00:13:44,540
Vì vậy, đó là cung cấp bên trong của bài viết ở đây.

167
00:13:44,540 --> 00:13:49,485
Bây giờ một lần nữa, đây là cách cấu hình phải được thực hiện.

168
00:13:49,485 --> 00:13:52,695
Vì vậy, chúng tôi chỉ học được nó bằng cách nhìn vào tài liệu ở đó.

169
00:13:52,695 --> 00:13:55,390
Vì vậy, ở đây bên trong bài css,

170
00:13:55,390 --> 00:13:59,275
tôi sẽ chỉ định một tên như cssmin.

171
00:13:59,275 --> 00:14:01,450
Cho đến nay đây là nhiệm vụ cssmin.

172
00:14:01,450 --> 00:14:07,974
Tôi sẽ nói CreateConfig:

173
00:14:08,775 --> 00:14:17,005
khối ngữ cảnh chức năng, và sau đó bên trong những chức năng

174
00:14:17,005 --> 00:14:19,955
tôi phải cung cấp các thông số nhất định.

175
00:14:19,955 --> 00:14:22,175
Vì vậy, tôi sẽ nói var

176
00:14:22,175 --> 00:14:31,835
tạo ra tùy chọn bối cảnh máy phát điện.

177
00:14:31,835 --> 00:14:34,685
Vì vậy, đây là một số biến JavaScript mà tôi cần phải

178
00:14:34,685 --> 00:14:38,705
xác định có, đối tượng JavaScript về cơ bản.

179
00:14:38,705 --> 00:14:44,185
Vì vậy, đối tượng này chứa thuộc tính này được gọi là tùy chọn,

180
00:14:44,185 --> 00:14:48,005
nơi tôi có thể chỉ định một số tùy chọn được thông qua

181
00:14:48,005 --> 00:14:51,485
vào CSS phút giao nhiệm vụ của usemin chuẩn bị nhiệm vụ.

182
00:14:51,485 --> 00:14:56,310
Vì vậy, trong đó, giữ

183
00:14:56,310 --> 00:15:02,105
bình luận đặc biệt và sau đó,

184
00:15:05,655 --> 00:15:08,635
rebase là sai.

185
00:15:08,635 --> 00:15:16,025
Rõ ràng tôi cần phải cung cấp điều này để cho nhiệm vụ cssmin của tôi hiện đang xử lý

186
00:15:16,025 --> 00:15:23,855
các sửa đổi phông chữ tuyệt vời và bao gồm trong các tập tin nối.

187
00:15:23,855 --> 00:15:25,390
Nếu tôi không làm điều này,

188
00:15:25,390 --> 00:15:29,380
nó có vẻ để phá vỡ phông chữ tuyệt vời và đây là một cái gì đó mà tôi đã tìm ra,

189
00:15:29,380 --> 00:15:31,890
bằng cách làm một chút

190
00:15:31,890 --> 00:15:37,285
nghiên cứu về tràn ngăn xếp và một số trong những nơi này và tìm ra

191
00:15:37,285 --> 00:15:42,505
rằng vấn đề của họ đang được gây ra với phông chữ awesome có thể được

192
00:15:42,505 --> 00:15:48,619
cố định bằng cách bao gồm điều này vào cấu hình grunt của tôi.

193
00:15:48,619 --> 00:15:51,445
Vì vậy, một lần nữa tôi vừa tìm kiếm

194
00:15:51,445 --> 00:15:55,810
những gợi ý từ một số người đã cố gắng và để khắc phục vấn đề.

195
00:15:55,810 --> 00:15:58,465
Vì vậy, nếu bạn gặp phải các vấn đề như thế

196
00:15:58,465 --> 00:16:02,675
này, đây là một cách để giải quyết các vấn đề có thể phát sinh khi bạn đang

197
00:16:02,675 --> 00:16:07,525
làm việc với các công cụ khác nhau.

198
00:16:07,525 --> 00:16:14,710
Hãy để tôi thêm vào nhiệm vụ tiếp theo cho Concat.

199
00:16:14,710 --> 00:16:21,180
Tôi sẽ chỉ định một số điều ở đây và các tùy chọn.

200
00:16:21,180 --> 00:16:28,135
Tôi chỉ định dấu chấm phẩy

201
00:16:28,135 --> 00:16:31,215
này, vì vậy đây là một cái gì đó mà tôi cần phải xác định cho Concat,

202
00:16:31,215 --> 00:16:37,725
và sau đó cũng sau khi

203
00:16:37,725 --> 00:16:43,180
tùy chọn tôi chỉ định dist là rỗng.

204
00:16:43,180 --> 00:16:48,385
Bây giờ tùy chọn Concat này sẽ được cấu hình bởi UseminPrepare chạy trước đó.

205
00:16:48,385 --> 00:16:50,435
Vì vậy, chúng tôi có thể để hầu hết nó trống ở

206
00:16:50,435 --> 00:16:54,005
đó, và sau đó đó sẽ được cấu hình lại bởi useminPrepare.

207
00:16:54,005 --> 00:16:57,005
Cái tiếp theo là xấu xí.

208
00:16:57,665 --> 00:17:06,055
Bên trong uglify cũng tôi chỉ cần xác định quận này là trống rỗng.

209
00:17:06,055 --> 00:17:08,255
Nếu tôi không chỉ định những điều này,

210
00:17:08,255 --> 00:17:12,890
thì nhiệm vụ usemin không hoạt động chính xác.

211
00:17:12,890 --> 00:17:16,785
Vì vậy, đó là lý do tại sao tôi cần phải xác định tất cả những điều này một cách rõ ràng.

212
00:17:16,785 --> 00:17:21,905
Vì vậy, đối với cssmin cũng tôi sẽ nói quận trống rỗng.

213
00:17:21,905 --> 00:17:29,005
Và sau đó, nhiệm vụ tiếp theo mà tôi sẽ cấu hình được gọi là filerev.

214
00:17:29,625 --> 00:17:36,725
Vì vậy, bạn đã thấy tôi cài đặt plugin filerev cho Grunt.

215
00:17:36,725 --> 00:17:38,480
filerev này làm gì?

216
00:17:38,480 --> 00:17:44,640
Những gì filerev làm là khi usemin chuẩn bị tập tin main.css và main.js,

217
00:17:44,640 --> 00:17:53,170
những gì filerev làm là nó thêm một phần mở rộng bổ sung cho tên chính đó,

218
00:17:53,170 --> 00:18:02,070
để khi bạn chuẩn bị một phiên bản mới của trang web của bạn và tải nó lên trang web,

219
00:18:02,070 --> 00:18:05,895
trong trường hợp ai đó đã nhìn thấy trang web của bạn trước

220
00:18:05,895 --> 00:18:12,030
đó, sau đó trình duyệt của họ có thể đã lấy tiền mặt các tập tin main.css và main.js.

221
00:18:12,030 --> 00:18:15,675
Nếu bạn không đính kèm filerev này những gì xảy ra là,

222
00:18:15,675 --> 00:18:21,480
trình duyệt bên dưới tải phiên bản mới của trang web của bạn.

223
00:18:21,480 --> 00:18:24,605
Nó có thể không tải xuống tệp main.js và main.css

224
00:18:24,605 --> 00:18:28,515
vì nó tìm thấy chúng đã có trong bộ nhớ cache cục bộ.

225
00:18:28,515 --> 00:18:31,820
Vì vậy, trang web của bạn có thể không được hiển thị chính xác.

226
00:18:31,820 --> 00:18:33,725
Vì vậy, để giải quyết vấn đề,

227
00:18:33,725 --> 00:18:37,535
những gì chúng tôi làm là mỗi khi chúng tôi chuẩn bị một thư mục phân phối mới,

228
00:18:37,535 --> 00:18:41,235
chúng tôi sẽ thêm một bản sửa đổi tệp.

229
00:18:41,235 --> 00:18:43,045
Đó là những gì filerev viết tắt của,

230
00:18:43,045 --> 00:18:44,985
số sửa đổi tập tin,

231
00:18:44,985 --> 00:18:54,100
như là một phần mở rộng bổ sung cho tên của những tập tin css và js.

232
00:18:54,100 --> 00:18:56,950
Các tập tin chính.ss và main.js chuẩn bị sẵn.

233
00:18:56,950 --> 00:18:58,820
Vì vậy, đó là những gì filerev làm.

234
00:18:58,820 --> 00:19:02,440
Bây giờ làm thế nào để filerev này có thể tính toán giá trị này?

235
00:19:02,440 --> 00:19:07,685
Phải mất nội dung của các tập tin này và sau đó thực hiện một số xử lý và sau đó tạo ra

236
00:19:07,685 --> 00:19:14,655
một md5 nén 20 ký tự số mà sẽ được đính kèm vào các tập tin chính.

237
00:19:14,655 --> 00:19:17,440
Vì vậy, tôi sẽ cấu hình phần đó ở đây.

238
00:19:17,440 --> 00:19:20,245
Vì vậy, trong các tùy chọn,

239
00:19:20,245 --> 00:19:30,990
tôi chỉ định ở đây nói như thế nào nó được cho là để tính toán số này ở đó.

240
00:19:30,990 --> 00:19:33,740
Vì vậy, tôi nói mã hóa utf8,

241
00:19:33,740 --> 00:19:40,150
và sau đó tôi nói thuật toán rằng nó được sử dụng để tính toán băm này,

242
00:19:40,150 --> 00:19:43,544
những gì chúng ta gọi là băm là md5.

243
00:19:43,544 --> 00:19:47,060
Bây giờ, nó sẽ trở nên rõ ràng hơn khi chúng tôi thực sự chạy

244
00:19:47,060 --> 00:19:53,020
các nhiệm vụ usemin và sau đó xem những gì nó làm, chiều dài 20.

245
00:19:53,020 --> 00:19:55,475
Vì vậy, tôi sẽ trở lại và giải thích những gì điều này

246
00:19:55,475 --> 00:19:59,460
làm khi chúng tôi thực sự chạy nhiệm vụ usemin.

247
00:19:59,460 --> 00:20:06,790
Vì vậy, để tôi hoàn thành các lựa chọn ở đây và sau đó tôi sẽ nói giải phóng.

248
00:20:06,790 --> 00:20:10,855
Vì vậy, tôi cần phải thiết lập một vài điều nữa ở đây và sau đó phát hành,

249
00:20:10,855 --> 00:20:18,150
và sau đó tôi cần phải xác định các tập tin mà filerev của tôi nên hành động.

250
00:20:18,150 --> 00:20:20,625
Vì vậy, tôi sẽ nói các tập tin filerev.

251
00:20:20,625 --> 00:20:22,005
Vậy, bên trong hồ sơ này.

252
00:20:22,005 --> 00:20:26,645
Vì vậy, bạn đang bắt đầu nhìn thấy một mô hình theo cách mọi thứ được chỉ định ở đây.

253
00:20:26,645 --> 00:20:28,640
Vì vậy, khi bạn chỉ định các tập tin ở đây,

254
00:20:28,640 --> 00:20:30,775
bạn sẽ nói nguồn,

255
00:20:30,775 --> 00:20:37,815
và sau đó trong đó bạn sẽ chỉ định dist CSS

256
00:20:37,815 --> 00:20:41,025
và sau đó sao chấm CSS,

257
00:20:41,025 --> 00:20:47,295
và sau đó là một quận js*.js tiếp theo.

258
00:20:47,295 --> 00:20:51,225
Vì vậy, với điều này, bạn đã cấu hình filerev.

259
00:20:51,225 --> 00:20:53,625
Vì vậy, phần filerev được cấu hình.

260
00:20:53,625 --> 00:20:58,820
Và cuối cùng, chúng ta cần cấu hình nhiệm vụ usemin.

261
00:20:58,820 --> 00:21:00,795
Vì vậy, để cấu hình nhiệm vụ usemin,

262
00:21:00,795 --> 00:21:04,125
tôi đi xuống đây và nói usemin,

263
00:21:04,125 --> 00:21:09,100
và ở đây cho phép tôi chỉ định một số tùy chọn cho nhiệm vụ usemin.

264
00:21:09,100 --> 00:21:12,470
Vì vậy, ở đây tôi chỉ định html.

265
00:21:12,470 --> 00:21:21,205
Vì vậy, ở đây tôi chỉ định cho nó những tập tin nó cần phải thay đổi,

266
00:21:22,255 --> 00:21:25,455
nó cần phải cập nhật.

267
00:21:25,455 --> 00:21:32,465
Vì vậy, các tập tin đã được sao chép vào thư mục phân phối.

268
00:21:33,290 --> 00:21:41,975
Và cái cuối cùng là “dist/index.html”.

269
00:21:41,975 --> 00:21:50,300
Vì vậy, đây là ba tập tin mà nó được cho là để xử lý,

270
00:21:50,510 --> 00:21:55,095
và sau đó một số tùy chọn cho điều này ở đây.

271
00:21:55,095 --> 00:22:04,970
Vì vậy, các tùy chọn tôi sẽ chỉ định “AssetsDIRs.”

272
00:22:04,970 --> 00:22:10,520
Vì vậy, đây là nơi mà tất cả các tài sản mà tôi đang sử dụng tồn tại.

273
00:22:10,520 --> 00:22:14,355
Vì vậy, CSS và các tập tin JavaScript tồn tại.

274
00:22:14,355 --> 00:22:21,715
Vì vậy, tôi sẽ chỉ định “dist/css” và “dist/js.”

275
00:22:21,715 --> 00:22:27,020
Với điều này, bạn đã hoàn thành cấu hình nhiệm vụ “usemin”.

276
00:22:27,020 --> 00:22:30,930
Tiếp theo, chúng tôi định cấu hình nhiệm vụ “htmlmin”.

277
00:22:30,930 --> 00:22:32,870
Đối với nhiệm vụ “htmlmin”,

278
00:22:32,870 --> 00:22:37,160
chúng tôi đã chỉ định mục tiêu là “dist”, thư mục phân phối

279
00:22:37,160 --> 00:22:40,140
và “htmlmin” được thực hiện trên

280
00:22:40,140 --> 00:22:44,690
tất cả các tệp HTML nằm trong thư mục phân phối đó.

281
00:22:44,690 --> 00:22:49,560
Các tùy chọn mà chúng tôi chỉ định cho trạng thái này, chúng ta sẽ nói,

282
00:22:49,560 --> 00:22:53,945
“CollapsedWhiteSpace: True” có nghĩa là

283
00:22:53,945 --> 00:22:58,715
tất cả các khoảng trắng trong các tập tin HTML sẽ bị thu gọn,

284
00:22:58,715 --> 00:23:04,670
sao cho [không nghe được] chỉ chứa mã HTML tối thiểu ở đó.

285
00:23:04,670 --> 00:23:08,095
Việc sửa đổi về cơ bản loại bỏ

286
00:23:08,095 --> 00:23:12,390
tất cả các ký tự không liên quan từ các tập tin “htmlmin”.

287
00:23:12,390 --> 00:23:16,570
Bây giờ, chúng tôi cũng chỉ định rằng từ điển của các tập tin,

288
00:23:16,570 --> 00:23:18,880
những tập tin cần phải được cấu hình.

289
00:23:18,880 --> 00:23:22,910
Điều này được xác định là đích, dấu hai chấm, nguồn.

290
00:23:22,910 --> 00:23:28,835
Vì vậy, chúng ta chỉ định “dist/index.html”: “dist/index.html”,

291
00:23:28,835 --> 00:23:32,335
có nghĩa là “index.html” trong thư mục phân phối

292
00:23:32,335 --> 00:23:36,900
sẽ [không nghe được] và sau đó đưa trở lại vào tập tin “index.html”,

293
00:23:36,900 --> 00:23:39,025
cũng trong thư mục phân phối.

294
00:23:39,025 --> 00:23:45,290
Tương tự như vậy, “contactus.html” được chỉ định ở đó và sau đó là

295
00:23:45,290 --> 00:23:51,965
“aboutus.html” cũng được chỉ định như thể hiện trong danh sách các tập tin đó.

296
00:23:51,965 --> 00:23:56,760
Lý do tại sao chúng ta thực hiện “htmlmin” sau khi chúng ta kết thúc “usemin”

297
00:23:56,760 --> 00:24:01,985
là vì “usemin” sẽ thay thế tất cả

298
00:24:01,985 --> 00:24:06,925
các tập lệnh bằng tập tin “.js” chính và cả tất cả các

299
00:24:06,925 --> 00:24:12,535
mã CSS đó nối và kết hợp và thay thế bằng tập tin “.css” chính.

300
00:24:12,535 --> 00:24:15,490
Vì vậy, “htmlmin” sẽ được thực hiện trên

301
00:24:15,490 --> 00:24:20,840
các tập tin HTML kết quả sau khi “usemin” đã hoàn thành công việc của nó.

302
00:24:20,840 --> 00:24:24,605
Đây là cách nó hoạt động trong Grunt.

303
00:24:24,605 --> 00:24:31,060
Vì vậy, Grunt “htmlmin” phải được áp dụng sau khi “usemin” đã hoàn thành công việc của mình.

304
00:24:31,060 --> 00:24:34,080
Vì vậy, một khi tất cả những được cấu hình,

305
00:24:34,080 --> 00:24:40,185
sau đó một bước nhỏ mà tôi cần phải làm là quay trở lại đây,

306
00:24:40,185 --> 00:24:45,285
và sau đó nơi chúng tôi chỉ định cho “jit-grunt”,

307
00:24:45,285 --> 00:24:50,005
chúng ta cần phải xác định rằng điều này “jit-grunt”,

308
00:24:50,005 --> 00:24:53,290
bạn nhớ lại rằng chúng tôi giới thiệu một cái gì đó gọi là

309
00:24:53,290 --> 00:24:57,500
“useminPrepare” [không nghe được] vì vậy bạn cần phải thông báo cho “jit-grunt”

310
00:24:57,500 --> 00:25:01,900
nói rằng cấu hình “UseminPrepare” mà chúng tôi giới thiệu sẽ được

311
00:25:01,900 --> 00:25:06,430
xử lý bởi plugin “grunt-usemin” đó.

312
00:25:06,430 --> 00:25:08,575
Vì vậy, tôi cần phải xác định rõ ràng,

313
00:25:08,575 --> 00:25:14,260
nếu không “jit-grunt” sẽ nhìn xung quanh cho một “UseminPrepare” Grunt plugin.

314
00:25:14,260 --> 00:25:16,480
Vì vậy, để xác định rằng,

315
00:25:16,480 --> 00:25:26,450
tôi sẽ nói “useminPrepare” và nói “grunt-usemin”,

316
00:25:26,450 --> 00:25:30,950
về cơ bản thông báo “jit-grunt” nói rằng “useminPrepare” sẽ được

317
00:25:30,950 --> 00:25:35,960
xử lý bởi “grunt-usemin” plugin đó.

318
00:25:35,960 --> 00:25:41,490
Cuối cùng, hãy cấu hình lại nhiệm vụ “xây dựng” ở phía dưới.

319
00:25:41,490 --> 00:25:46,520
Đi xuống nhiệm vụ “xây dựng” đó sau “imagemin”.

320
00:25:46,520 --> 00:25:49,530
Vì vậy, chúng tôi đã làm “sạch”, “sao chép”, “imagemin”,

321
00:25:49,530 --> 00:25:55,920
sau đó nhiệm vụ tiếp theo mà tôi nên thực hiện là “UseminPrepare” và sau đó sau khi

322
00:25:55,920 --> 00:26:08,820
“UseminPrepare” thực hiện “liên lạc”, sau đó tôi thực hiện “cssmin”,

323
00:26:08,820 --> 00:26:15,305
sau đó tôi thực hiện “uglify”.

324
00:26:15,305 --> 00:26:20,285
Vì vậy, bạn thấy rằng chúng ta phải thực hiện chúng trong một tập hợp các bước nhất định.

325
00:26:20,285 --> 00:26:22,395
Một khi “cssmin” và “uglify” chạy,

326
00:26:22,395 --> 00:26:26,110
sau đó các tập tin “.css” chính và các tập tin “.js” chính sẽ được tạo ra.

327
00:26:26,110 --> 00:26:28,610
Vì vậy, tại thời điểm này, tôi sẽ chạy

328
00:26:28,610 --> 00:26:37,290
“filerev” và sau đó cuối cùng tôi chạy nhiệm vụ “usemin”.

329
00:26:37,290 --> 00:26:40,475
Vì vậy, bạn thấy những bí mật: “sạch”, “sao chép”,

330
00:26:40,475 --> 00:26:43,690
“imagemin”, “useminPrepare”, “concat”, “cssmin”, “uglify”.

331
00:26:43,690 --> 00:26:47,210
Tại thời điểm này, các tập tin “.css” và “.js”,

332
00:26:47,210 --> 00:26:49,815
các tập tin “.css” chính và các tập tin “.js” chính đã sẵn sàng.

333
00:26:49,815 --> 00:26:54,190
Tôi có thể làm “filerev” trên chúng và sau đó cuối cùng chạy “usemin”.

334
00:26:54,190 --> 00:26:58,790
Nhưng điều này, chúng ta hãy lưu các thay đổi và sau đó đi và

335
00:26:58,790 --> 00:27:03,960
xem nhiệm vụ “xây dựng” thực sự chuẩn bị phân phối như thế nào.

336
00:27:03,960 --> 00:27:06,855
[ không nghe được] Đi đến thiết bị đầu cuối của chúng tôi,

337
00:27:06,855 --> 00:27:13,605
tại dấu nhắc tôi gõ “grunt build” và sau đó chờ cho tất cả các nhiệm vụ được thực hiện.

338
00:27:13,605 --> 00:27:16,870
Vì vậy, bạn sẽ thấy rằng nó sẽ chạy qua tất cả các tập hợp các nhiệm vụ,

339
00:27:16,870 --> 00:27:19,320
và sau đó cuối cùng khi nó được thực hiện,

340
00:27:19,320 --> 00:27:24,950
nó sẽ chỉ đơn giản chỉ định rằng tất cả các nhiệm vụ được thực hiện.

341
00:27:24,950 --> 00:27:29,345
Vì vậy, nếu bạn muốn quay trở lại và nhìn vào chuỗi các nhiệm vụ đã được hoàn thành,

342
00:27:29,345 --> 00:27:31,760
bạn chỉ có thể cuộn lại và xem nó làm gì.

343
00:27:31,760 --> 00:27:33,885
Nó lần đầu tiên làm sạch,

344
00:27:33,885 --> 00:27:36,765
sau đó nó sao chép các tập tin HTML,

345
00:27:36,765 --> 00:27:38,400
sau đó nó sao chép

346
00:27:38,400 --> 00:27:40,455
các tập tin phông chữ, sau

347
00:27:40,455 --> 00:27:42,550
đó nó thực hiện nhiệm vụ “imagemin”,

348
00:27:42,550 --> 00:27:45,810
sau đó nó thực hiện “UseminPrepare”,

349
00:27:45,830 --> 00:27:49,645
sau đó nó thực hiện “concat”,

350
00:27:49,645 --> 00:27:52,010
cả việc phân phối và tạo ra,

351
00:27:52,010 --> 00:27:54,130
và sau đó nó thực hiện” uglify”,

352
00:27:54,130 --> 00:28:01,060
sau đó “uglify” nhiệm vụ, sau đó nó chạy “filerev” và sau đó cuối cùng là nhiệm vụ “usemin”.

353
00:28:01,060 --> 00:28:03,920
Và sau đó thư mục phân phối của chúng tôi bây giờ đã sẵn sàng.

354
00:28:03,920 --> 00:28:07,775
Đi đến trình soạn thảo của chúng tôi,

355
00:28:07,775 --> 00:28:11,070
bây giờ bạn thấy rằng thư mục phân phối đã được chuẩn bị.

356
00:28:11,070 --> 00:28:19,415
Hãy xem xét cụ thể các tập tin “.css” và chính “.js”.

357
00:28:19,415 --> 00:28:22,060
Lưu ý tên của các tập tin này.

358
00:28:22,060 --> 00:28:23,590
Chú ý rằng sau khi chính,

359
00:28:23,590 --> 00:28:25,080
có một dấu chấm và sau đó có

360
00:28:25,080 --> 00:28:30,500
một băm 20 ký tự đã được thêm vào bởi “filerev” ở đây.

361
00:28:30,500 --> 00:28:34,605
Vì vậy, những gì xảy ra là nếu tôi chuẩn bị một thư mục phân phối mới,

362
00:28:34,605 --> 00:28:41,130
mỗi khi tôi chuẩn bị thư mục phân phối mới, băm này thay đổi,

363
00:28:41,130 --> 00:28:47,515
có nghĩa là mỗi lần tôi triển khai một phiên bản mới của trang web của tôi,

364
00:28:47,515 --> 00:28:54,130
nếu bất kỳ trình duyệt trước đây đã xem trang web của tôi thì các mục bộ nhớ cache của họ,

365
00:28:54,130 --> 00:28:57,210
nơi họ có thể đã lưu trữ chính “.css” và chính “.js” đã trở nên

366
00:28:57,210 --> 00:29:02,195
vô hiệu bởi vì chúng ta có một phiên bản mới của chính “.css” và chính “.js”.

367
00:29:02,195 --> 00:29:06,805
Vì vậy, trình duyệt sẽ tải lại những điều này.

368
00:29:06,805 --> 00:29:10,455
Tôi đã không hiển thị các “filerev” với các kịch bản NPM,

369
00:29:10,455 --> 00:29:15,940
nhưng tôi chỉ cần thêm nó vào đây chỉ để cho bạn thấy làm thế nào nó được thực hiện với Grunt.

370
00:29:15,940 --> 00:29:19,650
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

371
00:29:19,650 --> 00:29:26,035
Chúng ta hãy xem nhanh trang web trong trình duyệt của chúng tôi.

372
00:29:26,035 --> 00:29:27,795
Đi đến trình duyệt của

373
00:29:27,795 --> 00:29:32,035
bạn, bạn có thể thấy rằng tôi đang tải trong “dist/index.html”.

374
00:29:32,035 --> 00:29:34,200
Vì vậy, đây là từ thư mục phân phối,

375
00:29:34,200 --> 00:29:39,260
vì vậy tôi đang kiểm tra và nó có vẻ tốt.

376
00:29:39,260 --> 00:29:44,440
“ aboutus.html” cũng trông tốt, giống như trước đây.

377
00:29:44,440 --> 00:29:51,060
Và trang liên hệ cũng có vẻ chuẩn bị tốt cho việc triển khai.

378
00:29:51,060 --> 00:29:54,970
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

379
00:29:54,970 --> 00:29:57,365
Sau tất cả những tiếng cằn nhằn,

380
00:29:57,365 --> 00:30:00,560
tôi chắc là bạn cần phải hít thở.

381
00:30:00,560 --> 00:30:09,400
Trước khi bạn làm điều đó, hãy chắc chắn để làm một bình luận tốt với thông điệp “Grunt Phần hai.”