1
00:00:03,320 --> 00:00:09,060
Пришло время перейти ко второй части упражнения Gulp.

2
00:00:09,060 --> 00:00:13,300
Мы продолжим делать те же шаги, что и

3
00:00:13,300 --> 00:00:18,230
во второй части упражнения сценария NPM и в текущем упражнении.

4
00:00:18,230 --> 00:00:25,560
Таким образом, мы организуем удаление папки распространения, затем копирование шрифтов,

5
00:00:25,560 --> 00:00:28,970
а затем перестроение папки распространения,

6
00:00:28,970 --> 00:00:34,605
используя аналогичные модули узлов, которые

7
00:00:34,605 --> 00:00:41,325
мы использовали для Grant, а также скрипты NPM.

8
00:00:41,325 --> 00:00:46,390
Следующий шаг — настроить задачи по удалению

9
00:00:46,390 --> 00:00:51,305
папки дистрибутива, а также копированию шрифтов в папку дистрибутива.

10
00:00:51,305 --> 00:00:54,895
Итак, давайте настроим несколько модулей узлов.

11
00:00:54,895 --> 00:00:59,930
Первый, который мы создадим, называется del.

12
00:01:02,970 --> 00:01:08,195
Эта модель узла позволяет удалить папку.

13
00:01:08,195 --> 00:01:13,655
И давайте продолжим и поставим задачи Gulp.

14
00:01:13,655 --> 00:01:18,780
С Gulp, к счастью, нам не нужно устанавливать другой модуль ради копирования,

15
00:01:18,780 --> 00:01:24,505
потому что потоки Gulp позволяют нам делать копирование файлов с небольшими усилиями.

16
00:01:24,505 --> 00:01:27,945
Перейдя к файлу Gulp,

17
00:01:27,945 --> 00:01:31,870
я собираюсь представить смешанный модуль Gulp,

18
00:01:31,870 --> 00:01:34,185
который я скажу, дель.

19
00:01:34,185 --> 00:01:39,575
А затем требуется модуль del здесь.

20
00:01:39,575 --> 00:01:43,510
Поэтому, как только мы требуем модуль del там,

21
00:01:43,510 --> 00:01:47,524
мы можем идти вперед и настроить задачи.

22
00:01:47,524 --> 00:01:51,695
Итак, мы сначала установим чистую задачу здесь.

23
00:01:51,695 --> 00:01:54,730
Поэтому сразу после задачи по умолчанию

24
00:01:54,730 --> 00:01:57,075
я собираюсь настроить чистую задачу.

25
00:01:57,075 --> 00:02:01,535
Так что я скажу, Gulp задача чистая.

26
00:02:01,535 --> 00:02:04,320
И как вы можете видеть,

27
00:02:04,320 --> 00:02:08,125
это настроено как функция там.

28
00:02:08,125 --> 00:02:14,210
И внутри, что мы бы сказали, возвращение дель.

29
00:02:14,210 --> 00:02:20,885
И тогда поставленный параметр является папкой распространения здесь.

30
00:02:20,885 --> 00:02:24,320
Таким образом, это создаст чистую задачу.

31
00:02:24,320 --> 00:02:26,280
И как только эта задача будет выполнена,

32
00:02:26,280 --> 00:02:30,875
папка дистрибутива будет удалена.

33
00:02:30,875 --> 00:02:40,525
Наша следующая задача — скопировать шрифты в папку дистрибутива.

34
00:02:40,525 --> 00:02:44,625
Так что, я бы сказал, скопируйте шрифты.

35
00:02:44,625 --> 00:02:48,595
И, как вы можете видеть,

36
00:02:48,595 --> 00:02:55,570
мы установили функцию там, а затем закрываем функцию.

37
00:02:55,570 --> 00:02:59,050
И тогда здесь, я бы просто сказал,

38
00:02:59,050 --> 00:03:06,805
Gulp исходные и узловые

39
00:03:06,805 --> 00:03:17,860
модули, шрифт удивительный, шрифты.

40
00:03:21,900 --> 00:03:33,370
Вы можете видеть, как я использую глоббинг, прямо здесь.

41
00:03:39,140 --> 00:03:44,750
И после того, как мы выбираем все исходные файлы,

