1
00:00:03,320 --> 00:00:09,060
Bây giờ là lúc để chuyển sang phần thứ hai của bài tập Gulp.

2
00:00:09,060 --> 00:00:13,300
Chúng tôi sẽ tiếp tục thực hiện các bước tương tự như chúng tôi đã làm

3
00:00:13,300 --> 00:00:18,230
trong phần thứ hai của bài tập kịch bản NPM và bài tập hiện tại.

4
00:00:18,230 --> 00:00:25,560
Vì vậy, chúng tôi sẽ sắp xếp để xóa thư mục phân phối sau đó sao chép các phông chữ,

5
00:00:25,560 --> 00:00:28,970
sau đó cũng xây dựng lại thư mục phân phối,

6
00:00:28,970 --> 00:00:34,605
sử dụng các mô-đun nút tương tự

7
00:00:34,605 --> 00:00:41,325
như những gì chúng tôi đã sử dụng cho Grant và cả các kịch bản NPM.

8
00:00:41,325 --> 00:00:46,390
Bước tiếp theo của chúng tôi là thiết lập các tác vụ để xóa

9
00:00:46,390 --> 00:00:51,305
thư mục phân phối và cũng sao chép các phông chữ vào thư mục phân phối.

10
00:00:51,305 --> 00:00:54,895
Vì vậy, chúng ta hãy thiết lập một vài mô-đun nút.

11
00:00:54,895 --> 00:00:59,930
Người đầu tiên mà chúng tôi sẽ thiết lập được gọi là del.

12
00:01:02,970 --> 00:01:08,195
Mô hình nút này cho phép bạn xóa một thư mục.

13
00:01:08,195 --> 00:01:13,655
Và chúng ta hãy đi trước và thiết lập các nhiệm vụ Gulp.

14
00:01:13,655 --> 00:01:18,780
Với Gulp, may mắn thay, chúng tôi không cần phải cài đặt một mô-đun khác vì lợi ích của việc sao chép

15
00:01:18,780 --> 00:01:24,505
bởi vì các luồng Gulp cho phép chúng tôi làm việc sao chép các tập tin với ít nỗ lực.

16
00:01:24,505 --> 00:01:27,945
Đi đến tập tin Gulp,

17
00:01:27,945 --> 00:01:31,870
tôi sẽ giới thiệu mô-đun Gulp hỗn hợp,

18
00:01:31,870 --> 00:01:34,185
mà tôi sẽ nói, del.

19
00:01:34,185 --> 00:01:39,575
Và sau đó yêu cầu mô-đun del ở đây.

20
00:01:39,575 --> 00:01:43,510
Vì vậy, một khi chúng ta yêu cầu mô-đun del ở đó,

21
00:01:43,510 --> 00:01:47,524
chúng ta có thể đi trước và thiết lập các nhiệm vụ.

22
00:01:47,524 --> 00:01:51,695
Vì vậy, chúng ta sẽ thiết lập nhiệm vụ sạch sẽ đầu tiên ở đây.

23
00:01:51,695 --> 00:01:54,730
Vì vậy, ngay sau khi nhiệm vụ mặc định,

24
00:01:54,730 --> 00:01:57,075
tôi sẽ thiết lập nhiệm vụ sạch sẽ.

25
00:01:57,075 --> 00:02:01,535
Vì vậy, tôi sẽ nói, Gulp nhiệm vụ sạch.

26
00:02:01,535 --> 00:02:04,320
Và như bạn có thể thấy,

27
00:02:04,320 --> 00:02:08,125
điều này được thiết lập như là chức năng ở đó.

28
00:02:08,125 --> 00:02:14,210
Và bên trong mà chúng ta sẽ nói, trở về del.

29
00:02:14,210 --> 00:02:20,885
Và sau đó tham số được cung cấp là thư mục phân phối ở đây.

30
00:02:20,885 --> 00:02:24,320
Vì vậy, điều này sẽ thiết lập nhiệm vụ sạch sẽ.

