1
00:00:03,550 --> 00:00:06,380
Đến lúc bắt đầu Grunting rồi.

2
00:00:06,380 --> 00:00:10,280
Trong bài tập này và bài tập tiếp theo, chúng ta sẽ lặp lại

3
00:00:10,280 --> 00:00:15,925
cùng một loại thiết lập như chúng ta đã làm với các kịch bản NPM.

4
00:00:15,925 --> 00:00:22,405
Trong phần đầu tiên, chúng ta sẽ thiết lập chuyển đổi từ SCSS sang CSS.

5
00:00:22,405 --> 00:00:28,570
Sau đó, chúng tôi sẽ thiết lập một tác vụ xem và cũng phục vụ mã bằng cách sử dụng đồng bộ hóa trình duyệt.

6
00:00:28,570 --> 00:00:31,065
Trong phần thứ hai của bài tập,

7
00:00:31,065 --> 00:00:40,010
chúng tôi sẽ sử dụng Usman và các nhiệm vụ khác nhau để chuẩn bị nếp gấp phân phối.

8
00:00:40,010 --> 00:00:44,170
Những bài tập này không có nghĩa là cách duy nhất để

9
00:00:44,170 --> 00:00:49,720
thực hiện các cấu hình Grunt hoặc các tập tin gọi.

10
00:00:49,720 --> 00:00:54,575
Đây chỉ là một minh họa về cách chúng ta có thể sử dụng các công cụ này.

11
00:00:54,575 --> 00:00:58,375
Bạn có thể muốn tìm ra cách riêng của bạn để thiết lập tập tin

12
00:00:58,375 --> 00:01:03,320
Grunt của bạn và tập tin cuộc gọi của bạn cho các dự án của bạn.

13
00:01:03,320 --> 00:01:13,200
Bước đầu tiên của chúng tôi trong việc sử dụng Grunt là thiết lập Grunt CLI như một mô-đun NPM toàn cầu.

14
00:01:13,200 --> 00:01:21,550
Để làm điều đó, thêm loại nhắc: NPM -g cài đặt Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Đây là giao diện dòng lệnh cho Grunt.

16
00:01:25,190 --> 00:01:27,480
Một khi điều này được thiết lập,

17
00:01:27,480 --> 00:01:34,690
sau đó chúng tôi sẽ thiết lập một mô-đun Grunt NPM địa phương để sử dụng trong các dự án của chúng tôi.

18
00:01:34,690 --> 00:01:38,370
Grunt CLI cho phép chúng ta sử dụng Grunt.

19
00:01:38,370 --> 00:01:40,050
Chúng tôi đã thiết lập CLI Grunt.

20
00:01:40,050 --> 00:01:47,405
Sau đó, bước tiếp theo là thiết lập - Grunt cục bộ,

21
00:01:47,405 --> 00:01:52,655
vì vậy; NPM cài đặt Grunt trừ đi tiết kiệm dev.

22
00:01:52,655 --> 00:01:56,365
Sau đó cài đặt Grunt cục bộ.

23
00:01:56,365 --> 00:01:58,930
Một khi bạn đã hoàn thành hai bước đó,

24
00:01:58,930 --> 00:02:04,850
bước tiếp theo là đi đến dự án của chúng tôi và sau đó tạo một tập tin mới,

25
00:02:04,850 --> 00:02:10,165
và chúng tôi sẽ đặt tên nó là Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
Bên trong Gruntfile.js này, chúng tôi sẽ thiết lập mã để cấu hình các tác vụ Grunt của chúng tôi.

27
00:02:19,034 --> 00:02:27,770
Trong tập tin này, bước đầu tiên là thêm 'use strict' nghĩa là 'use strict',

28
00:02:27,770 --> 00:02:30,640
'use strict' code JavaScript.

29
00:02:30,640 --> 00:02:36,460
Sau đó, bạn nói module.exports

30
00:02:37,050 --> 00:02:42,830
= hàm (grunt).

31
00:02:44,990 --> 00:02:53,005
Sau đó, bên trong đây, chúng tôi sẽ thiết lập cấu hình Grunt cho tất cả các nhiệm vụ.

