1
00:00:03,060 --> 00:00:06,095
Теперь, когда мы предоставили достаточно,

2
00:00:06,095 --> 00:00:08,700
пришло время Gulp.

3
00:00:08,700 --> 00:00:12,010
Мы попытаемся выполнить те же

4
00:00:12,010 --> 00:00:16,235
задачи, которые мы выполняли с NPM скрипты и Grunt,

5
00:00:16,235 --> 00:00:22,995
но теперь мы попытаемся сделать то же самое, используя Gulp и Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
Чтобы начать работу, давайте сначала установим Gulp как глобальный модуль.

7
00:00:29,090 --> 00:00:31,635
Итак, чтобы сделать это, в командной строке

8
00:00:31,635 --> 00:00:37,970
введите npm -g install gulp,

9
00:00:38,740 --> 00:00:42,380
это установит Gulp как глобальный модуль и сделает

10
00:00:42,380 --> 00:00:45,625
его доступным для использования в командной строке.

11
00:00:45,625 --> 00:00:47,605
После того, как мы закончим это,

12
00:00:47,605 --> 00:00:51,425
следующим шагом является установка Gulp локально в нашем проекте.

13
00:00:51,425 --> 00:00:53,975
Поэтому для этого в командной строке

14
00:00:53,975 --> 00:01:01,700
введите npm install gulp —save-dev.

15
00:01:01,700 --> 00:01:03,835
Как только мы закончим эти два,

16
00:01:03,835 --> 00:01:10,765
пришло время идти вперед и настроить наши задачи Gulp.

17
00:01:10,765 --> 00:01:14,195
Прежде чем мы сделаем это, наш следующий шаг,

18
00:01:14,195 --> 00:01:18,170
мы установим плагин Gulp Sass, чтобы мы могли

19
00:01:18,170 --> 00:01:23,560
настроить Sass, чтобы увидеть как задача преобразования в нашем файле Gulp.

20
00:01:23,560 --> 00:01:26,460
Итак, чтобы идти вперед и сделать это,

21
00:01:26,460 --> 00:01:30,580
введите npm install

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

23
00:01:40,270 --> 00:01:43,835
Кроме того, пока мы на нем,

24
00:01:43,835 --> 00:01:48,305
мы могли бы также установить задачу Browser Sync Gulp,

25
00:01:48,305 --> 00:01:53,835
так что мы можем настроить оба этого один за другим.

26
00:01:53,835 --> 00:02:07,960
Итак, я установлю, npm установит браузер-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
После того, как эти два установлены,

28
00:02:11,480 --> 00:02:17,980
давайте продолжим и создадим наш файл Gulp, а затем настроим наши задачи Gulp здесь.

29
00:02:17,980 --> 00:02:20,590
Переходя в нашу папку проекта,

30
00:02:20,590 --> 00:02:27,905
давайте создадим новый файл, а затем назовем его gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
и в этом файле мы собираемся настроить наши Gulp Tasks.

32
00:02:32,380 --> 00:02:34,950
Итак, как только gulpfile.js будет готов,

33
00:02:34,950 --> 00:02:39,940
хорошо настройте задачи Gulp здесь, сначала начав

34
00:02:39,940 --> 00:02:50,310
с «use strict», а затем var gulp.

35
00:02:50,310 --> 00:02:57,585
Таким образом, нам нужно требовать модули gulp node,

36
00:02:57,585 --> 00:02:59,810
а также пока мы на нем,

37
00:02:59,810 --> 00:03:07,600
нам потребуется модуль sass node.

38
00:03:12,470 --> 00:03:16,310
Как я уже упоминал в предыдущем упражнении,

39
00:03:16,310 --> 00:03:22,110
вам станет более понятным, почему код написан таким образом, как

40
00:03:22,110 --> 00:03:30,245
только вы поймете больше о модулях узлов в более позднем курсе.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, так что мы сделали, это включить