31
00:02:24,320 --> 00:02:26,280
Và một khi nhiệm vụ này được chạy,

32
00:02:26,280 --> 00:02:30,875
sau đó thư mục phân phối sẽ bị xóa.

33
00:02:30,875 --> 00:02:40,525
Nhiệm vụ tiếp theo của chúng tôi là sao chép các phông chữ vào thư mục phân phối của chúng.

34
00:02:40,525 --> 00:02:44,625
Vì vậy, tôi có thể nói, sao chép phông chữ.

35
00:02:44,625 --> 00:02:48,595
Và như bạn thấy,

36
00:02:48,595 --> 00:02:55,570
chúng tôi thiết lập chức năng ở đó và sau đó đóng chức năng.

37
00:02:55,570 --> 00:02:59,050
Và sau đó ở đây, tôi chỉ đơn giản là sẽ nói,

38
00:02:59,050 --> 00:03:06,805
Gulp nguồn và nút

39
00:03:06,805 --> 00:03:17,860
module, phông chữ tuyệt vời, phông chữ.

40
00:03:21,900 --> 00:03:33,370
Bạn có thể thấy tôi sử dụng các mô hình globbing, ngay đó.

41
00:03:39,140 --> 00:03:44,750
Và sau đó một khi chúng tôi chọn tất cả các tập tin nguồn,

42
00:03:44,750 --> 00:03:50,560
chúng tôi chỉ cần ống chúng vào tập tin đích.

43
00:03:51,270 --> 00:03:54,645
Vì vậy, bạn nhận thấy rằng chúng tôi không cần

44
00:03:54,645 --> 00:04:01,450
một mô-đun cụ thể để sắp xếp việc sao chép các tập tin.

45
00:04:01,450 --> 00:04:07,320
Chúng tôi chỉ cần sử dụng nguồn Gulp và luồng đích

46
00:04:07,320 --> 00:04:12,965
để có thể dẫn các tập tin từ vị trí nguồn đến vị trí đích.

47
00:04:12,965 --> 00:04:19,075
Vì vậy, hai sẽ thiết lập các nhiệm vụ sạch và sao chép phông chữ nhiệm vụ.

48
00:04:19,075 --> 00:04:24,010
Tiếp theo, chúng ta sẽ thiết lập mô-đun NPM cho nhiệm vụ imagemin.

49
00:04:24,010 --> 00:04:26,865
Vì vậy, việc thu nhỏ và nén các hình ảnh.

50
00:04:26,865 --> 00:04:34,910
Vì vậy, để làm điều đó thêm các loại nhắc Gulp imagemin.

51
00:04:34,910 --> 00:04:40,965
Đây là plugin Gulp tương ứng với mô-đun nút imagemin.

52
00:04:40,965 --> 00:04:45,065
Vì vậy, chúng tôi cài đặt như Gulp plugin,

53
00:04:45,065 --> 00:04:47,860
mà cũng là module nút.

54
00:04:47,860 --> 00:04:51,210
Vì vậy, một khi quá trình cài đặt hoàn tất,

55
00:04:51,210 --> 00:04:54,120
hãy thiết lập nhiệm vụ imagemin đó.

56
00:04:54,120 --> 00:04:56,285
Đi đến tập tin Gulp của

57
00:04:56,285 --> 00:05:05,700
chúng tôi, chúng tôi sẽ thiết lập nhiệm vụ imagemin ở đây.

58
00:05:05,700 --> 00:05:10,895
Vì vậy, chúng tôi sẽ thiết lập các nhiệm vụ imagemin như chức năng.

59
00:05:10,895 --> 00:05:15,050
Như bạn có thể thấy, cấu trúc của mã cho

60
00:05:15,050 --> 00:05:20,965
định nghĩa tác vụ Gulp là khá nhiều tiêu chuẩn.

61
00:05:20,965 --> 00:05:25,110
Vì vậy, bạn sẽ nói nguồn Gulp.