32
00:02:53,005 --> 00:02:57,655
Như tôi đã đề cập trước đó, Grunt là một Á hậu nhiệm vụ cấu hình dựa trên.

33
00:02:57,655 --> 00:03:02,200
Vì vậy, chúng tôi sẽ cài đặt các plug-in Grunt khác nhau cho

34
00:03:02,200 --> 00:03:08,370
các nhiệm vụ khác nhau và sau đó cấu hình chúng trong tập tin Grunt của chúng tôi.

35
00:03:08,370 --> 00:03:10,769
Để làm cấu hình,

36
00:03:10,769 --> 00:03:12,605
chúng tôi sẽ thêm vào mã ở đây,

37
00:03:12,605 --> 00:03:19,290
nói: Grunt.initconfig

38
00:03:19,410 --> 00:03:28,655
và bên trong InitConfig này,

39
00:03:28,655 --> 00:03:32,805
chúng tôi sẽ thêm vào cấu hình cho các nhiệm vụ Grunt của bánh xe.

40
00:03:32,805 --> 00:03:34,580
Sau khi bạn hoàn thành việc này,

41
00:03:34,580 --> 00:03:37,145
hãy lưu các thay đổi.

42
00:03:37,145 --> 00:03:39,385
Trong bước tiếp theo của

43
00:03:39,385 --> 00:03:47,610
chúng tôi, chúng tôi sẽ thiết lập một vài plug-in Grunt để cho phép chúng tôi chuyển đổi mã SCSS thành mã CSS.

44
00:03:47,610 --> 00:03:54,240
Để làm điều đó, tôi sẽ cài đặt một mô-đun NPM gọi là

45
00:03:54,240 --> 00:04:01,875
Grunt SASS — Grunt SASS, save def.

46
00:04:01,875 --> 00:04:03,450
Thêm vào đó,

47
00:04:03,450 --> 00:04:07,375
tôi sẽ thiết lập thêm hai module Grunt gọi là,

48
00:04:07,375 --> 00:04:18,610
NPM Install Time Grunt, và Jit Grunt.

49
00:04:19,990 --> 00:04:23,430
Hai module — Time Grunt và Jit grunt.

50
00:04:23,430 --> 00:04:31,190
Mô-đun Time Grunt in ra các thống kê thời gian để chạy các tác vụ Grunt khác nhau.

51
00:04:31,190 --> 00:04:35,150
Mô-đun Jit Grunt được sử dụng để tải trong

52
00:04:35,150 --> 00:04:40,420
các plug-in Grunt bất cứ khi nào chúng được yêu cầu trong bất kỳ ứng dụng nào.

53
00:04:40,420 --> 00:04:42,860
Cách thay thế khác là tải trong

54
00:04:42,860 --> 00:04:49,475
các mô-đun Grunt khác nhau một cách rõ ràng trong tập tin cấu hình Grunt của bạn.

55
00:04:49,475 --> 00:04:53,085
Tôi thích sử dụng Jit Grunt để nó sẽ chăm sóc tải

56
00:04:53,085 --> 00:04:56,790
trong bất kỳ plugin Grunt mà tôi cần như có thể được yêu cầu,

57
00:04:56,790 --> 00:04:59,955
như trong khi tôi sử dụng chúng trong mã.

58
00:04:59,955 --> 00:05:04,785
Cài đặt hai Time Grunt và Jit Grunt và một khi chúng được cài đặt,

59
00:05:04,785 --> 00:05:11,845
thì đó là thời gian để cấu hình nhiệm vụ chuyển đổi SASS của chúng tôi.

60
00:05:11,845 --> 00:05:14,870
Bây giờ bạn rõ ràng phải tự hỏi tại sao chúng ta gõ

61
00:05:14,870 --> 00:05:18,250
module.exports này và sau đó chức năng và như vậy.

62
00:05:18,250 --> 00:05:21,485
Đây là cách chúng tôi xác định mô-đun nút.

63
00:05:21,485 --> 00:05:26,590
Chúng tôi sẽ đối phó với cấu trúc của mô-đun nút và tại sao chúng tôi sử dụng cách tiếp cận này