42
00:03:44,750 --> 00:03:50,560
мы просто передаем их в целевой файл.

43
00:03:51,270 --> 00:03:54,645
Итак, вы заметили, что нам не

44
00:03:54,645 --> 00:04:01,450
нужен конкретный модуль для организации копирования файлов.

45
00:04:01,450 --> 00:04:07,320
Мы просто используем потоки источника и назначения Gulp,

46
00:04:07,320 --> 00:04:12,965
чтобы иметь возможность передавать файлы из исходного местоположения в место назначения.

47
00:04:12,965 --> 00:04:19,075
Таким образом, эти два настроят задачу очистки и копирования шрифтов.

48
00:04:19,075 --> 00:04:24,010
Далее, мы собираемся настроить модуль NPM для задачи imagemin.

49
00:04:24,010 --> 00:04:26,865
Таким образом, минимизация и сжатие изображений.

50
00:04:26,865 --> 00:04:34,910
Итак, для этого добавьте подсказку типа Gulp imagemin.

51
00:04:34,910 --> 00:04:40,965
Это плагин Gulp, соответствующий модулю узла imagemin.

52
00:04:40,965 --> 00:04:45,065
Таким образом, мы установили как Gulp плагин,

53
00:04:45,065 --> 00:04:47,860
который также является модулем узла.

54
00:04:47,860 --> 00:04:51,210
Поэтому, как только установка будет завершена,

55
00:04:51,210 --> 00:04:54,120
давайте настроим эту задачу imagemin.

56
00:04:54,120 --> 00:04:56,285
Перейдя к нашему файлу Gulp,

57
00:04:56,285 --> 00:05:05,700
мы установим задачу imagemin здесь.

58
00:05:05,700 --> 00:05:10,895
Таким образом, мы настроим задачу imagemin как функцию.

59
00:05:10,895 --> 00:05:15,050
Как вы можете видеть, структурирование кода для

60
00:05:15,050 --> 00:05:20,965
определения задачи Gulp в значительной степени стандартно.

61
00:05:20,965 --> 00:05:25,110
Итак, вы бы сказали «Источник глотка».

62
00:05:25,110 --> 00:05:29,650
Здесь мы указываем исходные файлы и исходные файлы

63
00:05:29,650 --> 00:05:38,695
в папке изображений JPG,

64
00:05:38,695 --> 00:05:42,855
GIF и PNG файлы оттуда.

65
00:05:42,855 --> 00:05:50,370
А затем передать их через задачу imagemin.

66
00:05:50,370 --> 00:05:54,285
И тогда я установлю некоторые параметры здесь.

67
00:05:54,285 --> 00:06:00,390
Итак, я установлю

68
00:06:00,390 --> 00:06:07,240
уровень оптимизации до трех, прогрессивный, как истинный.

69
00:06:07,240 --> 00:06:14,534
Таким образом, это превратит их в прогрессивные и чересстрочные изображения.

70
00:06:14,534 --> 00:06:19,570
Поэтому, как только это будет настроено,

71
00:06:20,630 --> 00:06:28,250
следующий шаг - передать их в пункт назначения.

72
00:06:28,250 --> 00:06:36,435
И местом назначения здесь, как вы можете видеть, является папка с изображениями в папке распространения.

73
00:06:36,435 --> 00:06:40,110
Таким образом, с этим задача imagemin теперь настроена.

74
00:06:40,110 --> 00:06:44,430
Теперь мы создадим задачу сборки здесь.

75
00:06:44,430 --> 00:06:50,105
Итак, позвольте мне настроить задачу сборки.

76
00:06:50,105 --> 00:06:52,580
Таким образом, для сборки задачи,

77
00:06:52,580 --> 00:06:57,940
то, что вы хотели бы сделать, это сначала

78
00:06:59,150 --> 00:07:02,965
выполнить чистую задачу до

79
00:07:02,965 --> 00:07:05,005
выполнения оставшихся задач,

80
00:07:05,005 --> 00:07:08,220
потому что мы хотим сначала очистить папку распространения.

81
00:07:08,220 --> 00:07:11,810
И это должно быть завершено, прежде чем будут выполнены оставшиеся задачи.

82
00:07:11,810 --> 00:07:18,605
С Gulp задачи выполняются параллельно автоматически.

