1
00:00:03,550 --> 00:00:06,380
Пора начать хрюкать.

2
00:00:06,380 --> 00:00:10,280
В этом и следующем упражнении мы собираемся повторить

3
00:00:10,280 --> 00:00:15,925
такую же настройку, как мы сделали со сценариями NPM.

4
00:00:15,925 --> 00:00:22,405
В первой части мы собираемся настроить преобразование из SCSS в CSS.

5
00:00:22,405 --> 00:00:28,570
Затем мы установим задачу часов, а также обслуживаем код с помощью синхронизации браузера.

6
00:00:28,570 --> 00:00:31,065
Во второй части упражнения

7
00:00:31,065 --> 00:00:40,010
мы будем использовать Усман и различные задачи, чтобы подготовить складку распределения.

8
00:00:40,010 --> 00:00:44,170
Эти упражнения ни в коем случае не являются единственным способом

9
00:00:44,170 --> 00:00:49,720
реализации конфигураций Grunt или файлов вызовов.

10
00:00:49,720 --> 00:00:54,575
Это всего лишь иллюстрация того, как мы можем использовать эти инструменты.

11
00:00:54,575 --> 00:00:58,375
Вы можете придумать свой собственный способ настройки файла

12
00:00:58,375 --> 00:01:03,320
Grunt и файла вызова для ваших проектов.

13
00:01:03,320 --> 00:01:13,200
Наш первый шаг в использовании Grunt заключается в создании Grunt CLI в качестве глобального модуля NPM.

14
00:01:13,200 --> 00:01:21,550
Для этого добавьте тип приглашения: NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Это интерфейс командной строки для Grunt.

16
00:01:25,190 --> 00:01:27,480
После того, как это

17
00:01:27,480 --> 00:01:34,690
будет установлено, мы установим локальный модуль Grunt NPM для использования в наших проектах.

18
00:01:34,690 --> 00:01:38,370
Grunt CLI позволяет нам использовать Grunt.

19
00:01:38,370 --> 00:01:40,050
Мы создали интерфейс командной строки Grunt.

20
00:01:40,050 --> 00:01:47,405
Затем следующим шагом является настройка - Grunt локально,

21
00:01:47,405 --> 00:01:52,655
поэтому; NPM установить Grunt минус save dev.

22
00:01:52,655 --> 00:01:56,365
Затем установите Grunt локально.

23
00:01:56,365 --> 00:01:58,930
После того, как вы завершили эти два шага,

24
00:01:58,930 --> 00:02:04,850
следующий шаг, чтобы перейти к нашему проекту, а затем создать новый файл,

25
00:02:04,850 --> 00:02:10,165
и мы назовем его как Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
Внутри этого Gruntfile.js мы настроим код для настройки наших задач Grunt.

27
00:02:19,034 --> 00:02:27,770
В этом файле первым шагом является добавление «use strict» означает

28
00:02:27,770 --> 00:02:30,640
«use strict» код JavaScript.

29
00:02:30,640 --> 00:02:36,460
Затем вы говорите module.exports

30
00:02:37,050 --> 00:02:42,830
= функция (ворчание).

31
00:02:44,990 --> 00:02:53,005
Затем внутри, мы настроим конфигурацию Grunt для всех задач.

32
00:02:53,005 --> 00:02:57,655
Как я уже упоминал ранее, Grunt - это бегун задач на основе конфигурации.

33
00:02:57,655 --> 00:03:02,200
Итак, мы установим различные плагины Grunt для

34
00:03:02,200 --> 00:03:08,370
различных задач, а затем настроим их в нашем файле Grunt.

35
00:03:08,370 --> 00:03:10,769
Чтобы сделать конфигурацию,

36
00:03:10,769 --> 00:03:12,605
мы добавим в код здесь,

37
00:03:12,605 --> 00:03:19,290
говоря: grunt.initConfig

38
00:03:19,410 --> 00:03:28,655
и внутри этого initConfig,

39
00:03:28,655 --> 00:03:32,805
мы добавим в конфигурацию для задач Grunt колеса.

40
00:03:32,805 --> 00:03:34,580
Как только вы завершите это,

41
00:03:34,580 --> 00:03:37,145
давайте сохраним изменения.

42
00:03:37,145 --> 00:03:39,385
На нашем следующем шаге

43
00:03:39,385 --> 00:03:47,610
мы установим несколько плагинов Grunt, чтобы позволить нам конвертировать SCSS-код в CSS код.

