1
00:00:03,060 --> 00:00:06,095
Bây giờ chúng ta đã cấp đủ

2
00:00:06,095 --> 00:00:08,700
rồi, đã đến lúc Gulp rồi.

3
00:00:08,700 --> 00:00:12,010
Chúng tôi sẽ cố gắng thực hiện cùng một loại

4
00:00:12,010 --> 00:00:16,235
tác vụ mà chúng tôi đã thực hiện với cả NPM Scripts và Grunt,

5
00:00:16,235 --> 00:00:22,995
nhưng bây giờ chúng tôi sẽ cố gắng làm tương tự bằng cách sử dụng Gulp và Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
Để bắt đầu, trước tiên hãy cài đặt Gulp như một mô-đun toàn cầu.

7
00:00:29,090 --> 00:00:31,635
Vì vậy, để làm điều đó, tại dấu nhắc,

8
00:00:31,635 --> 00:00:37,970
gõ npm -g install gulp,

9
00:00:38,740 --> 00:00:42,380
điều này sẽ cài đặt Gulp như một mô-đun toàn cầu và làm

10
00:00:42,380 --> 00:00:45,625
cho nó có sẵn để sử dụng trên dòng lệnh.

11
00:00:45,625 --> 00:00:47,605
Sau khi chúng tôi hoàn thành điều này,

12
00:00:47,605 --> 00:00:51,425
bước tiếp theo là cài đặt Gulp cục bộ trong dự án của chúng tôi.

13
00:00:51,425 --> 00:00:53,975
Vì vậy, để làm điều đó, tại dấu nhắc,

14
00:00:53,975 --> 00:01:01,700
gõ npm install gulp —save-dev.

15
00:01:01,700 --> 00:01:03,835
Một khi chúng tôi đã hoàn thành hai điều này,

16
00:01:03,835 --> 00:01:10,765
đó là thời gian để tiếp tục và cấu hình các nhiệm vụ Gulp của chúng tôi.

17
00:01:10,765 --> 00:01:14,195
Trước khi chúng tôi làm điều đó, bước tiếp theo của

18
00:01:14,195 --> 00:01:18,170
chúng tôi, chúng tôi sẽ cài đặt plugin Gulp Sass để chúng tôi có thể

19
00:01:18,170 --> 00:01:23,560
cấu hình Sass để xem như là nhiệm vụ chuyển đổi trong tập tin Gulp của chúng tôi.

20
00:01:23,560 --> 00:01:26,460
Vì vậy, để đi trước và làm điều đó,

21
00:01:26,460 --> 00:01:30,580
gõ npm install

22
00:01:31,420 --> 00:01:39,100
gulp sass —save-dev.

23
00:01:40,270 --> 00:01:43,835
Ngoài ra trong khi chúng tôi đang ở đó,

24
00:01:43,835 --> 00:01:48,305
chúng tôi cũng có thể cài đặt Trình duyệt Sync Gulp Task

25
00:01:48,305 --> 00:01:53,835
quá, để chúng tôi có thể cấu hình cả hai này sau khi khác.

26
00:01:53,835 --> 00:02:07,960
Vì vậy, tôi sẽ cài đặt, npm cài đặt trình duyệt đồng bộ —save-dev.

27
00:02:08,830 --> 00:02:11,480
Một khi hai điều này được cài đặt,

28
00:02:11,480 --> 00:02:17,980
sau đó chúng ta hãy tiếp tục và tạo tệp Gulp của chúng tôi và sau đó cấu hình Nhiệm vụ Gulp của chúng tôi ở đây.

29
00:02:17,980 --> 00:02:20,590
Đi đến thư mục dự án của chúng tôi, chúng

30
00:02:20,590 --> 00:02:27,905
ta hãy tạo một tập tin mới và sau đó đặt tên nó là gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
và trong tập tin này, chúng tôi sẽ cấu hình nhiệm vụ Gulp của chúng tôi.

32
00:02:32,380 --> 00:02:34,950
Vì vậy, một khi gulpfile.js đã sẵn sàng,

33
00:02:34,950 --> 00:02:39,940
cũng cấu hình các nhiệm vụ Gulp ở đây bằng cách đầu tiên bắt đầu