62
00:05:25,110 --> 00:05:29,650
Chúng tôi chỉ định các tập tin nguồn ở đó và các tập tin nguồn

63
00:05:29,650 --> 00:05:38,695
trong thư mục hình ảnh các

64
00:05:38,695 --> 00:05:42,855
tập tin JPG, GIF và PNG từ đó.

65
00:05:42,855 --> 00:05:50,370
Và sau đó ống dẫn chúng qua nhiệm vụ imagemin.

66
00:05:50,370 --> 00:05:54,285
Và sau đó tôi sẽ thiết lập một số thông số ở đây.

67
00:05:54,285 --> 00:06:00,390
Vì vậy, tôi sẽ thiết lập

68
00:06:00,390 --> 00:06:07,240
mức tối ưu hóa đến ba, tiến bộ như đúng.

69
00:06:07,240 --> 00:06:14,534
Vì vậy, điều này sẽ biến chúng thành những hình ảnh tiến bộ và xen kẽ.

70
00:06:14,534 --> 00:06:19,570
Vì vậy, một khi điều này được thiết lập,

71
00:06:20,630 --> 00:06:28,250
sau đó bước tiếp theo là để ống dẫn họ đến đích của họ.

72
00:06:28,250 --> 00:06:36,435
Và điểm đến ở đây như bạn có thể thấy là thư mục hình ảnh trong thư mục phân phối.

73
00:06:36,435 --> 00:06:40,110
Vì vậy, với điều này nhiệm vụ imagemin bây giờ được thiết lập.

74
00:06:40,110 --> 00:06:44,430
Bây giờ, chúng ta sẽ xây dựng nhiệm vụ xây dựng ở đây.

75
00:06:44,430 --> 00:06:50,105
Vì vậy, hãy để tôi thiết lập các nhiệm vụ xây dựng.

76
00:06:50,105 --> 00:06:52,580
Vì vậy, đối với việc xây dựng nhiệm vụ,

77
00:06:52,580 --> 00:06:57,940
những gì bạn muốn làm là trước tiên

78
00:06:59,150 --> 00:07:02,965
thực hiện nhiệm vụ sạch trước khi

79
00:07:02,965 --> 00:07:05,005
các nhiệm vụ còn lại được thực hiện

80
00:07:05,005 --> 00:07:08,220
bởi vì chúng tôi muốn đầu tiên dọn dẹp thư mục phân phối.

81
00:07:08,220 --> 00:07:11,810
Và điều đó phải được hoàn thành trước khi các nhiệm vụ còn lại được thực hiện.

82
00:07:11,810 --> 00:07:18,605
Với Gulp, các nhiệm vụ được thực hiện song song tự động.

83
00:07:18,605 --> 00:07:21,980
Và vì vậy nó có thể xảy ra rằng

84
00:07:21,980 --> 00:07:25,455
nếu bạn thực hiện nhiệm vụ sạch song song với nhiệm vụ còn lại, nhiệm

85
00:07:25,455 --> 00:07:28,500
vụ sạch sẽ có thể kết thúc sau

86
00:07:28,500 --> 00:07:31,430
đó và sau đó xóa một số công việc đã được thực hiện bởi các nhiệm vụ còn lại.

87
00:07:31,430 --> 00:07:34,580
Vì vậy, đó là lý do tại sao khi bạn chỉ định nhiệm vụ Gulp,

88
00:07:34,580 --> 00:07:36,920
nếu bạn chỉ định sạch là một trong những đầu tiên trong,

89
00:07:36,920 --> 00:07:39,105
như là tham số thứ hai ở đây,

90
00:07:39,105 --> 00:07:42,625
thì điều đó có nghĩa là nhiệm vụ đó sẽ được hoàn thành đầu tiên.

91
00:07:42,625 --> 00:07:45,730
Và sau đó các nhiệm vụ còn lại sẽ được thực hiện.