44
00:03:47,610 --> 00:03:54,240
Для этого я установлю модуль NPM под названием

45
00:03:54,240 --> 00:04:01,875
Grunt SASS — Grunt SASS, сохраните def.

46
00:04:01,875 --> 00:04:03,450
В дополнение к этому,

47
00:04:03,450 --> 00:04:07,375
я настрою еще два модуля Grunt под названием,

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

49
00:04:19,990 --> 00:04:23,430
Эти два модуля — Time Grunt и Jit Grunt.

50
00:04:23,430 --> 00:04:31,190
Модуль Time Grunt распечатывает статистику времени для выполнения различных задач Grunt.

51
00:04:31,190 --> 00:04:35,150
Модуль Jit Grunt используется для загрузки в

52
00:04:35,150 --> 00:04:40,420
эти плагины Grunt всякий раз, когда они необходимы в любом приложении.

53
00:04:40,420 --> 00:04:42,860
Другой альтернативой является загрузка

54
00:04:42,860 --> 00:04:49,475
различных модулей Grunt явно в вашем конфигурационном файле Grunt.

55
00:04:49,475 --> 00:04:53,085
Я предпочитаю использовать Jit Grunt, чтобы он позаботился о загрузке

56
00:04:53,085 --> 00:04:56,790
в любые плагины Grunt, которые мне нужны по мере необходимости,

57
00:04:56,790 --> 00:04:59,955
как когда я использую их в коде.

58
00:04:59,955 --> 00:05:04,785
Установите эти два времени Grunt и Jit Grunt и как только они установлены,

59
00:05:04,785 --> 00:05:11,845
то пришло время настроить нашу задачу преобразования SASS.

60
00:05:11,845 --> 00:05:14,870
Теперь вам, очевидно, должно быть интересно, почему мы набираем этот

61
00:05:14,870 --> 00:05:18,250
module.exports, а затем функцию и так далее.

62
00:05:18,250 --> 00:05:21,485
Вот как мы определяем модули узлов.

63
00:05:21,485 --> 00:05:26,590
Мы будем иметь дело со структурой узлов модулей и почему мы используем этот подход

64
00:05:26,590 --> 00:05:33,375
в курсе серверных узлов позже в специализации.

65
00:05:33,375 --> 00:05:38,415
На данный момент просто примите, что так написан код для Grunt,

66
00:05:38,415 --> 00:05:41,040
потому что файл Grunt сам по себе является

67
00:05:41,040 --> 00:05:47,110
узловым модулем, который будет загружаться в различные плагины Grunt.

68
00:05:47,110 --> 00:05:51,815
После того, как мы это сделаем, мы собираемся потребовать пару плагинов Grunt здесь.

69
00:05:51,815 --> 00:05:59,080
Чтобы сделать это, мы скажем require ('time- grunt'),

70
00:05:59,080 --> 00:06:08,840
и мы скажем grunt против конфигурации, которую мы используем для загрузки в Time Grunt.

71
00:06:08,840 --> 00:06:12,555
Требование, как вы узнаете позже, когда вы узнаете о модулях узла,

72
00:06:12,555 --> 00:06:16,660
это способ сказать, что нагрузка в модуле узла Time Grunt, который

73
00:06:16,660 --> 00:06:20,815
будет использоваться в этом конкретном модуле узла.

74
00:06:20,815 --> 00:06:28,450
Аналогично, мне потребуется модуль узла Jit Grunt.

75
00:06:32,190 --> 00:06:37,095
Этот модуль узла Jit Grunt гарантирует, что он будет загружаться в

76
00:06:37,095 --> 00:06:42,540
любые другие модули узла или любые другие плагины Grunt, которые являются модулями узлов, в

77
00:06:42,540 --> 00:06:50,925
основном, как в том случае, когда они фактически подразумеваются в моем Grunt для выполнения различных задач.

78
00:06:50,925 --> 00:06:55,295
Альтернативой было бы вручную загрузить каждый из

79
00:06:55,295 --> 00:07:00,600
этих плагинов Grunt явно, используя требуемый оператор.

80
00:07:00,600 --> 00:07:04,445
Я спасаю себя немного неприятностей, просто используя Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
который заботится о загрузке этих модулей узлов, когда это необходимо.

82
00:07:07,825 --> 00:07:11,395
Теперь, переходя в конфигурацию,