83
00:07:18,605 --> 00:07:21,980
И поэтому может случиться так, что

84
00:07:21,980 --> 00:07:25,455
если вы выполняете чистую задачу параллельно с оставшейся задачей,

85
00:07:25,455 --> 00:07:28,500
задача очистки может закончиться позже, а

86
00:07:28,500 --> 00:07:31,430
затем удалить часть работы, которая была выполнена остальными задачами.

87
00:07:31,430 --> 00:07:34,580
Поэтому, когда вы указываете задачу Gulp,

88
00:07:34,580 --> 00:07:36,920
если вы указываете clean как первый в,

89
00:07:36,920 --> 00:07:39,105
как второй параметр здесь,

90
00:07:39,105 --> 00:07:42,625
то это означает, что эта задача будет выполнена первым.

91
00:07:42,625 --> 00:07:45,730
И тогда остальные задачи будут выполнены.

92
00:07:45,730 --> 00:07:48,395
Так что, я бы сказал «Галп старт».

93
00:07:48,395 --> 00:07:49,830
С началом Gulp

94
00:07:49,830 --> 00:07:54,445
все задачи, которые мы здесь указываем, будут выполняться параллельно.

95
00:07:54,445 --> 00:08:03,975
Итак, я собираюсь выполнить задачу копирования шрифтов, а также задачу imagemin вместе.

96
00:08:03,975 --> 00:08:07,255
Позже, мы установим задачу usemin, а затем

97
00:08:07,255 --> 00:08:12,050
выполнить, что также вместе с копированием шрифтов и imagemin.

98
00:08:12,180 --> 00:08:17,400
Последнее, что мне нужно добавить, прежде чем мы продолжим и выполним

99
00:08:17,400 --> 00:08:23,120
задачи, - это подняться сюда, а затем потребовать imagemin.

100
00:08:23,120 --> 00:08:30,115
Я бы сказал, что imagemin требует Gulp imagemin.

101
00:08:30,115 --> 00:08:33,810
А затем сохраните изменения.

102
00:08:34,670 --> 00:08:39,430
Давайте теперь продолжим и проверим задачу сборки.

103
00:08:39,430 --> 00:08:45,400
В подсказке, если ваш тип Gulp build,

104
00:08:45,400 --> 00:08:47,540
то он должен выполнять все три задачи.

105
00:08:47,540 --> 00:08:50,440
Таким образом, вы увидите, что он запускает чистую задачу и

106
00:08:50,440 --> 00:08:54,290
завершает ее, а затем запускает фактическую задачу сборки.

107
00:08:54,290 --> 00:08:56,905
Таким образом, вы можете видеть, что,

108
00:08:56,905 --> 00:09:00,075
указав чистый должен быть завершен до фактической сборки,

109
00:09:00,075 --> 00:09:03,255
затем вы убедитесь, что вы сначала очищаете папку распространения,

110
00:09:03,255 --> 00:09:08,170
а затем задачу сборки, которая включает шрифты копирования и imagemin,

111
00:09:08,170 --> 00:09:14,140
все они, завершенные параллельно, будут выполняться после этого.

112
00:09:14,140 --> 00:09:16,290
Перейдя в редактор,

113
00:09:16,290 --> 00:09:18,705
вы увидите, что в папке дистрибутива

114
00:09:18,705 --> 00:09:23,560
мы видим, что шрифты были скопированы и изображения были скопированы правильно.

115
00:09:23,560 --> 00:09:29,970
Последним шагом является установка задачи usemin для создания папки распространения.

116
00:09:29,970 --> 00:09:32,895
Чтобы настроить их usemin задачу,

117
00:09:32,895 --> 00:09:40,195
я собираюсь установить несколько плагинов Gulp, поэтому я бы сказал, что NPM install.

118
00:09:40,195 --> 00:09:46,310
И тогда я бы установил плагин файла uglify Gulp,

119
00:09:46,310 --> 00:09:48,635
который, очевидно, также является модулем узла.

120
00:09:48,635 --> 00:09:57,170
И тогда я установлю модуль узла usemin, а затем модуль rev node.

121
00:09:57,170 --> 00:10:02,580
Модуль Gulp rev node похож на файл graph rev grant плагин, который мы видели ранее.