42
00:03:35,535 --> 00:03:40,895
модули Gulp Contrast и BowserSync узлов в наш файл Gulp.

43
00:03:40,895 --> 00:03:42,545
И как только вы это сделаете,

44
00:03:42,545 --> 00:03:45,360
пришло время настроить наши задачи Gulp.

45
00:03:45,360 --> 00:03:47,940
Как мы узнали ранее,

46
00:03:47,940 --> 00:03:52,340
Gulp - это код, основанный на способе настройки

47
00:03:52,340 --> 00:03:57,815
задач, в отличие от Grunt, который больше полагается на конфигурацию задач.

48
00:03:57,815 --> 00:04:00,455
Итак, в случае Gulp,

49
00:04:00,455 --> 00:04:04,230
ребенок настроит наши задачи, чтобы набрать

50
00:04:04,230 --> 00:04:11,340
gulp.task, а затем установим имя задачи 'sass'

51
00:04:11,340 --> 00:04:13,545
, а затем для

52
00:04:13,545 --> 00:04:17,630
этой задачи мы установим

53
00:04:19,990 --> 00:04:23,205
это как функцию, и вот как будет подготовлен код.

54
00:04:23,205 --> 00:04:28,850
Итак, функция Gulp Tasks Sass и здесь,

55
00:04:28,850 --> 00:04:32,310
мы настраиваем Gulp Tasks,

56
00:04:34,850 --> 00:04:45,030
поэтому мы будем вводить return gulp.src ('. /css/ *.scss') Как мы узнали,

57
00:04:45,030 --> 00:05:00,800
Gulp - это инструмент, основанный на коде над конфигурацией.

58
00:05:00,800 --> 00:05:06,630
Итак, мы подготовим эту задачу как таковой.

59
00:05:06,630 --> 00:05:14,390
Итак, вы видите, что мы указали Gulp исходный канал sass on,

60
00:05:14,390 --> 00:05:18,630
а затем здесь ошибка.

61
00:05:19,220 --> 00:05:22,600
Итак, если произойдет ошибка,

62
00:05:24,020 --> 00:05:31,870
мы будем использовать способ Sass для регистрации ошибки, а затем передать это

63
00:05:31,870 --> 00:05:43,480
через gulp.dest ('. /css '), и это

64
00:05:52,970 --> 00:05:59,270
завершает настройку задач Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Вам, должно быть, интересно, почему мы пишем такой код.

66
00:06:03,540 --> 00:06:06,960
Он говорит gulp source, а затем указывает что-то там,

67
00:06:06,960 --> 00:06:10,650
а затем следующий говорит pipe, а затем следующий говорит pipe.

68
00:06:10,650 --> 00:06:16,045
Давайте поймем способ Gulp делать вещи немного более подробно.

69
00:06:16,045 --> 00:06:19,855
Чтобы помочь объяснить, почему мы настраиваем такие задачи,

70
00:06:19,855 --> 00:06:24,730
у меня есть объяснение того, что мы называем Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
То, как работает Gulp, похоже, что вы берете набор файлов, и вы указываете набор

72
00:06:29,900 --> 00:06:35,405
файлов, сказав источник глотка, как мы делали с задачами Sass там.

73
00:06:35,405 --> 00:06:39,005
Так вот, это функция, которая принимает файлы.

74
00:06:39,005 --> 00:06:44,405
Вы даже можете указать файлы, используя шаблоны глоббинга, которые мы узнали в Grunt,

75
00:06:44,405 --> 00:06:49,410
а затем он создает поток объектов, которые представляют эти файлы.

76
00:06:49,410 --> 00:06:51,560
Теперь, как только поток создан,

77
00:06:51,560 --> 00:06:54,480
то поток может быть передан через набор

78
00:06:54,480 --> 00:06:58,795
функций один за другим, чтобы преобразовать эти файлы.

79
00:06:58,795 --> 00:07:07,400
И затем, наконец, результирующие преобразованные файлы могут быть помещены в место назначения.