34
00:02:39,940 --> 00:02:50,310
với 'sử dụng nghiêm chọn' và sau đó var gulp.

35
00:02:50,310 --> 00:02:57,585
Vì vậy, chúng ta cần phải yêu cầu các mô-đun nút gulp,

36
00:02:57,585 --> 00:02:59,810
và cũng trong khi chúng ta đang ở đó,

37
00:02:59,810 --> 00:03:07,600
chúng ta sẽ yêu cầu mô-đun nút sass.

38
00:03:12,470 --> 00:03:16,310
Như tôi đã đề cập trong bài tập trước đó,

39
00:03:16,310 --> 00:03:22,110
nó sẽ trở nên rõ ràng hơn đối với bạn tại sao mã được viết như thế này, một

40
00:03:22,110 --> 00:03:30,245
khi bạn hiểu thêm về các mô-đun nút trong một khóa học sau.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, vì vậy những gì chúng tôi đã làm là bao gồm các

42
00:03:35,535 --> 00:03:40,895
mô-đun nút Gulp Contrast và BowserSync vào tập tin Gulp của chúng tôi.

43
00:03:40,895 --> 00:03:42,545
Và một khi bạn đã làm điều đó,

44
00:03:42,545 --> 00:03:45,360
đó là thời gian để cấu hình nhiệm vụ Gulp của chúng tôi.

45
00:03:45,360 --> 00:03:47,940
Như chúng ta đã học trước đây,

46
00:03:47,940 --> 00:03:52,340
Gulp là một mã dựa trên cách cấu hình các

47
00:03:52,340 --> 00:03:57,815
nhiệm vụ không giống như Grunt mà dựa nhiều hơn vào cấu hình của các nhiệm vụ.

48
00:03:57,815 --> 00:04:00,455
Vì vậy, trong trường hợp Gulp,

49
00:04:00,455 --> 00:04:04,230
em bé sẽ thiết lập nhiệm vụ của chúng tôi để gõ

50
00:04:04,230 --> 00:04:11,340
gulp.task và sau đó chúng ta hãy thiết lập một tên nhiệm vụ 'sass',

51
00:04:11,340 --> 00:04:13,545
và sau đó cho nhiệm vụ này,

52
00:04:13,545 --> 00:04:17,630
chúng tôi sẽ thiết lập này như một chức năng,

53
00:04:19,990 --> 00:04:23,205
và đây là cách mã được chuẩn bị.

54
00:04:23,205 --> 00:04:28,850
Vì vậy, Gulp Nhiệm vụ Sass chức năng và ở đây,

55
00:04:28,850 --> 00:04:32,310
chúng tôi đang thiết lập các nhiệm vụ Gulp,

56
00:04:34,850 --> 00:04:45,030
vì vậy chúng tôi sẽ gõ return gulp.src ('. /css/ *.scss') Như chúng ta đã biết,

57
00:04:45,030 --> 00:05:00,800
Gulp là một công cụ dựa trên mã trên cấu hình.

58
00:05:00,800 --> 00:05:06,630
Vì vậy, chúng tôi sẽ chuẩn bị nhiệm vụ này như vậy.

59
00:05:06,630 --> 00:05:14,390
Vì vậy, bạn thấy rằng chúng tôi đã chỉ định Gulp nguồn ống sass trên,

60
00:05:14,390 --> 00:05:18,630
và sau đó ở đây, lỗi.

61
00:05:19,220 --> 00:05:22,600
Vì vậy, nếu một lỗi xảy ra,

62
00:05:24,020 --> 00:05:31,870
chúng tôi sẽ sử dụng cách Sass để đăng nhập lỗi và sau đó ống này

63
00:05:31,870 --> 00:05:43,480
thông qua gulp.dest ('. /css '), và

64
00:05:52,970 --> 00:05:59,270
hoàn thành cấu hình của nhiệm vụ Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Bạn phải tự hỏi tại sao chúng tôi viết mã như thế này.

66
00:06:03,540 --> 00:06:06,960
Nó nói nguồn gulp và sau đó chỉ định một cái gì đó ở đó,