92
00:07:45,730 --> 00:07:48,395
Vì vậy, tôi sẽ nói Gulp bắt đầu.

93
00:07:48,395 --> 00:07:49,830
Với sự bắt đầu Gulp,

94
00:07:49,830 --> 00:07:54,445
tất cả các nhiệm vụ mà chúng tôi chỉ định ở đây sẽ được thực hiện song song.

95
00:07:54,445 --> 00:08:03,975
Vì vậy, tôi sẽ thực hiện nhiệm vụ sao chép phông chữ và cũng là nhiệm vụ imagemin với nhau.

96
00:08:03,975 --> 00:08:07,255
Sau đó, chúng tôi sẽ thiết lập nhiệm vụ usemin và sau đó

97
00:08:07,255 --> 00:08:12,050
thực hiện điều đó cũng cùng với phông chữ sao chép và imagemin.

98
00:08:12,180 --> 00:08:17,400
Một điều cuối cùng mà tôi cần thêm vào trước khi chúng ta tiếp tục thực hiện

99
00:08:17,400 --> 00:08:23,120
các nhiệm vụ là lên đây và sau đó yêu cầu imagemin.

100
00:08:23,120 --> 00:08:30,115
Tôi có thể nói imagemin cần Gulp imagemin.

101
00:08:30,115 --> 00:08:33,810
Và sau đó lưu các thay đổi.

102
00:08:34,670 --> 00:08:39,430
Bây giờ chúng ta hãy đi trước và kiểm tra nhiệm vụ xây dựng.

103
00:08:39,430 --> 00:08:45,400
Tại dấu nhắc, nếu loại Gulp xây dựng của bạn,

104
00:08:45,400 --> 00:08:47,540
sau đó nó nên thực hiện tất cả ba nhiệm vụ.

105
00:08:47,540 --> 00:08:50,440
Vì vậy, bạn sẽ thấy rằng nó bắt đầu nhiệm vụ sạch sẽ và

106
00:08:50,440 --> 00:08:54,290
hoàn thành nó và sau đó nó bắt đầu nhiệm vụ xây dựng thực tế.

107
00:08:54,290 --> 00:08:56,905
Vì vậy, bạn có thể thấy rằng bằng cách xác

108
00:08:56,905 --> 00:09:00,075
định sạch sẽ được hoàn thành trước khi xây dựng thực tế xảy ra,

109
00:09:00,075 --> 00:09:03,255
sau đó bạn chắc chắn rằng bạn đầu tiên làm sạch thư mục phân phối

110
00:09:03,255 --> 00:09:08,170
sau đó xây dựng nhiệm vụ bao gồm các phông chữ sao chép và imagemin,

111
00:09:08,170 --> 00:09:14,140
tất cả chúng hoàn thành song song sẽ được thực hiện sau đó.

112
00:09:14,140 --> 00:09:16,290
Đi đến trình soạn thảo,

113
00:09:16,290 --> 00:09:18,705
bạn sẽ thấy rằng trong thư mục phân phối,

114
00:09:18,705 --> 00:09:23,560
chúng ta thấy rằng các phông chữ đã được sao chép và hình ảnh đã được sao chép chính xác.

115
00:09:23,560 --> 00:09:29,970
Bước cuối cùng là thiết lập tác vụ usemin để xây dựng thư mục phân phối.

116
00:09:29,970 --> 00:09:32,895
Để thiết lập họ usemin nhiệm vụ,

117
00:09:32,895 --> 00:09:40,195
tôi sẽ cài đặt một vài plugin Gulp vì vậy tôi sẽ nói NPM cài đặt.

118
00:09:40,195 --> 00:09:46,310
Và sau đó tôi sẽ cài đặt plugin file Gulp uglify,

119
00:09:46,310 --> 00:09:48,635
mà rõ ràng cũng là một mô-đun nút.

120
00:09:48,635 --> 00:09:57,170
Và sau đó tôi sẽ cài đặt mô-đun nút usemin và sau đó là mô-đun nút rev.