80
00:07:07,400 --> 00:07:09,795
Поэтому мы указываем источник Gulp,

81
00:07:09,795 --> 00:07:11,585
затем указываем канал.

82
00:07:11,585 --> 00:07:15,945
Итак, труба позволяет потоку проходить через функцию,

83
00:07:15,945 --> 00:07:18,295
и поэтому мы сказали точечную трубку,

84
00:07:18,295 --> 00:07:20,600
а затем сказали глоток.

85
00:07:20,600 --> 00:07:23,965
А потом мы сказали «дураць по ошибке».

86
00:07:23,965 --> 00:07:30,255
А потом следующий говорит «Труба глотка Дест».

87
00:07:30,255 --> 00:07:35,950
Таким образом, gulp dest указывает место назначения файлов, которые были обработаны.

88
00:07:35,950 --> 00:07:43,860
Таким образом, типичная задача указывается в gulp, потому что gulp работает на потоках.

89
00:07:43,860 --> 00:07:48,875
Таким образом, ваши потоковые файлы через каналы до тех пор, пока

90
00:07:48,875 --> 00:07:54,805
они не будут переданы, а затем они будут депонированы в указанном месте назначения.

91
00:07:54,805 --> 00:07:59,610
Таким образом, вы увидите аналогичную структуру для многих задач gulp, которые мы

92
00:07:59,610 --> 00:08:04,740
будем настраивать в этом упражнении и следующем упражнении.

93
00:08:04,740 --> 00:08:11,460
Теперь, когда вы немного поняли, как gulp работает с потоками и как

94
00:08:11,460 --> 00:08:21,005
задача gulp использует канал для обработки файлов через набор функций,

95
00:08:21,005 --> 00:08:28,290
и вам становится более ясно, почему мы создали эту sass задачу, как показано в этом коде.

96
00:08:28,290 --> 00:08:33,260
Следующая задача, которую мы собираемся настроить называется gulp,

97
00:08:33,340 --> 00:08:39,900
и мы настроим эту задачу как sass watch.

98
00:08:39,900 --> 00:08:42,700
Таким образом, это задача смотреть, которую мы собираемся настроить,

99
00:08:42,700 --> 00:08:48,920
и тогда вы должны указать функцию.

100
00:08:49,190 --> 00:08:51,330
И вот здесь,

101
00:08:51,330 --> 00:08:53,320
задача наблюдения за глотком,

102
00:08:53,320 --> 00:08:58,490
то, что мы делаем, это указать файлы, которые мы будем смотреть.

103
00:08:58,490 --> 00:09:05,600
Таким образом, мы используем задачу наблюдения за глотком, чтобы посмотреть файл.

104
00:09:05,600 --> 00:09:08,830
Итак, часы уже встроены в глоток.

105
00:09:08,830 --> 00:09:17,660
Таким образом, это займет gulp watch, а затем мы указываем файлы там *.SCSS.

106
00:09:17,660 --> 00:09:21,390
Таким образом, как вы можете видеть, часы gulp будут смотреть

107
00:09:21,390 --> 00:09:25,915
эти файлы, а затем, когда какие-либо изменения в этих файлах происходят,

108
00:09:25,915 --> 00:09:30,225
он запустит эту sass задачу,

109
00:09:30,225 --> 00:09:32,975
которую мы указали ранее.

110
00:09:32,975 --> 00:09:37,360
Итак, вот как настраивается эта задача sass Watch.

111
00:09:37,360 --> 00:09:39,495
Теперь, когда мы сделали эти два,

112
00:09:39,495 --> 00:09:42,730
давайте настроим эту задачу синхронизации браузера.

113
00:09:42,730 --> 00:09:47,650
Итак, закройте это с точкой с запятой, а затем

114
00:09:47,650 --> 00:09:53,375
следующая задача, которую мы установим, это задача синхронизации браузера.