83
00:07:11,395 --> 00:07:16,159
как мы поняли, Grunt работает над конфигурацией,

84
00:07:16,159 --> 00:07:21,935
поэтому каждый плагин Grunt, который мы хотим использовать для выполнения задачи,

85
00:07:21,935 --> 00:07:27,225
он должен быть настроен внутри этого файла Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
Эта конфигурация в основном является объектом JavaScript в основном.

87
00:07:32,965 --> 00:07:36,145
Если вы знакомы с объектами JavaScript,

88
00:07:36,145 --> 00:07:40,275
вы начинаете понимать синтаксис очень, очень быстро.

89
00:07:40,275 --> 00:07:47,330
Первая задача, которую я собираюсь настроить, - это SASS.

90
00:07:47,330 --> 00:07:49,855
Итак, я набираю SASS здесь,

91
00:07:49,855 --> 00:07:55,200
а затем внутри SASS, я говорю dist.

92
00:07:55,920 --> 00:08:01,570
Теперь вы должны верить, что именно так выполняется конфигурация.

93
00:08:01,570 --> 00:08:03,280
Итак, я говорю dist,

94
00:08:03,280 --> 00:08:05,295
а затем внутри,

95
00:08:05,295 --> 00:08:10,980
я говорю файлы, а затем там,

96
00:08:10,980 --> 00:08:14,125
я указываю файлы, которые нужно преобразовать.

97
00:08:14,125 --> 00:08:20,270
Я говорю, CSS/styles.CSS, который

98
00:08:20,270 --> 00:08:28,815
зависит от CSS/Styles.scs.

99
00:08:28,815 --> 00:08:36,925
С этим мы завершаем настройку задачи SASS здесь.

100
00:08:36,925 --> 00:08:40,620
Как только мы завершим настройку задачи SASS,

101
00:08:40,620 --> 00:08:43,485
если вы действительно хотите выполнить задачу SASS,

102
00:08:43,485 --> 00:08:52,950
то ниже вы настроили задачу SASS, сказав «grunt.registerTask»,

103
00:08:54,770 --> 00:08:58,545
а затем я назову эту задачу CSS,

104
00:08:58,545 --> 00:09:00,280
а затем я

105
00:09:00,280 --> 00:09:04,935
в скобках писца скажу «SASS».

106
00:09:04,935 --> 00:09:07,605
Теперь, чтобы понять синтаксис здесь,

107
00:09:07,605 --> 00:09:13,715
это, как вы можете видеть, говорит «grunt.registerTask», и имя этой задачи - CSS.

108
00:09:13,715 --> 00:09:15,340
И что включает в себя эта задача?

109
00:09:15,340 --> 00:09:21,685
Эта задача включает в себя выполнение задачи SASS, которая уже была настроена здесь.

110
00:09:21,685 --> 00:09:25,080
Вот как мы читаем этот синтаксис здесь.

111
00:09:25,080 --> 00:09:27,950
Если вы этого не хотите, вам не нужно настраивать это,

112
00:09:27,950 --> 00:09:33,065
потому что мы будем использовать SASS вместе с задачей часов для автоматического

113
00:09:33,065 --> 00:09:38,460
запуска SASS при изменении нашего SCSS-файла.

114
00:09:38,460 --> 00:09:40,840
С этим, давайте сохраним изменения.

115
00:09:40,840 --> 00:09:45,570
Позвольте мне показать вам эту конкретную задачу в действии.

116
00:09:45,570 --> 00:09:48,990
Если вы настроили задачу с именем CSS там,

117
00:09:48,990 --> 00:09:50,650
то добавьте приглашение,

118
00:09:50,650 --> 00:09:54,655
вы можете ввести «grunt.CSS» и затем он выполнит

119
00:09:54,655 --> 00:10:00,090
задачу преобразования кода sass в код CSS.

120
00:10:00,090 --> 00:10:04,005
Перейдя в командную строку,

121
00:10:04,005 --> 00:10:09,070
в командной строке введите «grunt.CSS», и вы увидите

122
00:10:09,070 --> 00:10:17,530
выполнение задачи SASS, а затем преобразование файла styles.sess в файл styles.CSS.

123
00:10:17,530 --> 00:10:19,390
Кроме того, как вы можете видеть,

124
00:10:19,390 --> 00:10:23,340
Time Grunt распечатает такую статистику,

125
00:10:23,340 --> 00:10:27,800
чтобы указать, сколько времени заняло каждая из этих задач.