122
00:10:02,580 --> 00:10:06,170
Это немного отличается от файла rev, который мы видели ранее,

123
00:10:06,170 --> 00:10:09,995
но служит той же цели.

124
00:10:09,995 --> 00:10:20,315
Итак, Gulp rev, тогда я настрою Gulp чистый CSS, а затем Gulp flatmap.

125
00:10:20,315 --> 00:10:24,390
Вы увидите причину этого, как мы-

126
00:10:26,270 --> 00:10:31,720
Мы создали нашу задачу usemin, так

127
00:10:31,720 --> 00:10:40,470
и gulp-html min, и мы идем вперед и установить эти модули здесь.

128
00:10:40,470 --> 00:10:43,070
Как только модули установлены,

129
00:10:43,070 --> 00:10:50,555
давайте продолжим и требуем эти модули в нашем gulpfile, а затем настроим задачу usemin.

130
00:10:50,555 --> 00:10:54,620
Переходя к нашему gulpfile прямо в верхней части,

131
00:10:54,620 --> 00:10:59,920
я собираюсь потребовать модули, которые я только что установил.

132
00:10:59,920 --> 00:11:08,200
Итак, углифичный глоток углифий.

133
00:11:08,200 --> 00:11:11,820
Таким образом, задача uglify то

134
00:11:11,820 --> 00:11:19,590
usemin задача gulp usemin,

135
00:11:19,590 --> 00:11:21,970
затем после этого

136
00:11:21,970 --> 00:11:32,850
rev то,

137
00:11:33,440 --> 00:11:38,620
забыл там, запятая там.

138
00:11:38,620 --> 00:11:46,775
Будьте очень осторожны, чтобы не пропустить эти запятые там.

139
00:11:46,775 --> 00:12:08,789
Поэтому требуется gulp clean-css, затем flatmap и htmlmin.

140
00:12:08,789 --> 00:12:18,360
Итак, это модули gulp,

141
00:12:18,360 --> 00:12:19,970
которые мы установили,

142
00:12:19,970 --> 00:12:24,580
так что давайте сохраним изменения, а затем мы спустимся вниз и настроим задачу usemin.

143
00:12:24,580 --> 00:12:28,155
Подходя к нижней части файла gulpfile,

144
00:12:28,155 --> 00:12:34,405
прямо там я настрою задачу usemin.

145
00:12:34,405 --> 00:12:36,940
Итак, что делает задача usemin?

146
00:12:36,940 --> 00:12:43,040
Таким образом, задача usemin принимает

147
00:12:43,040 --> 00:12:50,640
htmlfiles, а затем ищет блоки CSS и JavaScript в htmlfiles

148
00:12:50,640 --> 00:12:55,610
, объединяет, объединяет и минимизирует и изменяет файлы, а затем

149
00:12:55,610 --> 00:13:01,325
заменяет их, используя конкатенированный файл в папке распространения.

150
00:13:01,325 --> 00:13:02,965
Поэтому, чтобы начать,

151
00:13:02,965 --> 00:13:10,460
я бы сначала начал с указания источника глотка.

152
00:13:10,460 --> 00:13:12,455
Так где же исходные файлы?

153
00:13:12,455 --> 00:13:17,090
Таким образом, исходные файлы являются htmlfiles в текущей папке.

154
00:13:17,090 --> 00:13:24,830
Так глоток. /start.html, то я собираюсь

155
00:13:24,830 --> 00:13:32,990
передать эти gulpfiles через этот модуль gulp, называемый как flatmap.

156
00:13:32,990 --> 00:13:34,535
Что делает плоская карта?

157
00:13:34,535 --> 00:13:37,980
Flatmap принимает эти несколько htmlfiles, а затем

158
00:13:37,980 --> 00:13:42,415
запускает параллельные конвейеры для каждого из этих htmlfiles.

159
00:13:42,415 --> 00:13:46,295
Каждый из них проходит один и тот же набор шагов, а затем, наконец,

160
00:13:46,295 --> 00:13:49,550
сходится и копирует его в папку назначения.

161
00:13:49,550 --> 00:13:52,560
Таким образом, как вы можете видеть в нашей текущей папке,

162
00:13:52,560 --> 00:13:57,095
у нас есть contactus.html, aboutus.html и index.html.