115
00:09:53,375 --> 00:10:01,735
Итак, я задам там задачу синхронизации браузера.

116
00:10:01,735 --> 00:10:04,550
А затем для задачи синхронизации браузера

117
00:10:04,550 --> 00:10:07,480
я укажу эту функцию.

118
00:10:07,480 --> 00:10:11,725
Опять же, обратите внимание на структуру, в которой мы пишем код,

119
00:10:11,725 --> 00:10:16,405
gulp задачу, а затем вы указываете что-то, что последовало, но с функцией.

120
00:10:16,405 --> 00:10:17,990
Теперь снова, как я уже сказал,

121
00:10:17,990 --> 00:10:23,155
мы изучаем модули узлов в последнем курсе этой специализации,

122
00:10:23,155 --> 00:10:28,520
вам станет более понятным, почему не модули написаны с этой структурой,

123
00:10:28,520 --> 00:10:31,790
и почему функции написаны так.

124
00:10:31,790 --> 00:10:34,470
Итак, мы говорим gulp задачи синхронизации браузера.

125
00:10:34,470 --> 00:10:38,260
Здесь я собираюсь определить переменную,

126
00:10:38,260 --> 00:10:40,920
переменную JavaScript, называемую файлами,

127
00:10:40,920 --> 00:10:45,050
которая не что иное, как массив,

128
00:10:45,160 --> 00:10:55,935
и что внутри этого массива файлов я бы указал все файлы, которые

129
00:10:55,935 --> 00:10:58,790
в случае изменения синхронизации браузера

130
00:10:58,790 --> 00:11:07,125
должна вызвать перезагрузку или файл.

131
00:11:07,125 --> 00:11:12,690
Итак, html-файлы, файлы CSS в папке CSS,

132
00:11:12,690 --> 00:11:18,420
а затем аналогичным образом я также буду смотреть файлы изображений

133
00:11:26,080 --> 00:11:31,960
и файлы JavaScript.

134
00:11:33,840 --> 00:11:36,730
Все эти файлы, если любой из них изменился.

135
00:11:36,730 --> 00:11:40,800
Итак, после этого я настрою синхронизацию браузера здесь.

136
00:11:40,800 --> 00:11:44,315
Итак, я скажу, что синхронизация браузера.

137
00:11:44,315 --> 00:11:49,010
Мы уже определили эту переменную, называемую синхронизацией браузера ранее.

138
00:11:49,010 --> 00:11:54,400
Таким образом, мы должны инициализировать синхронизацию браузера,

139
00:11:56,230 --> 00:12:01,805
и поэтому, первый параметр для этого

140
00:12:01,805 --> 00:12:08,895
- это файлы, которые нужно будет наблюдать,

141
00:12:08,895 --> 00:12:18,160
а затем второй параметр определяет параметры, которые мы даем браузеру.

142
00:12:18,160 --> 00:12:21,720
Итак, параметр, который я указываю, предназначен для сервера.

143
00:12:21,720 --> 00:12:31,350
Я укажу базовый каталог в качестве текущего каталога,

144
00:12:31,350 --> 00:12:38,595
а затем это завершает спецификацию задачи синхронизации браузера.

145
00:12:38,595 --> 00:12:43,280
Таким образом, с этим мы завершили определение задачи синхронизации браузера здесь.

146
00:12:43,280 --> 00:12:46,750
Таким образом, вы можете видеть, что как мы настроили задачу синхронизации браузера,

147
00:12:46,750 --> 00:12:48,480
мы указали файлы, а затем сохранили

148
00:12:48,480 --> 00:12:51,750
синхронизацию браузера в нем и поставляем файлы в качестве первого параметра.

149
00:12:51,750 --> 00:12:58,940
Второй параметр - параметры плагина синхронизации браузера.

150
00:12:58,940 --> 00:13:02,620
Затем, наконец, мы