126
00:10:27,800 --> 00:10:29,520
Если это вас интересует,

127
00:10:29,520 --> 00:10:32,880
то вы можете посмотреть на эти детали здесь.

128
00:10:32,890 --> 00:10:39,360
В нашем следующем шаге, мы собираемся настроить часы и сервер,

129
00:10:39,360 --> 00:10:41,800
чтобы держать часы на

130
00:10:41,800 --> 00:10:45,960
SASS-файлах и автоматически конвертировать их, когда они будут изменены,

131
00:10:45,960 --> 00:10:48,625
а затем мы настроим сервер,

132
00:10:48,625 --> 00:10:54,045
используя BrowserSync для обслуживания нашего сайта.

133
00:10:54,045 --> 00:10:56,700
Чтобы настроить Watch and Serve Tasks,

134
00:10:56,700 --> 00:10:59,740
я собираюсь установить еще пару плагинов,

135
00:10:59,740 --> 00:11:03,990
поэтому я скажу npm install,

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch минус save-dev.

137
00:11:12,465 --> 00:11:15,480
Итак, это часы-контриб-часы.

138
00:11:15,480 --> 00:11:21,450
Grunt плагин, который является модулем узла, поэтому установите его.

139
00:11:21,670 --> 00:11:32,030
Таким образом, плагин Watch позволяет следить за различными файлами.

140
00:11:32,030 --> 00:11:33,550
Следующий плагин, который я собираюсь

141
00:11:33,550 --> 00:11:43,750
установить, - это grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
Модуль BrowserSync - это тот, который я собираюсь использовать,

143
00:11:50,515 --> 00:11:54,230
для сохранения файлов из моей папки проекта,

144
00:11:54,230 --> 00:12:00,090
чтобы я мог видеть веб-сайт в браузере.

145
00:12:00,090 --> 00:12:04,845
Как только я установил эти два модуля,

146
00:12:04,845 --> 00:12:08,295
пришло время перейти в мой grunt.initconfig,

147
00:12:08,295 --> 00:12:11,635
а затем настроить две задачи.

148
00:12:11,635 --> 00:12:13,300
Один для ведения часов,

149
00:12:13,300 --> 00:12:18,125
второй для обслуживания файлов с помощью BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Итак, возвращаясь к моему initconfig,

151
00:12:20,680 --> 00:12:23,710
поставьте запятую после SASS,

152
00:12:23,710 --> 00:12:26,460
а затем переходите на следующую строку.

153
00:12:27,050 --> 00:12:32,650
Всегда помните, чтобы поставить запятую.

154
00:12:32,650 --> 00:12:40,990
Отсутствующая запятая вызывает много головной боли, когда вы пытаетесь запустить свои задачи ворчания.

155
00:12:40,990 --> 00:12:44,635
Очень трудно определить, что вы пропустили запятую.

156
00:12:44,635 --> 00:12:46,950
Поэтому важно обратить внимание на

157
00:12:46,950 --> 00:12:52,290
синтаксис и убедиться, что вы не пропустите ни одну из этих запятых.

158
00:12:52,290 --> 00:12:55,425
Он вернется, чтобы укусить тебя не в то время.

159
00:12:55,425 --> 00:12:57,105
Таким образом, следующая задача,

160
00:12:57,105 --> 00:13:00,190
которую я собираюсь настроить, - это WatchTask.

161
00:13:00,190 --> 00:13:03,605
Итак, я говорю «Смотреть» и что я хочу посмотреть?

162
00:13:03,605 --> 00:13:10,070
Я хочу посмотреть эти файлы, которые являются CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Итак, это файл SCSS, который я хочу посмотреть.

164
00:13:17,680 --> 00:13:22,445
Все файлы SCSS в моей папке CSS.

165
00:13:22,445 --> 00:13:26,670
Если какой-либо из них изменен,

166
00:13:26,670 --> 00:13:32,865
то соответствующая задача, которую я собираюсь выполнить, - это SASS.

167
00:13:32,865 --> 00:13:36,180
Задача SASS, которую я уже настроил ранее.

168
00:13:36,180 --> 00:13:39,710
Таким образом, я настроил свой WatchTask,

169
00:13:39,710 --> 00:13:42,820
чтобы держать часы на SCSS-файлах, а затем

170
00:13:42,820 --> 00:13:46,075
автоматически конвертировать их, вызвав SASS.