67
00:06:06,960 --> 00:06:10,650
và sau đó một trong những tiếp theo nói ống và sau đó một trong những tiếp theo nói ống.

68
00:06:10,650 --> 00:06:16,045
Hãy hiểu cách Gulp làm mọi việc một chút chi tiết hơn.

69
00:06:16,045 --> 00:06:19,855
Để giúp giải thích lý do tại sao chúng tôi cấu hình các nhiệm vụ như thế,

70
00:06:19,855 --> 00:06:24,730
tôi có một lời giải thích về những gì chúng tôi gọi là Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
Cách Gulp hoạt động giống như bạn mất một tập hợp các tập tin và bạn chỉ định tập hợp các

72
00:06:29,900 --> 00:06:35,405
tập tin bằng cách nói nguồn gulp như chúng tôi đã làm với các nhiệm vụ Sass có.

73
00:06:35,405 --> 00:06:39,005
Vì vậy, ở đây, đây là chức năng mà mất các tập tin.

74
00:06:39,005 --> 00:06:44,405
Bạn thậm chí có thể chỉ định các tập tin bằng cách sử dụng các mô hình globbing mà chúng tôi đã học được trong Grunt,

75
00:06:44,405 --> 00:06:49,410
và sau đó nó tạo ra một dòng các đối tượng đại diện cho các tập tin này.

76
00:06:49,410 --> 00:06:51,560
Bây giờ, một khi dòng được tạo ra,

77
00:06:51,560 --> 00:06:54,480
sau đó các dòng có thể được piped thông qua một tập hợp các

78
00:06:54,480 --> 00:06:58,795
chức năng khác để biến đổi các tập tin này.

79
00:06:58,795 --> 00:07:07,400
Và sau đó cuối cùng, các tập tin được chuyển đổi kết quả có thể được đưa vào một vị trí đích.

80
00:07:07,400 --> 00:07:09,795
Vì vậy, đó là lý do tại sao chúng tôi chỉ định nguồn Gulp,

81
00:07:09,795 --> 00:07:11,585
sau đó chúng tôi chỉ định đường ống.

82
00:07:11,585 --> 00:07:15,945
Vì vậy, các đường ống cho phép các dòng được đường ống thông qua một chức năng,

83
00:07:15,945 --> 00:07:18,295
và như vậy, đó là lý do tại sao chúng tôi đã nói đường ống chấm,

84
00:07:18,295 --> 00:07:20,600
và sau đó chúng tôi đã nói gulp.

85
00:07:20,600 --> 00:07:23,965
Và sau đó chúng tôi nói Sass về lỗi.

86
00:07:23,965 --> 00:07:30,255
Và sau đó người tiếp theo nói Pipe Gulp Dest.

87
00:07:30,255 --> 00:07:35,950
Và như vậy, gulp dest xác định đích của các tập tin đã được xử lý.

88
00:07:35,950 --> 00:07:43,860
Vì vậy, đó là cách một nhiệm vụ điển hình được chỉ định trong gulp bởi vì nhưng gulp hoạt động trên luồng.

89
00:07:43,860 --> 00:07:48,875
Vì vậy, các tập tin dòng của bạn thông qua các đường ống cho đến khi chúng

90
00:07:48,875 --> 00:07:54,805
được chuyển giao và sau đó chúng sẽ được gửi tại điểm đến được chỉ định.

91
00:07:54,805 --> 00:07:59,610
Vì vậy, bạn sẽ thấy cấu trúc tương tự cho nhiều nhiệm vụ gulp mà chúng tôi

92
00:07:59,610 --> 00:08:04,740
sẽ cấu hình trong bài tập này và bài tập tiếp theo.

93
00:08:04,740 --> 00:08:11,460
Bây giờ bạn đã hiểu một chút về cách gulp hoạt động với luồng và làm thế nào

94
00:08:11,460 --> 00:08:21,005
nhiệm vụ gulp sử dụng đường ống để xử lý các tập tin thông qua một tập hợp các chức năng,

95
00:08:21,005 --> 00:08:28,290
và nó trở nên rõ ràng hơn cho bạn lý do tại sao chúng tôi thiết lập nhiệm vụ sass này như đã thấy trong mã này ở đây.