151
00:13:02,620 --> 00:13:10,680
запланируем или настроим задачу, называемую по умолчанию.

152
00:13:10,680 --> 00:13:17,005
Так же, как у меня есть задача по умолчанию в Grunt,

153
00:13:17,005 --> 00:13:23,475
мы также можем иметь аналогичную задачу по умолчанию, определенную для gulp.

154
00:13:23,475 --> 00:13:28,095
Итак, здесь мы говорим gulp задачи синхронизации браузера по умолчанию,

155
00:13:28,095 --> 00:13:33,275
а затем указать функцию.

156
00:13:33,275 --> 00:13:42,085
И внутри мы укажем начало глотка.

157
00:13:42,085 --> 00:13:46,185
Таким образом, это указывает, что я должен начать

158
00:13:46,185 --> 00:13:54,730
эту другую задачу, которая sass watch task.The sass watch задача должна быть запущена.

159
00:13:54,840 --> 00:14:00,370
Убедитесь, что задача синхронизации браузера запущена перед запуском задачи sass watch.

160
00:14:00,370 --> 00:14:04,060
Итак, это синтаксис для указания этого в глотке.

161
00:14:04,060 --> 00:14:08,095
Таким образом, с этим мы настроили все, что нам нужно в gulp файле.

162
00:14:08,095 --> 00:14:09,870
Итак, снова возвращаясь назад,

163
00:14:09,870 --> 00:14:11,675
есть шаги, которые мы сделали.

164
00:14:11,675 --> 00:14:17,460
Сначала мы использовали требование включить все их gulp плагины там,

165
00:14:17,460 --> 00:14:22,575
затем мы настроили задачу sass,

166
00:14:22,575 --> 00:14:25,455
а затем указали sass watch задачу.

167
00:14:25,455 --> 00:14:31,995
Здесь мы используем часы глоток, которые доступны нам, как от глотка.

168
00:14:31,995 --> 00:14:37,290
Затем мы указали задачу синхронизации браузера, а затем, наконец,

169
00:14:37,290 --> 00:14:43,150
перенесли задачу по умолчанию с помощью браузера Sync и gulp начать с sass watch.

170
00:14:43,150 --> 00:14:45,705
Теперь давайте посмотрим на изменения,

171
00:14:45,705 --> 00:14:49,875
а затем мы продолжим и выполним gulp файл add,

172
00:14:49,875 --> 00:14:52,255
и подсказка типа gulp.

173
00:14:52,255 --> 00:14:59,780
Вы увидите, что gulp запускается с синхронизацией браузера и запуском задачи sass watch,

174
00:14:59,780 --> 00:15:06,565
а затем синхронизация браузера начнет обслуживать файлы.

175
00:15:06,565 --> 00:15:12,770
Если вы просматриваете свой веб-сайт с помощью браузера,

176
00:15:12,770 --> 00:15:17,425
вы сможете увидеть веб-сайт, обслуживаемый в браузере.

177
00:15:17,425 --> 00:15:23,090
Позвольте мне также проиллюстрировать функционирование часового задания.

178
00:15:23,090 --> 00:15:26,795
Итак, я вытащу style.css и

179
00:15:26,795 --> 00:15:31,185
просто попытаюсь сохранить изменение, и вы заметите, что с левой стороны

180
00:15:31,185 --> 00:15:36,850
немедленно вызывается задача sass, и она

181
00:15:36,850 --> 00:15:44,460
перекомпилирует файл style.scss в файлы CSS.

182
00:15:44,460 --> 00:15:48,840
И тогда этот браузер перезагрузится в этот момент.

183
00:15:48,840 --> 00:15:54,085
С этим мы завершаем первую часть упражнения глотка.

184
00:15:54,085 --> 00:15:58,710
Во второй части мы подготовим папку дистрибутива.

185
00:15:58,710 --> 00:16:05,030
Это хорошее время для вас сделать git-commit с сообщением Gulp часть 1.