171
00:13:46,075 --> 00:13:50,475
Теперь с WatchTask я могу фактически наблюдать за несколькими файлами,

172
00:13:50,475 --> 00:13:55,650
а затем автоматически вызывать соответствующие задачи для этих файлов.

173
00:13:55,650 --> 00:13:57,895
Так, например, я могу следить за

174
00:13:57,895 --> 00:14:01,660
своими файлами JavaScript, а затем автоматически делать подсказки JS,

175
00:14:01,660 --> 00:14:04,465
когда мои файлы меняются.

176
00:14:04,465 --> 00:14:07,770
Или делать идентификацию и так далее.

177
00:14:07,770 --> 00:14:12,100
Теперь следующий, который я собираюсь настроить, - это BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Опять же не забудьте запятую после WatchTask,

179
00:14:15,345 --> 00:14:19,070
а затем введите BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Я бы сказал, что BrowserSync здесь, а затем для BrowserSync,

181
00:14:26,369 --> 00:14:30,570
я бы сказал, что настройте задачу внутри.

182
00:14:30,570 --> 00:14:35,090
Теперь это синтаксис, который мы используем для ввода

183
00:14:35,090 --> 00:14:40,410
конфигурации внутри нашего файла grunt.

184
00:14:40,410 --> 00:14:42,840
Поэтому он говорит BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Теперь, если вы спросите меня почему,

186
00:14:44,940 --> 00:14:46,895
нам просто нужно прочитать документацию

187
00:14:46,895 --> 00:14:52,275
для каждого из этих плагинов, а затем выяснить, как настроить эти плагины.

188
00:14:52,275 --> 00:14:56,000
Итак, я уже прочитал документацию, и я выяснил

189
00:14:56,000 --> 00:15:00,885
некоторые основные настройки для каждой из этих задач, поэтому я просто вписываю их.

190
00:15:00,885 --> 00:15:03,525
Очевидно, если вы хотите больше гибкости,

191
00:15:03,525 --> 00:15:07,350
вы можете прочитать соответствующую документацию, а затем выяснить

192
00:15:07,350 --> 00:15:11,655
другие способы настройки этих задач.

193
00:15:11,655 --> 00:15:18,010
Моя конфигурация здесь - это всего лишь один из способов решения или решения проблем.

194
00:15:18,010 --> 00:15:22,850
Поэтому здесь я указываю BSFiles,

195
00:15:22,850 --> 00:15:28,685
поэтому этот файл указывает, какие файлы нужно отслеживать

196
00:15:28,685 --> 00:15:36,715
моим BrowserSync, а затем, когда любой из этих файлов изменится,

197
00:15:36,715 --> 00:15:44,805
мой BrowserSync приведет к перезагрузке браузера.

198
00:15:44,805 --> 00:15:50,185
Поэтому я собираюсь смотреть все файлы в моей папке CSS,

199
00:15:50,185 --> 00:15:53,220
HTML-файлы в моей папке проекта,

200
00:15:53,220 --> 00:15:57,945
а затем все мои файлы JavaScript в папке JS.

201
00:15:57,945 --> 00:16:03,835
Таким образом, с этим я настроил все те файлы, на которых я собираюсь держать часы,

202
00:16:03,835 --> 00:16:10,335
а затем автоматически вызвать перезагрузку моей страницы, когда это необходимо.

203
00:16:10,335 --> 00:16:14,180
И затем следующая конфигурация, которую мне нужно

204
00:16:14,180 --> 00:16:19,100
сделать, - это еще несколько вариантов для моего BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Таким образом, параметры, которые я собираюсь указать,

206
00:16:23,510 --> 00:16:29,190
watchTask true, что означает, что есть запущенный WatchTask

207
00:16:29,190 --> 00:16:33,130
и базовый каталог для моего сервера.

208
00:16:33,130 --> 00:16:35,605
Поэтому я говорю BaseDir,

209
00:16:35,605 --> 00:16:41,960
а затем я указываю, точка косой черты.

210
00:16:41,960 --> 00:16:43,720
Таким образом, текущий каталог,

211
00:16:43,720 --> 00:16:45,880
как мой базовый каталог.

212
00:16:45,880 --> 00:16:47,740
Поэтому с этими изменениями

213
00:16:47,740 --> 00:16:51,815
позвольте мне сохранить изменения в моем файле grunt,

214
00:16:51,815 --> 00:17:01,085
а затем я спущусь вниз, а затем настрою другую задачу grunt, здесь называемую default.