64
00:05:26,590 --> 00:05:33,375
trong khóa học mô-đun nút phía máy chủ sau này trong chuyên môn hóa.

65
00:05:33,375 --> 00:05:38,415
Đối với thời điểm này, chỉ cần chấp nhận rằng đó là cách mã được viết cho Grunt,

66
00:05:38,415 --> 00:05:41,040
bởi vì các tập tin Grunt chính nó

67
00:05:41,040 --> 00:05:47,110
là một mô-đun nút sẽ tải trong các plug-in Grunt khác nhau.

68
00:05:47,110 --> 00:05:51,815
Sau khi chúng tôi làm điều đó, chúng tôi sẽ yêu cầu một vài plugin Grunt ở đây.

69
00:05:51,815 --> 00:05:59,080
Để làm điều đó, chúng tôi sẽ nói yêu cầu ('thời gian- grunt'),

70
00:05:59,080 --> 00:06:08,840
và chúng tôi sẽ nói grunt so với cấu hình mà chúng tôi sử dụng để tải trong Time Grunt.

71
00:06:08,840 --> 00:06:12,555
Để yêu cầu, như bạn sẽ tìm hiểu sau khi bạn tìm hiểu về mô-đun nút,

72
00:06:12,555 --> 00:06:16,660
là một cách để nói rằng tải trong mô-đun nút Time Grunt

73
00:06:16,660 --> 00:06:20,815
được sử dụng trong mô-đun nút cụ thể này.

74
00:06:20,815 --> 00:06:28,450
Tương tự như vậy, tôi sẽ yêu cầu Jit Grunt node module.

75
00:06:32,190 --> 00:06:37,095
Mô-đun nút Jit Grunt này đảm bảo rằng nó sẽ tải trong

76
00:06:37,095 --> 00:06:42,540
bất kỳ mô-đun nút khác hoặc bất kỳ plug-in Grunt khác- đó là các module nút,

77
00:06:42,540 --> 00:06:50,925
về cơ bản, như trong khi chúng thực sự được ngụ ý trong Grunt của tôi để thực hiện các nhiệm vụ khác nhau.

78
00:06:50,925 --> 00:06:55,295
Thay thế sẽ là tải thủ công trong mỗi và mỗi một trong

79
00:06:55,295 --> 00:07:00,600
những Grunt plug-in một cách rõ ràng bằng cách sử dụng tuyên bố yêu cầu.

80
00:07:00,600 --> 00:07:04,445
Tôi đang tiết kiệm cho mình một chút rắc rối bằng cách chỉ sử dụng Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
mà sẽ chăm sóc tải các mô-đun nút khi cần thiết.

82
00:07:07,825 --> 00:07:11,395
Bây giờ di chuyển vào cấu hình,

83
00:07:11,395 --> 00:07:16,159
như chúng ta đã hiểu, Grunt hoạt động trên cấu hình,

84
00:07:16,159 --> 00:07:21,935
vì vậy mỗi Grunt plug-in mà chúng tôi muốn sử dụng để thực hiện một nhiệm vụ,

85
00:07:21,935 --> 00:07:27,225
nó cần phải được cấu hình bên trong tập tin Grunt InitConfig này.

86
00:07:27,225 --> 00:07:32,965
Cấu hình này về cơ bản là một đối tượng JavaScript.

87
00:07:32,965 --> 00:07:36,145
Nếu bạn đã quen thuộc với các đối tượng JavaScript,

88
00:07:36,145 --> 00:07:40,275
bạn bắt đầu hiểu cú pháp rất, rất nhanh.

89
00:07:40,275 --> 00:07:47,330
Nhiệm vụ đầu tiên mà tôi sẽ cấu hình là SASS.

90
00:07:47,330 --> 00:07:49,855
Vì vậy, tôi gõ vào SASS ở đây,

91
00:07:49,855 --> 00:07:55,200
và sau đó bên trong SASS, tôi nói quận.

92
00:07:55,920 --> 00:08:01,570
Bây giờ bạn phải tin rằng đây là cách cấu hình được thực hiện.