163
00:13:57,095 --> 00:14:00,020
Все три из них должны быть обработаны.

164
00:14:00,020 --> 00:14:04,465
Таким образом, плоская карта позволяет нам обрабатывать их параллельно,

165
00:14:04,465 --> 00:14:10,280
запуская один и тот же набор труб для каждого из этих файлов,

166
00:14:10,280 --> 00:14:12,910
поэтому я использую плоскую карту там.

167
00:14:12,910 --> 00:14:20,650
Итак, flatmap, а затем внутри flatmap мне нужно указать функцию,

168
00:14:20,650 --> 00:14:25,315
два параметра; поток, файл.

169
00:14:25,315 --> 00:14:32,590
Таким образом, файл в основном принимает каждый из тех исходных файлов, которые мы там указали,

170
00:14:32,590 --> 00:14:39,550
а затем обрабатывает их с

171
00:14:39,550 --> 00:14:43,460
одним и тем же набором функций здесь, а затем запускает свой отдельный поток для каждого из них.

172
00:14:43,460 --> 00:14:48,585
Итак, я верну поток,

173
00:14:48,585 --> 00:14:52,990
а затем я буду передавать каждый из них

174
00:14:53,070 --> 00:15:00,930
через задачу usemin, которая сама,

175
00:15:00,930 --> 00:15:08,240
состоит из css

176
00:15:09,630 --> 00:15:14,470
и uglify JavaScript и html задачи.

177
00:15:14,470 --> 00:15:20,965
Поэтому для css я собираюсь выполнить часть ревизии.

178
00:15:20,965 --> 00:15:26,220
Таким образом, часть css, очевидно, будет делать конкатенацию и минимизацию

179
00:15:26,220 --> 00:15:29,520
и т. Д., А затем применяет rev к этому,

180
00:15:29,520 --> 00:15:34,930
чтобы она работала 20-битной строкой в файле main.css там.

181
00:15:34,930 --> 00:15:36,905
Поэтому для css я установил это,

182
00:15:36,905 --> 00:15:39,440
а затем для html,

183
00:15:39,440 --> 00:15:42,890
потому что у меня есть несколько htmlmin файлов,

184
00:15:42,890 --> 00:15:45,745
мне нужно указать это как функцию,

185
00:15:45,745 --> 00:15:55,540
и внутри этой функции я бы сказал, что return htmlmin.

186
00:15:55,570 --> 00:16:05,660
И затем внутри я дам ему параметр CollapseWhiteSpace,

187
00:16:05,660 --> 00:16:11,955
и этот параметр будет установлен в true.

188
00:16:11,955 --> 00:16:18,630
И поэтому это по существу завершает его html-часть.

189
00:16:18,630 --> 00:16:24,970
И затем следующий - это часть js,

190
00:16:24,970 --> 00:16:26,160
часть JavaScript,

191
00:16:26,160 --> 00:16:35,105
которую мне нужно сделать uglify, а затем ревизию для него.

192
00:16:35,105 --> 00:16:44,060
И затем, если у меня

193
00:16:44,060 --> 00:16:48,355
есть встроенный код javascript, мне нужно применить

194
00:16:48,355 --> 00:16:54,580
задачу uglify для этого,

195
00:16:54,580 --> 00:16:57,435
а затем для кода inlinecss,

196
00:16:57,435 --> 00:17:06,640
я буду использовать задачу CleanCSS там с concat в качестве параметра там.

197
00:17:06,640 --> 00:17:09,880
Поэтому с этим я установил свою задачу usemin.

198
00:17:09,880 --> 00:17:13,950
Так что он будет обслуживать все эти разные действия от моего имени.

199
00:17:13,950 --> 00:17:17,010
И затем, как только они будут закончены,

200
00:17:17,010 --> 00:17:22,420
результирующие

201
00:17:22,420 --> 00:17:29,845
потоки будут переданы в папку дистрибутива.

202
00:17:29,845 --> 00:17:34,290
Таким образом, задача usemin теперь настроена.

203
00:17:34,290 --> 00:17:36,295
Позволь мне сохранить изменения.

204
00:17:36,295 --> 00:17:41,900
И тогда я перейду к задаче сборки, а затем после imagemin я также