121
00:09:57,170 --> 00:10:02,580
Mô-đun nút Gulp rev giống như biểu đồ tệp rev cấp plugin mà chúng ta đã thấy trước đó.

122
00:10:02,580 --> 00:10:06,170
Nó hơi khác so với tập tin rev mà chúng ta đã thấy trước đó,

123
00:10:06,170 --> 00:10:09,995
nhưng phục vụ cùng một mục đích.

124
00:10:09,995 --> 00:10:20,315
Vì vậy, Gulp rev, sau đó tôi sẽ thiết lập Gulp CSS sạch và sau đó Gulp flatmap.

125
00:10:20,315 --> 00:10:24,390
Bạn sẽ thấy lý do cho điều này như

126
00:10:26,270 --> 00:10:31,720
chúng tôi - Chúng tôi thiết lập nhiệm vụ usemin của chúng tôi, vì vậy,

127
00:10:31,720 --> 00:10:40,470
và gulp-html phút và chúng tôi đi trước và cài đặt các mô-đun ở đây.

128
00:10:40,470 --> 00:10:43,070
Một khi các mô-đun được cài đặt, chúng

129
00:10:43,070 --> 00:10:50,555
ta hãy đi trước và yêu cầu các mô-đun này trong gulpfile của chúng tôi và sau đó thiết lập nhiệm vụ usemin.

130
00:10:50,555 --> 00:10:54,620
Đi đến gulpfile của chúng tôi ngay ở đầu trang,

131
00:10:54,620 --> 00:10:59,920
tôi sẽ yêu cầu các mô-đun mà tôi vừa cài đặt.

132
00:10:59,920 --> 00:11:08,200
Vì vậy, gulp uglify uglify uglify uglify.

133
00:11:08,200 --> 00:11:11,820
Vì vậy, nhiệm vụ uglify sau đó

134
00:11:11,820 --> 00:11:19,590
usemin nhiệm vụ gulp usemin,

135
00:11:19,590 --> 00:11:21,970
sau đó sau đó

136
00:11:21,970 --> 00:11:32,850
rev sau đó,

137
00:11:33,440 --> 00:11:38,620
quên có, dấu phẩy ở đó.

138
00:11:38,620 --> 00:11:46,775
Hãy rất cẩn thận để không bỏ lỡ những dấu phẩy ở đó.

139
00:11:46,775 --> 00:12:08,789
Vì vậy, yêu cầu gulp clean-css, sau đó flatmap, và htmlmin.

140
00:12:08,789 --> 00:12:18,360
Vì vậy, đây là những mô-đun gulp

141
00:12:18,360 --> 00:12:19,970
mà chúng tôi đã cài đặt,

142
00:12:19,970 --> 00:12:24,580
vì vậy hãy lưu các thay đổi và sau đó chúng tôi sẽ đi xuống và thiết lập nhiệm vụ usemin.

143
00:12:24,580 --> 00:12:28,155
Đến dưới cùng của gulpfile,

144
00:12:28,155 --> 00:12:34,405
ngay tại đó tôi sẽ thiết lập nhiệm vụ usemin.

145
00:12:34,405 --> 00:12:36,940
Vì vậy, nhiệm vụ usemin làm gì?

146
00:12:36,940 --> 00:12:43,040
Vì vậy, nhiệm vụ usemin mất

147
00:12:43,040 --> 00:12:50,640
htmlfiles và sau đó tìm kiếm các khối CSS và JavaScript trong htmlfiles,

148
00:12:50,640 --> 00:12:55,610
kết hợp, concatenates, và thu nhỏ và nuglifies các tập tin và sau đó

149
00:12:55,610 --> 00:13:01,325
thay thế chúng bằng cách sử dụng các tập tin nối trong thư mục phân phối.

150
00:13:01,325 --> 00:13:02,965
Vì vậy, để bắt đầu,