93
00:08:01,570 --> 00:08:03,280
Vì vậy, tôi nói dist,

94
00:08:03,280 --> 00:08:05,295
và sau đó bên trong đó,

95
00:08:05,295 --> 00:08:10,980
tôi nói các tập tin, và sau đó trong đó,

96
00:08:10,980 --> 00:08:14,125
tôi chỉ định các tập tin cần phải được chuyển đổi.

97
00:08:14,125 --> 00:08:20,270
Tôi nói, CSS/styles.CSS, mà

98
00:08:20,270 --> 00:08:28,815
là phụ thuộc vào CSS/styles.scss.

99
00:08:28,815 --> 00:08:36,925
Với điều này, chúng tôi hoàn thành cấu hình của nhiệm vụ SASS ở đây.

100
00:08:36,925 --> 00:08:40,620
Một khi chúng tôi hoàn thành cấu hình nhiệm vụ SASS,

101
00:08:40,620 --> 00:08:43,485
nếu bạn thực sự muốn thực hiện nhiệm vụ SASS,

102
00:08:43,485 --> 00:08:52,950
sau đó xuống dưới bạn sẽ cấu hình nhiệm vụ SASS bằng cách nói “Grunt.RegisterTask”,

103
00:08:54,770 --> 00:08:58,545
và sau đó tôi sẽ gọi nhiệm vụ này CSS,

104
00:08:58,545 --> 00:09:00,280
và sau đó tôi sẽ,

105
00:09:00,280 --> 00:09:04,935
trong ngoặc scribe, nói “SASS.”

106
00:09:04,935 --> 00:09:07,605
Bây giờ, để hiểu cú pháp ở đây,

107
00:09:07,605 --> 00:09:13,715
điều này như bạn có thể thấy nó nói “Grunt.RegisterTask” và tên của nhiệm vụ này là CSS.

108
00:09:13,715 --> 00:09:15,340
Và nhiệm vụ này liên quan đến điều gì?

109
00:09:15,340 --> 00:09:21,685
Nhiệm vụ này liên quan đến việc thực hiện nhiệm vụ SASS đã được cấu hình ở đây.

110
00:09:21,685 --> 00:09:25,080
Đây là cách chúng tôi đọc cú pháp này ở đây.

111
00:09:25,080 --> 00:09:27,950
Nếu bạn không muốn, bạn không cần phải cấu hình này,

112
00:09:27,950 --> 00:09:33,065
bởi vì chúng tôi sẽ sử dụng SASS cùng với nhiệm vụ xem để tự động

113
00:09:33,065 --> 00:09:38,460
chạy SASS khi tệp SCSS của chúng tôi được thay đổi.

114
00:09:38,460 --> 00:09:40,840
Với điều này, chúng ta hãy lưu các thay đổi.

115
00:09:40,840 --> 00:09:45,570
Để tôi cho các bạn thấy nhiệm vụ đặc biệt này trong hành động.

116
00:09:45,570 --> 00:09:48,990
Nếu bạn cấu hình nhiệm vụ với tên CSS ở đó,

117
00:09:48,990 --> 00:09:50,650
sau đó thêm dấu nhắc,

118
00:09:50,650 --> 00:09:54,655
bạn có thể gõ “grunt.CSS” và sau đó nó sẽ thực hiện

119
00:09:54,655 --> 00:10:00,090
nhiệm vụ chuyển đổi mã sass sang mã CSS.

120
00:10:00,090 --> 00:10:04,005
Đi đến dấu nhắc lệnh của bạn, tại dấu nhắc,

121
00:10:04,005 --> 00:10:09,070
gõ vào “grunt.CSS” và bạn sẽ thấy

122
00:10:09,070 --> 00:10:17,530
nhiệm vụ SASS thực hiện và sau đó chuyển đổi tập tin styles.sess sang tập tin styles.CSS.

123
00:10:17,530 --> 00:10:19,390
Ngoài ra, như bạn có thể thấy,

124
00:10:19,390 --> 00:10:23,340
Time Grunt sẽ in ra các số liệu thống kê như

125
00:10:23,340 --> 00:10:27,800
thế này để cho biết mỗi nhiệm vụ mất bao nhiêu thời gian.