96
00:08:28,290 --> 00:08:33,260
Nhiệm vụ tiếp theo mà chúng ta sẽ cấu hình được gọi là gulp,

97
00:08:33,340 --> 00:08:39,900
và chúng tôi sẽ cấu hình nhiệm vụ này như đồng hồ sass.

98
00:08:39,900 --> 00:08:42,700
Vì vậy, đây là một nhiệm vụ xem mà chúng ta sẽ cấu hình,

99
00:08:42,700 --> 00:08:48,920
và sau đó bạn sẽ chỉ định chức năng.

100
00:08:49,190 --> 00:08:51,330
Và như vậy ở đây,

101
00:08:51,330 --> 00:08:53,320
nhiệm vụ quan sát gulp sass,

102
00:08:53,320 --> 00:08:58,490
những gì chúng tôi làm là chỉ định các tập tin mà chúng tôi sẽ xem.

103
00:08:58,490 --> 00:09:05,600
Vì vậy, chúng tôi sử dụng nhiệm vụ xem gulp để xem các tập tin.

104
00:09:05,600 --> 00:09:08,830
Vì vậy, đồng hồ đã được xây dựng vào gulp.

105
00:09:08,830 --> 00:09:17,660
Vì vậy, nó sẽ mất gulp xem và sau đó chúng tôi chỉ định các tập tin có *.SCSS.

106
00:09:17,660 --> 00:09:21,390
Vì vậy, như bạn có thể thấy, đồng hồ gulp sẽ xem các

107
00:09:21,390 --> 00:09:25,915
tập tin này và sau đó khi bất kỳ thay đổi nào đối với các tập tin này xảy ra,

108
00:09:25,915 --> 00:09:30,225
sau đó nó sẽ chạy nhiệm vụ sass,

109
00:09:30,225 --> 00:09:32,975
mà chúng tôi đã chỉ định trước đó.

110
00:09:32,975 --> 00:09:37,360
Vì vậy, đó là cách mà nhiệm vụ xem sass được thiết lập.

111
00:09:37,360 --> 00:09:39,495
Bây giờ chúng tôi đã thực hiện hai điều này, chúng

112
00:09:39,495 --> 00:09:42,730
ta hãy thiết lập tác vụ đồng bộ trình duyệt tiếp theo.

113
00:09:42,730 --> 00:09:47,650
Vì vậy, đóng đó với dấu chấm phẩy và sau đó

114
00:09:47,650 --> 00:09:53,375
nhiệm vụ tiếp theo mà chúng tôi sẽ thiết lập là tác vụ đồng bộ trình duyệt.

115
00:09:53,375 --> 00:10:01,735
Vì vậy, tôi sẽ chỉ định tác vụ đồng bộ trình duyệt ở đó.

116
00:10:01,735 --> 00:10:04,550
Và sau đó đối với tác vụ đồng bộ trình duyệt,

117
00:10:04,550 --> 00:10:07,480
tôi sẽ chỉ định chức năng đó.

118
00:10:07,480 --> 00:10:11,725
Một lần nữa, lưu ý cấu trúc trong đó chúng tôi viết mã,

119
00:10:11,725 --> 00:10:16,405
nhiệm vụ gulp và sau đó bạn chỉ định một cái gì đó mà theo sau nhưng với một chức năng.

120
00:10:16,405 --> 00:10:17,990
Bây giờ một lần nữa như tôi đã nói,

121
00:10:17,990 --> 00:10:23,155
chúng ta học các mô-đun nút trong khóa học cuối cùng của chuyên môn này,

122
00:10:23,155 --> 00:10:28,520
nó sẽ trở nên rõ ràng hơn cho bạn tại sao không mô-đun được viết với cấu trúc này,

123
00:10:28,520 --> 00:10:31,790
và tại sao các chức năng được viết như thế này.

124
00:10:31,790 --> 00:10:34,470
Vì vậy, chúng ta nói gulp tác vụ trình duyệt đồng bộ.

125
00:10:34,470 --> 00:10:38,260
Ở đây, tôi sẽ xác định một biến,

126
00:10:38,260 --> 00:10:40,920
một biến JavaScript được gọi là tập tin,