151
00:13:02,965 --> 00:13:10,460
đầu tiên tôi sẽ bắt đầu bằng cách xác định nguồn gulp.

152
00:13:10,460 --> 00:13:12,455
Vậy các tập tin nguồn ở đâu?

153
00:13:12,455 --> 00:13:17,090
Vì vậy, các tập tin nguồn là các htmlfiles trong thư mục hiện tại.

154
00:13:17,090 --> 00:13:24,830
Uống quá. /start.html, sau đó tôi sẽ

155
00:13:24,830 --> 00:13:32,990
ống gulpfiles này thông qua mô-đun gulp này gọi là flatmap.

156
00:13:32,990 --> 00:13:34,535
flatmap làm gì?

157
00:13:34,535 --> 00:13:37,980
Flatmap mất nhiều htmlfiles và sau đó

158
00:13:37,980 --> 00:13:42,415
khởi động lên đường ống song song cho mỗi một trong những htmlfiles.

159
00:13:42,415 --> 00:13:46,295
Mỗi người trong số họ đi qua cùng một tập hợp các bước và sau đó cuối cùng,

160
00:13:46,295 --> 00:13:49,550
hội tụ và sao chép nó vào thư mục đích.

161
00:13:49,550 --> 00:13:52,560
Vì vậy, như bạn có thể thấy trong thư mục hiện tại của

162
00:13:52,560 --> 00:13:57,095
chúng tôi, chúng tôi đã có contactus.html, aboutus.html và index.html.

163
00:13:57,095 --> 00:14:00,020
Tất cả ba người trong số họ cần phải được xử lý.

164
00:14:00,020 --> 00:14:04,465
Vì vậy, flatmap cho phép chúng ta xử lý chúng song song,

165
00:14:04,465 --> 00:14:10,280
bắt đầu cùng một tập hợp các đường ống cho mỗi tập tin,

166
00:14:10,280 --> 00:14:12,910
vì vậy đó là lý do tại sao tôi đang sử dụng các flatmap ở đó.

167
00:14:12,910 --> 00:14:20,650
Vì vậy, flatmap, và sau đó bên trong flatmap tôi cần phải xác định các chức năng,

168
00:14:20,650 --> 00:14:25,315
hai tham số; dòng, file.

169
00:14:25,315 --> 00:14:32,590
Vì vậy, các tập tin về cơ bản mất mỗi một trong những tập tin nguồn mà chúng tôi đã chỉ định ở đó,

170
00:14:32,590 --> 00:14:39,550
và sau đó xử lý chúng với cùng một tập hợp các chức năng ở đây,

171
00:14:39,550 --> 00:14:43,460
và sau đó khởi động dòng riêng biệt của nó cho mỗi một trong số họ.

172
00:14:43,460 --> 00:14:48,585
Vì vậy, tôi sẽ trở lại dòng,

173
00:14:48,585 --> 00:14:52,990
và sau đó tôi sẽ ống mỗi một trong số này

174
00:14:53,070 --> 00:15:00,930
thông qua các nhiệm vụ usemin mà chính nó,

175
00:15:00,930 --> 00:15:08,240
bao gồm các css

176
00:15:09,630 --> 00:15:14,470
và uglify JavaScript và html nhiệm vụ.

177
00:15:14,470 --> 00:15:20,965
Vì vậy, đối với css, tôi sẽ thực hiện phần sửa đổi.

178
00:15:20,965 --> 00:15:26,220
Vì vậy, phần css rõ ràng sẽ làm việc nối và thu nhỏ và như vậy,

179
00:15:26,220 --> 00:15:29,520
và sau đó áp dụng các rev để mà nó hoạt động

180
00:15:29,520 --> 00:15:34,930
rằng chuỗi 20 bit để các tập tin main.css có.

181
00:15:34,930 --> 00:15:36,905
Vì vậy, đối với css tôi thiết lập rằng,

182
00:15:36,905 --> 00:15:39,440
và sau đó cho html,