126
00:10:27,800 --> 00:10:29,520
Nếu điều đó là quan tâm đến bạn,

127
00:10:29,520 --> 00:10:32,880
sau đó bạn có thể xem xét các chi tiết này ở đây.

128
00:10:32,890 --> 00:10:39,360
Trong bước tiếp theo của chúng tôi, chúng tôi sẽ cấu hình đồng hồ và máy chủ,

129
00:10:39,360 --> 00:10:41,800
để giữ một chiếc đồng hồ trên

130
00:10:41,800 --> 00:10:45,960
các tập tin SASS và tự động chuyển đổi chúng khi chúng được thay đổi,

131
00:10:45,960 --> 00:10:48,625
và sau đó chúng tôi sẽ thiết lập máy chủ,

132
00:10:48,625 --> 00:10:54,045
sử dụng BrowserSync để phục vụ trang web của chúng tôi.

133
00:10:54,045 --> 00:10:56,700
Để thiết lập các nhiệm vụ xem và phục vụ,

134
00:10:56,700 --> 00:10:59,740
tôi sẽ cài đặt một vài plug-in grunt hơn,

135
00:10:59,740 --> 00:11:03,990
vì vậy tôi sẽ nói npm cài đặt,

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch trừ đi tiết kiệm dev.

137
00:11:12,465 --> 00:11:15,480
Đây là chiếc đồng hồ Grunt-contrib-watch.

138
00:11:15,480 --> 00:11:21,450
Grunt plug-in đó là một mô-đun nút, vì vậy hãy cài đặt đó.

139
00:11:21,670 --> 00:11:32,030
Vì vậy, đồng hồ plugin-in cho phép bạn giữ một chiếc đồng hồ trên các tập tin khác nhau của bạn.

140
00:11:32,030 --> 00:11:33,550
Các plug-in tiếp theo mà tôi sẽ

141
00:11:33,550 --> 00:11:43,750
cài đặt là grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
Module BrowserSync là một trong những mà tôi sẽ sử dụng,

143
00:11:50,515 --> 00:11:54,230
để lưu các tập tin từ thư mục dự án của tôi,

144
00:11:54,230 --> 00:12:00,090
để tôi có thể xem trang web trong một trình duyệt.

145
00:12:00,090 --> 00:12:04,845
Một khi tôi đã cài đặt hai mô-đun đó,

146
00:12:04,845 --> 00:12:08,295
đó là thời gian để đi vào grunt.initconfig của tôi,

147
00:12:08,295 --> 00:12:11,635
và sau đó cấu hình hai nhiệm vụ.

148
00:12:11,635 --> 00:12:13,300
Một để giữ một chiếc đồng hồ,

149
00:12:13,300 --> 00:12:18,125
cái thứ hai để phục vụ lên các tập tin bằng cách sử dụng BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Vì vậy, quay trở lại initconfig của tôi,

151
00:12:20,680 --> 00:12:23,710
đặt một dấu phẩy ở đó sau SASS,

152
00:12:23,710 --> 00:12:26,460
và sau đó di chuyển vào dòng tiếp theo.

153
00:12:27,050 --> 00:12:32,650
Luôn luôn nhớ để đặt dấu phẩy này ở đó.

154
00:12:32,650 --> 00:12:40,990
Một dấu phẩy bị thiếu gây ra rất nhiều đau đầu khi bạn đang cố gắng để chạy các nhiệm vụ grunt của bạn.

155
00:12:40,990 --> 00:12:44,635
Rất khó để xác định rằng bạn đã bỏ lỡ dấu phẩy.

156
00:12:44,635 --> 00:12:46,950
Vì vậy, điều quan trọng là phải chú ý đến

157
00:12:46,950 --> 00:12:52,290
cú pháp và đảm bảo rằng bạn không bỏ lỡ bất kỳ dấu phẩy nào trong số đó.

158
00:12:52,290 --> 00:12:55,425
Nó sẽ quay lại để cắn anh vào sai thời điểm.

159
00:12:55,425 --> 00:12:57,105
Vì vậy, nhiệm vụ tiếp theo,