127
00:10:40,920 --> 00:10:45,050
đó là không có gì nhưng trong mảng,

128
00:10:45,160 --> 00:10:55,935
và rằng bên trong những tập tin mảng tôi sẽ chỉ định tất cả các tập tin mà

129
00:10:55,935 --> 00:10:58,790
nếu sửa đổi trình duyệt đồng bộ cần

130
00:10:58,790 --> 00:11:07,125
phải gây ra việc tải lại hoặc các tập tin.

131
00:11:07,125 --> 00:11:12,690
Vì vậy, các tập tin html, các tập tin CSS trong thư mục CSS,

132
00:11:12,690 --> 00:11:18,420
và sau đó tương tự tôi cũng sẽ xem các tập tin hình ảnh,

133
00:11:26,080 --> 00:11:31,960
và các tập tin JavaScript.

134
00:11:33,840 --> 00:11:36,730
Tất cả các tập tin này nếu bất kỳ trong số họ thay đổi.

135
00:11:36,730 --> 00:11:40,800
Vì vậy, sau này, tôi sẽ cấu hình đồng bộ trình duyệt ở đây.

136
00:11:40,800 --> 00:11:44,315
Vì vậy, tôi sẽ nói đồng bộ hóa trình duyệt.

137
00:11:44,315 --> 00:11:49,010
Chúng tôi đã xác định biến này được gọi là đồng bộ trình duyệt trước đó.

138
00:11:49,010 --> 00:11:54,400
Vì vậy, chúng ta phải khởi tạo đồng bộ hóa trình duyệt,

139
00:11:56,230 --> 00:12:01,805
và do đó, tham số đầu tiên

140
00:12:01,805 --> 00:12:08,895
là các tập tin cần phải được theo dõi,

141
00:12:08,895 --> 00:12:18,160
và sau đó tham số thứ hai chỉ định các tùy chọn mà chúng tôi đang đưa ra cho trình duyệt.

142
00:12:18,160 --> 00:12:21,720
Vì vậy, tùy chọn mà tôi đang chỉ định là dành cho máy chủ.

143
00:12:21,720 --> 00:12:31,350
Tôi sẽ chỉ định thư mục cơ sở như thư mục hiện tại,

144
00:12:31,350 --> 00:12:38,595
và sau đó hoàn thành đặc điểm kỹ thuật của tác vụ đồng bộ trình duyệt.

145
00:12:38,595 --> 00:12:43,280
Vì vậy, với điều này, chúng tôi đã hoàn thành chỉ định tác vụ đồng bộ trình duyệt ở đây.

146
00:12:43,280 --> 00:12:46,750
Vì vậy, bạn có thể thấy rằng làm thế nào chúng tôi cấu hình tác vụ đồng bộ hóa trình duyệt,

147
00:12:46,750 --> 00:12:48,480
chúng tôi chỉ định các tệp và sau đó lưu

148
00:12:48,480 --> 00:12:51,750
đồng bộ hóa trình duyệt trong đó và cung cấp các tệp như tham số đầu tiên.

149
00:12:51,750 --> 00:12:58,940
Tham số thứ hai là các tùy chọn cho plugin đồng bộ hóa trình duyệt.

150
00:12:58,940 --> 00:13:02,620
Sau đó, cuối cùng, chúng tôi sẽ lên lịch hoặc

151
00:13:02,620 --> 00:13:10,680
chúng tôi sẽ cấu hình nhiệm vụ được gọi là mặc định.

152
00:13:10,680 --> 00:13:17,005
Cũng giống như tôi có nhiệm vụ mặc định trong Grunt,

153
00:13:17,005 --> 00:13:23,475
chúng tôi cũng có thể có một nhiệm vụ mặc định tương tự được xác định cho gulp.

154
00:13:23,475 --> 00:13:28,095
Vì vậy, ở đây chúng ta nói gulp tác vụ mặc định trình duyệt đồng bộ hóa,

155
00:13:28,095 --> 00:13:33,275
và sau đó chỉ định chức năng.

156
00:13:33,275 --> 00:13:42,085
Và bên trong đó chúng ta sẽ chỉ định bắt đầu gulp.