215
00:17:01,085 --> 00:17:05,145
Итак, я бы указал задачу по умолчанию.

216
00:17:05,145 --> 00:17:08,720
Что мне нужно сделать для этой задачи по умолчанию?

217
00:17:08,720 --> 00:17:12,060
Мне нужно выполнить

218
00:17:12,160 --> 00:17:20,055
BrowserSync, а также вторую задачу, которую я собираюсь сделать, это смотреть.

219
00:17:20,055 --> 00:17:24,590
Сначала мне нужно будет выполнить задачу BrowserSync, а затем WatchTask позже.

220
00:17:24,590 --> 00:17:27,310
Потому что задача BrowserSync начнет обслуживать мой сервер.

221
00:17:27,310 --> 00:17:30,605
Если я сначала сделаю задачу WatchTask, а затем задачу BrowserSync,

222
00:17:30,605 --> 00:17:32,495
WatchTask в основном

223
00:17:32,495 --> 00:17:38,260
остановит все, а затем все оставшиеся задачи, которые не будут выполняться.

224
00:17:38,260 --> 00:17:40,525
Поэтому, если вы используете WatchTask,

225
00:17:40,525 --> 00:17:45,624
сделайте это как последний в последовательности, указанной в квадратных скобках.

226
00:17:45,624 --> 00:17:50,415
С этим мой проект теперь настроен,

227
00:17:50,415 --> 00:17:57,100
чтобы как следить за моими файлами SASS, так и обслуживать его всякий раз, когда это необходимо.

228
00:17:57,100 --> 00:17:59,670
Итак, это завершает мой файл,

229
00:17:59,670 --> 00:18:02,795
давайте вернемся к нашему терминалу.

230
00:18:02,795 --> 00:18:04,740
Возвращаясь к моему терминалу,

231
00:18:04,740 --> 00:18:07,670
я открыл другую вкладку, а затем на этой вкладке

232
00:18:07,670 --> 00:18:11,335
я собираюсь запустить задачу grunt,

233
00:18:11,335 --> 00:18:17,010
которая также будет держать мой BrowserSync и будет обслуживать

234
00:18:17,010 --> 00:18:22,965
файлы и автоматически перезагружать веб-страницу,

235
00:18:22,965 --> 00:18:25,055
если какой-либо из этих файлов изменится.

236
00:18:25,055 --> 00:18:30,790
Поэтому, если вы настроили задачу по умолчанию, как мы это делали в упражнении,

237
00:18:30,790 --> 00:18:32,125
тогда в подсказке

238
00:18:32,125 --> 00:18:37,725
мне просто нужно ввести grunt, а затем он автоматически выполнит задачу по умолчанию.

239
00:18:37,725 --> 00:18:40,680
Как только мои задачи grunt начнут работать,

240
00:18:40,680 --> 00:18:44,015
вы можете видеть, что он запустил BrowserSync

241
00:18:44,015 --> 00:18:48,600
и обслуживает файлы, а также запускает WatchTask,

242
00:18:48,600 --> 00:18:54,825
который ждет любых изменений для автоматического запуска задачи SCSS.

243
00:18:54,825 --> 00:19:01,460
Чтобы продемонстрировать вам, как будет запускаться задача SCSS,

244
00:19:01,460 --> 00:19:05,120
всякий раз, когда я вношу какие-либо изменения в файл Styles.scs,

245
00:19:05,120 --> 00:19:07,725
поэтому я поднял файл Styles.scss,

246
00:19:07,725 --> 00:19:11,845
и я просто собираюсь сохранить этот файл.

247
00:19:11,845 --> 00:19:14,175
И тогда вы заметите, что немедленно, с

248
00:19:14,175 --> 00:19:22,285
левой стороны, вызывается и запускается задача SASS, а затем перекомпилируется, и это

249
00:19:22,285 --> 00:19:30,705
также приведет к изменению файла Styles.scss после перекомпиляции.

250
00:19:30,705 --> 00:19:38,045
Затем это вызовет BrowserSync для автоматической перезагрузки моей веб-страницы.

251
00:19:38,045 --> 00:19:43,750
С помощью этого мы завершаем наше упражнение по первой части.

252
00:19:43,750 --> 00:19:48,659
Это хорошее время, чтобы сохранить ваши файлы,

253
00:19:48,659 --> 00:19:54,960
в репозиторий Git с сообщением Grunt часть первая.