160
00:12:57,105 --> 00:13:00,190
mà tôi sẽ cấu hình là WatchTask.

161
00:13:00,190 --> 00:13:03,605
Vì vậy, tôi nói Watch và tôi muốn xem gì?

162
00:13:03,605 --> 00:13:10,070
Tôi muốn xem các tập tin này, đó là CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Vì vậy, đây là tập tin SCSS mà tôi muốn xem.

164
00:13:17,680 --> 00:13:22,445
Tất cả các tập tin SCSS trong thư mục CSS của tôi.

165
00:13:22,445 --> 00:13:26,670
Nếu bất kỳ trong số họ được sửa đổi,

166
00:13:26,670 --> 00:13:32,865
sau đó nhiệm vụ tương ứng mà tôi sẽ thực hiện là, SASS.

167
00:13:32,865 --> 00:13:36,180
Nhiệm vụ SASS mà tôi đã cấu hình trước đó.

168
00:13:36,180 --> 00:13:39,710
Vì vậy, với điều này, tôi đã cấu hình WatchTask của tôi,

169
00:13:39,710 --> 00:13:42,820
để giữ một chiếc đồng hồ trên các tập tin SCSS và sau đó

170
00:13:42,820 --> 00:13:46,075
tự động chuyển đổi chúng bằng cách gọi SASS.

171
00:13:46,075 --> 00:13:50,475
Bây giờ với WatchTask tôi thực sự có thể giữ một chiếc đồng hồ trên một số tập tin,

172
00:13:50,475 --> 00:13:55,650
và sau đó tự động gọi các nhiệm vụ tương ứng cho những tập tin.

173
00:13:55,650 --> 00:13:57,895
Vì vậy, ví dụ, tôi có thể giữ một chiếc đồng hồ trên các

174
00:13:57,895 --> 00:14:01,660
tập tin JavaScript của tôi và sau đó tự động làm JS gợi ý,

175
00:14:01,660 --> 00:14:04,465
khi các tập tin của tôi thay đổi.

176
00:14:04,465 --> 00:14:07,770
Hoặc để làm nhận dạng và như vậy.

177
00:14:07,770 --> 00:14:12,100
Bây giờ, cái tiếp theo mà tôi sẽ cấu hình là BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Một lần nữa đừng quên dấu phẩy sau khi WatchTask,

179
00:14:15,345 --> 00:14:19,070
và sau đó gõ vào BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Tôi sẽ nói BrowserSync ở đây và sau đó cho BrowserSync,

181
00:14:26,369 --> 00:14:30,570
tôi sẽ nói cấu hình một nhiệm vụ bên trong.

182
00:14:30,570 --> 00:14:35,090
Bây giờ, đây là cú pháp mà chúng tôi sử dụng để đưa vào

183
00:14:35,090 --> 00:14:40,410
cấu hình bên trong tập tin grunt của chúng tôi.

184
00:14:40,410 --> 00:14:42,840
Vì vậy, nó nói BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Bây giờ, nếu bạn hỏi tôi tại sao,

186
00:14:44,940 --> 00:14:46,895
chúng tôi chỉ cần đọc tài liệu,

187
00:14:46,895 --> 00:14:52,275
cho mỗi một trong những trình cắm thêm đó và sau đó tìm ra cách cấu hình các trình cắm thêm đó.

188
00:14:52,275 --> 00:14:56,000
Vì vậy, tôi đã đọc tài liệu và tôi đã tìm ra

189
00:14:56,000 --> 00:15:00,885
một số thiết lập cơ bản cho mỗi nhiệm vụ này vì vậy đó là lý do tại sao tôi chỉ gõ chúng vào.

190
00:15:00,885 --> 00:15:03,525
Rõ ràng nếu bạn muốn linh hoạt hơn,

191
00:15:03,525 --> 00:15:07,350
bạn có thể muốn đọc tài liệu tương ứng và sau đó tìm ra

192
00:15:07,350 --> 00:15:11,655
các cách khác để cấu hình các tác vụ này.

193
00:15:11,655 --> 00:15:18,010
Cấu hình của tôi ở đây chỉ là một cách để giải quyết hoặc giải quyết các vấn đề.