205
00:17:41,900 --> 00:17:47,955
добавлю usemin в качестве одной из задач, которые будут выполняться задачей сборки.

206
00:17:47,955 --> 00:17:50,410
Итак, с этими изменениями,

207
00:17:50,410 --> 00:17:52,945
мы изменили задачу сборки,

208
00:17:52,945 --> 00:18:00,720
давайте продолжим, а затем проверим, правильно ли построена папка дистрибутива или нет.

209
00:18:00,720 --> 00:18:04,315
Перейдя к подсказке, позвольте мне ввести gulp

210
00:18:04,315 --> 00:18:10,065
build, а затем подождать gulp, чтобы создать все разные задачи.

211
00:18:10,065 --> 00:18:13,585
Это займет немного времени, чтобы usemin завершил свою работу,

212
00:18:13,585 --> 00:18:18,265
и когда он завершит преобразование,

213
00:18:18,265 --> 00:18:22,875
моя папка дистрибутива должна быть готова к просмотру.

214
00:18:22,875 --> 00:18:28,260
Перейдя в редактор, вы можете увидеть, что папка дистрибутива была

215
00:18:28,260 --> 00:18:34,345
подготовлена здесь, и вы можете увидеть индекс, contactus и aboutus.htmlfile.

216
00:18:34,345 --> 00:18:37,470
Вы можете видеть, что при открытии index.htmlfile

217
00:18:37,470 --> 00:18:39,365
он был сжат.

218
00:18:39,365 --> 00:18:42,605
И htmlmin был выполнен,

219
00:18:42,605 --> 00:18:46,515
в частности обратите внимание, как файл css был

220
00:18:46,515 --> 00:18:54,300
заменен на css/main-, а затем вы увидите длинную строку there.css.

221
00:18:54,300 --> 00:19:04,300
Так что это точно так же, как файл rev, который вы видели в ворчании с модулем gulp rev,

222
00:19:04,300 --> 00:19:06,960
это то, что он делает с именем файла.

223
00:19:06,960 --> 00:19:11,350
Поэтому, если вы посмотрите на css, вы можете увидеть, что имя файла является основным дефисом, а

224
00:19:11,350 --> 00:19:16,470
затем некоторая строка там точка css и аналогично для javascriptfile.

225
00:19:16,470 --> 00:19:20,345
Итак, это то, что делает модуль gulp rev,

226
00:19:20,345 --> 00:19:22,505
и тогда все эти три файла готовятся.

227
00:19:22,505 --> 00:19:26,850
Давайте посмотрим на эти файлы в браузере.

228
00:19:26,850 --> 00:19:33,195
Перейдя в браузер, я вижу, что исходные файлы сохраняются правильно.

229
00:19:33,195 --> 00:19:36,190
Позвольте мне проверить папку распространения.

230
00:19:36,190 --> 00:19:38,220
Таким образом, в папке

231
00:19:38,220 --> 00:19:42,350
дистрибутива index.html, который был подготовлен

232
00:19:42,350 --> 00:19:47,925
задачей сборки gulp, похоже, работает правильно.

233
00:19:47,925 --> 00:19:51,560
Позвольте мне также проверить страницу о странице,

234
00:19:51,560 --> 00:19:55,435
и мы можем видеть, что о странице также построен правильно,

235
00:19:55,435 --> 00:19:58,680
а также страница контакта.

236
00:19:58,680 --> 00:20:04,075
Итак, теперь вы можете видеть, что наша задача глотка завершена.

237
00:20:04,075 --> 00:20:07,105
Таким образом, мы завершим это упражнение.

238
00:20:07,105 --> 00:20:11,430
В этом упражнении мы настроили очистку и

239
00:20:11,430 --> 00:20:15,780
копирование файлов шрифтов в нашу папку дистрибутива,

240
00:20:15,780 --> 00:20:18,530
мы выполнили задачу imagemin, а затем, наконец, мы создали

241
00:20:18,530 --> 00:20:22,865
задачу usemin для создания нашей папки распространения.

242
00:20:22,865 --> 00:20:26,140
Этим мы завершаем это упражнение.

243
00:20:26,140 --> 00:20:33,770
Это может быть хорошее время для вас, чтобы сделать хороший комментарий с сообщением Gulp часть вторая.