157
00:13:42,085 --> 00:13:46,185
Vì vậy, điều này xác định rằng tôi nên bắt đầu

158
00:13:46,185 --> 00:13:54,730
nhiệm vụ khác mà sass xem nhiệm vụ. Nhiệm vụ xem sass cần phải được bắt đầu.

159
00:13:54,840 --> 00:14:00,370
Đảm bảo rằng tác vụ đồng bộ trình duyệt đang chạy trước khi tác vụ xem sass được bắt đầu.

160
00:14:00,370 --> 00:14:04,060
Vì vậy, đây là cú pháp để xác định rằng trong gulp.

161
00:14:04,060 --> 00:14:08,095
Vì vậy, với điều này, chúng tôi đã cấu hình tất cả mọi thứ mà chúng ta cần trong tập tin gulp.

162
00:14:08,095 --> 00:14:09,870
Vì vậy, một lần nữa quay trở lại,

163
00:14:09,870 --> 00:14:11,675
có những bước mà chúng tôi đã làm.

164
00:14:11,675 --> 00:14:17,460
Chúng tôi lần đầu tiên sử dụng yêu cầu để bao gồm tất cả các plugin gulp của họ ở

165
00:14:17,460 --> 00:14:22,575
đó, sau đó chúng tôi cấu hình nhiệm vụ sass,

166
00:14:22,575 --> 00:14:25,455
và sau đó xác định nhiệm vụ xem sass.

167
00:14:25,455 --> 00:14:31,995
Đây là nơi chúng tôi sử dụng đồng hồ gulp có sẵn cho chúng tôi như từ gulp.

168
00:14:31,995 --> 00:14:37,290
Sau đó, chúng tôi đã chỉ định tác vụ đồng bộ trình duyệt và sau đó cuối cùng

169
00:14:37,290 --> 00:14:43,150
sắp xếp lại nhiệm vụ mặc định với trình duyệt Sync và bắt đầu gulp với đồng hồ sass.

170
00:14:43,150 --> 00:14:45,705
Bây giờ, chúng ta hãy xem những thay đổi,

171
00:14:45,705 --> 00:14:49,875
và sau đó chúng ta sẽ đi trước và thực hiện các tập tin gulp thêm,

172
00:14:49,875 --> 00:14:52,255
và loại nhắc gulp.

173
00:14:52,255 --> 00:14:59,780
Bạn sẽ thấy rằng gulp khởi động với đồng bộ trình duyệt và nhiệm vụ xem sass bắt đầu,

174
00:14:59,780 --> 00:15:06,565
và sau đó đồng bộ trình duyệt của bạn sẽ bắt đầu phục vụ các tập tin.

175
00:15:06,565 --> 00:15:12,770
Nếu bạn xem trang web của mình bằng trình duyệt,

176
00:15:12,770 --> 00:15:17,425
bạn sẽ có thể thấy trang web được phục vụ trong trình duyệt.

177
00:15:17,425 --> 00:15:23,090
Hãy để tôi cũng minh họa chức năng của nhiệm vụ đồng hồ.

178
00:15:23,090 --> 00:15:26,795
Vì vậy, tôi sẽ kéo lên style.css và

179
00:15:26,795 --> 00:15:31,185
chỉ cần cố gắng lưu thay đổi và bạn sẽ nhận thấy rằng ở phía bên trái,

180
00:15:31,185 --> 00:15:36,850
nhiệm vụ sass được gọi ngay lập tức và nó

181
00:15:36,850 --> 00:15:44,460
sẽ biên dịch lại các tập tin style.scss vào các tập tin CSS.

182
00:15:44,460 --> 00:15:48,840
Và sau đó trình duyệt đó sẽ tải lại vào thời điểm này.

183
00:15:48,840 --> 00:15:54,085
Với điều này, chúng tôi hoàn thành phần đầu tiên của bài tập gulp.

184
00:15:54,085 --> 00:15:58,710
Trong phần thứ hai, chúng tôi sẽ chuẩn bị thư mục phân phối.

185
00:15:58,710 --> 00:16:05,030
Đây là thời điểm tốt để bạn thực hiện một git-commit với thông điệp Gulp phần 1.