194
00:15:18,010 --> 00:15:22,850
Vì vậy, ở đây tôi chỉ định các BSFiles,

195
00:15:22,850 --> 00:15:28,685
vì vậy tập tin này chỉ định

196
00:15:28,685 --> 00:15:36,715
những tập tin cần được theo dõi bởi BrowserSync của tôi và sau đó khi bất kỳ tập tin nào thay đổi,

197
00:15:36,715 --> 00:15:44,805
sau đó BrowserSync của tôi sẽ làm cho trình duyệt được tải lại.

198
00:15:44,805 --> 00:15:50,185
Vì vậy, tôi sẽ xem tất cả các tập tin trong thư mục CSS của tôi, các

199
00:15:50,185 --> 00:15:53,220
tập tin HTML trong thư mục dự án của tôi,

200
00:15:53,220 --> 00:15:57,945
và sau đó tất cả các tập tin JavaScript của tôi trong thư mục JS.

201
00:15:57,945 --> 00:16:03,835
Vì vậy, với điều này tôi đã cấu hình tất cả những tập tin mà tôi sẽ giữ một chiếc đồng hồ,

202
00:16:03,835 --> 00:16:10,335
và sau đó tự động gây ra một tải lại của trang của tôi khi được yêu cầu.

203
00:16:10,335 --> 00:16:14,180
Và sau đó, cấu hình tiếp theo mà tôi cần

204
00:16:14,180 --> 00:16:19,100
làm là một số tùy chọn khác, cho BrowserSync của tôi.

205
00:16:19,100 --> 00:16:23,230
Vì vậy, các tùy chọn mà tôi sẽ chỉ định là,

206
00:16:23,510 --> 00:16:29,190
WatchTask true, có nghĩa là có một WatchTask đang chạy,

207
00:16:29,190 --> 00:16:33,130
và thư mục cơ sở cho máy chủ của tôi.

208
00:16:33,130 --> 00:16:35,605
Vì vậy, tôi nói BaseDir,

209
00:16:35,605 --> 00:16:41,960
và sau đó tôi chỉ định, dấu gạch chéo chấm.

210
00:16:41,960 --> 00:16:43,720
Vì vậy, thư mục hiện tại,

211
00:16:43,720 --> 00:16:45,880
như thư mục cơ sở của tôi.

212
00:16:45,880 --> 00:16:47,740
Vì vậy, với những thay đổi này,

213
00:16:47,740 --> 00:16:51,815
hãy để tôi lưu các thay đổi vào tập tin grunt của tôi,

214
00:16:51,815 --> 00:17:01,085
và sau đó tôi sẽ đi xuống dưới đây và sau đó cấu hình một nhiệm vụ grunt, ở đây được gọi là mặc định.

215
00:17:01,085 --> 00:17:05,145
Vì vậy, tôi sẽ chỉ định nhiệm vụ là mặc định.

216
00:17:05,145 --> 00:17:08,720
Đối với nhiệm vụ mặc định này, tôi cần phải làm gì?

217
00:17:08,720 --> 00:17:12,060
Tôi cần phải thực hiện

218
00:17:12,160 --> 00:17:20,055
BrowserSync và cũng là nhiệm vụ thứ hai mà tôi sẽ làm là xem.

219
00:17:20,055 --> 00:17:24,590
Tôi sẽ phải thực hiện tác vụ BrowserSync trước tiên và sau đó là WatchTask sau.

220
00:17:24,590 --> 00:17:27,310
Bởi vì tác vụ BrowserSync sẽ bắt đầu phục vụ máy chủ của tôi.

221
00:17:27,310 --> 00:17:30,605
Nếu tôi thực hiện WatchTask trước và nhiệm vụ BrowserSync sau này,

222
00:17:30,605 --> 00:17:32,495
WatchTask sẽ về cơ bản,

223
00:17:32,495 --> 00:17:38,260
dừng mọi thứ và sau đó tất cả các nhiệm vụ còn lại đằng sau sẽ không thực hiện.