183
00:15:39,440 --> 00:15:42,890
bởi vì tôi có nhiều tập tin html,

184
00:15:42,890 --> 00:15:45,745
tôi cần phải xác định điều này như là một chức năng,

185
00:15:45,745 --> 00:15:55,540
và bên trong chức năng này tôi sẽ nói trở lại htmlmin.

186
00:15:55,570 --> 00:16:05,660
Và sau đó bên trong đó tôi sẽ cung cấp cho nó tham số CollapseWhiteSpace,

187
00:16:05,660 --> 00:16:11,955
và tham số đó sẽ được thiết lập thành true.

188
00:16:11,955 --> 00:16:18,630
Và vì vậy điều này về cơ bản hoàn thành phần html của nó.

189
00:16:18,630 --> 00:16:24,970
Và sau đó tiếp theo là phần js của nó,

190
00:16:24,970 --> 00:16:26,160
phần JavaScript của nó,

191
00:16:26,160 --> 00:16:35,105
mà tôi cần phải làm uglify và sau đó sửa đổi cho nó.

192
00:16:35,105 --> 00:16:44,060
Và sau đó, nếu tôi có

193
00:16:44,060 --> 00:16:48,355
bất kỳ mã javascript nội tuyến thì tôi cần phải áp dụng

194
00:16:48,355 --> 00:16:54,580
nhiệm vụ uglify cho điều đó,

195
00:16:54,580 --> 00:16:57,435
và sau đó cho mã inlinecss,

196
00:16:57,435 --> 00:17:06,640
tôi sẽ sử dụng nhiệm vụ CleanCSS ở đó với concat như là tham số ở đó.

197
00:17:06,640 --> 00:17:09,880
Vì vậy, với điều này, tôi đã thiết lập nhiệm vụ usemin của tôi.

198
00:17:09,880 --> 00:17:13,950
Vì vậy, nó sẽ phục vụ cho tất cả những hành động khác nhau thay mặt tôi.

199
00:17:13,950 --> 00:17:17,010
Và sau đó một khi chúng được thực hiện cuối cùng,

200
00:17:17,010 --> 00:17:22,420
các luồng kết quả sẽ được

201
00:17:22,420 --> 00:17:29,845
piped đến thư mục phân phối.

202
00:17:29,845 --> 00:17:34,290
Vì vậy, với điều này, nhiệm vụ usemin bây giờ là tất cả thiết lập.

203
00:17:34,290 --> 00:17:36,295
Hãy để tôi lưu lại những thay đổi.

204
00:17:36,295 --> 00:17:41,900
Và sau đó tôi sẽ đi xuống đến nhiệm vụ xây dựng và sau đó sau khi imagemin tôi sẽ cũng

205
00:17:41,900 --> 00:17:47,955
thêm usemin là một trong những nhiệm vụ được thực hiện bởi nhiệm vụ xây dựng.

206
00:17:47,955 --> 00:17:50,410
Vì vậy, với những thay đổi này, vì vậy,

207
00:17:50,410 --> 00:17:52,945
chúng tôi đã sửa đổi nhiệm vụ xây dựng, chúng ta

208
00:17:52,945 --> 00:18:00,720
hãy tiếp tục và sau đó kiểm tra xem thư mục phân phối được xây dựng đúng hay không.

209
00:18:00,720 --> 00:18:04,315
Đi đến dấu nhắc, hãy để tôi gõ vào gulp

210
00:18:04,315 --> 00:18:10,065
build và sau đó chờ cho gulp để xây dựng tất cả các nhiệm vụ khác nhau.

211
00:18:10,065 --> 00:18:13,585
Nó sẽ mất một chút thời gian cho usemin để hoàn thành công việc của nó,

212
00:18:13,585 --> 00:18:18,265
và khi nó được hoàn thành việc chuyển đổi,

213
00:18:18,265 --> 00:18:22,875
sau đó thư mục phân phối của tôi bây giờ sẽ sẵn sàng để được xem.