224
00:17:38,260 --> 00:17:40,525
Vì vậy, nếu bạn đang sử dụng WatchTask,

225
00:17:40,525 --> 00:17:45,624
hãy làm điều đó như là một trong những cuối cùng trong chuỗi mà bạn chỉ định trong dấu ngoặc vuông này.

226
00:17:45,624 --> 00:17:50,415
Với điều này, dự án của tôi bây giờ được cấu hình,

227
00:17:50,415 --> 00:17:57,100
để cả hai giữ một chiếc đồng hồ trên các tập tin SASS của tôi và phục vụ nó lên bất cứ khi nào cần thiết.

228
00:17:57,100 --> 00:17:59,670
Vì vậy, điều này hoàn thành tập tin grunt của tôi, chúng

229
00:17:59,670 --> 00:18:02,795
ta hãy quay trở lại thiết bị đầu cuối của chúng tôi.

230
00:18:02,795 --> 00:18:04,740
Quay trở lại thiết bị đầu cuối của

231
00:18:04,740 --> 00:18:07,670
tôi, tôi đã mở một tab khác và sau đó trong tab này,

232
00:18:07,670 --> 00:18:11,335
tôi sẽ chạy nhiệm vụ grunt,

233
00:18:11,335 --> 00:18:17,010
mà cũng sẽ giữ BrowserSync của tôi chạy và sẽ phục vụ lên

234
00:18:17,010 --> 00:18:22,965
các tập tin và tự động tải lại trang web,

235
00:18:22,965 --> 00:18:25,055
nếu bất kỳ của những tập tin thay đổi.

236
00:18:25,055 --> 00:18:30,790
Vì vậy, nếu bạn cấu hình một nhiệm vụ như một nhiệm vụ mặc định như chúng tôi đã làm trong bài tập,

237
00:18:30,790 --> 00:18:32,125
sau đó tại dấu nhắc,

238
00:18:32,125 --> 00:18:37,725
tôi chỉ cần gõ grunt và sau đó nó sẽ tự động thực hiện nhiệm vụ mặc định.

239
00:18:37,725 --> 00:18:40,680
Một khi nhiệm vụ grunt của tôi bắt đầu chạy,

240
00:18:40,680 --> 00:18:44,015
bạn có thể thấy rằng nó đã bắt đầu BrowserSync và nó đang phục vụ lên

241
00:18:44,015 --> 00:18:48,600
các tập tin và nó cũng đang chạy WatchTask

242
00:18:48,600 --> 00:18:54,825
, đang chờ đợi cho bất kỳ thay đổi để tự động chạy nhiệm vụ SCSS.

243
00:18:54,825 --> 00:19:01,460
Để chứng minh cho bạn làm thế nào các nhiệm vụ SCSS sẽ được kích hoạt,

244
00:19:01,460 --> 00:19:05,120
bất cứ khi nào tôi thực hiện bất kỳ thay đổi để tập tin Styles.scss của

245
00:19:05,120 --> 00:19:07,725
tôi, vì vậy tôi đưa lên các tập tin Styles.scss,

246
00:19:07,725 --> 00:19:11,845
và tôi chỉ đơn giản là sẽ lưu tập tin này.

247
00:19:11,845 --> 00:19:14,175
Và sau đó bạn sẽ nhận thấy rằng ngay lập tức,

248
00:19:14,175 --> 00:19:22,285
ở phía bên trái nhiệm vụ SASS được gọi và chạy và sau đó biên dịch lại và điều này

249
00:19:22,285 --> 00:19:30,705
cũng sẽ gây ra các tập tin Styles.scss được thay đổi, sau khi được biên dịch lại.

250
00:19:30,705 --> 00:19:38,045
Sau đó, điều này sẽ kích hoạt BrowserSync để tự động tải lại trang web của tôi.

251
00:19:38,045 --> 00:19:43,750
Với điều này, chúng tôi hoàn thành bài tập grunt phần một của chúng tôi.

252
00:19:43,750 --> 00:19:48,659
Đây là thời điểm tốt để lưu các tập tin của bạn,

253
00:19:48,659 --> 00:19:54,960
vào Git Repository với thông điệp Grunt phần một.