214
00:18:22,875 --> 00:18:28,260
Đi đến trình soạn thảo bây giờ bạn có thể thấy rằng thư mục phân phối đã được

215
00:18:28,260 --> 00:18:34,345
chuẩn bị ở đây và bạn có thể thấy chỉ mục, contactus và aboutus.htmlfile.

216
00:18:34,345 --> 00:18:37,470
Bạn có thể thấy rằng khi bạn mở index.htmlfile,

217
00:18:37,470 --> 00:18:39,365
nó đã được nén.

218
00:18:39,365 --> 00:18:42,605
Và htmlmin đã được thực hiện,

219
00:18:42,605 --> 00:18:46,515
đặc biệt lưu ý cách tập tin css đã được thay thế

220
00:18:46,515 --> 00:18:54,300
bằng css/main- và sau đó bạn sẽ thấy một chuỗi dài there.css.

221
00:18:54,300 --> 00:19:04,300
Vì vậy, đây là giống như các tập tin rev mà bạn đã thấy trong grunt với mô-đun gulp rev,

222
00:19:04,300 --> 00:19:06,960
đây là những gì nó làm với tên của tập tin.

223
00:19:06,960 --> 00:19:11,350
Vì vậy, nếu bạn nhìn vào css bạn có thể thấy rằng tên của tập tin là gạch nối chính và

224
00:19:11,350 --> 00:19:16,470
sau đó một số chuỗi có chấm css và tương tự cho javascriptfile.

225
00:19:16,470 --> 00:19:20,345
Vì vậy, đây là những gì mô-đun gulp rev làm,

226
00:19:20,345 --> 00:19:22,505
và sau đó tất cả ba tập tin này được chuẩn bị.

227
00:19:22,505 --> 00:19:26,850
Chúng ta hãy nhìn vào các tập tin này trong trình duyệt.

228
00:19:26,850 --> 00:19:33,195
Đi đến trình duyệt tôi có thể thấy rằng có các tệp nguồn đang được lưu một cách chính xác.

229
00:19:33,195 --> 00:19:36,190
Để tôi kiểm tra thư mục phân phối.

230
00:19:36,190 --> 00:19:38,220
Vì vậy, trong thư mục phân phối,

231
00:19:38,220 --> 00:19:42,350
index.html đã được chuẩn bị bởi

232
00:19:42,350 --> 00:19:47,925
tác vụ xây dựng gulp dường như đang hoạt động chính xác.

233
00:19:47,925 --> 00:19:51,560
Hãy để tôi cũng kiểm tra trang về,

234
00:19:51,560 --> 00:19:55,435
và chúng ta có thể thấy rằng về trang cũng được xây dựng một cách chính xác,

235
00:19:55,435 --> 00:19:58,680
và cũng là trang liên hệ.

236
00:19:58,680 --> 00:20:04,075
Vì vậy, bây giờ bạn có thể thấy rằng nhiệm vụ gulp của chúng tôi đã hoàn thành.

237
00:20:04,075 --> 00:20:07,105
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

238
00:20:07,105 --> 00:20:11,430
Trong bài tập này, chúng tôi thiết lập việc dọn dẹp và

239
00:20:11,430 --> 00:20:15,780
sao chép các tập tin phông chữ vào thư mục phân phối của chúng

240
00:20:15,780 --> 00:20:18,530
tôi, chúng tôi đã thực hiện nhiệm vụ imagemin và sau đó cuối cùng chúng tôi thiết lập

241
00:20:18,530 --> 00:20:22,865
nhiệm vụ usemin để xây dựng thư mục phân phối của chúng tôi.

242
00:20:22,865 --> 00:20:26,140
Với điều này, chúng tôi hoàn thành bài tập này.

243
00:20:26,140 --> 00:20:33,770
Đây có thể là thời điểm tốt cho bạn để làm một bình luận tốt với thông điệp Gulp phần hai.