1
00:00:03,510 --> 00:00:06,510
Давайте продолжим хрюкать.

2
00:00:06,510 --> 00:00:11,175
Как мы сделали во второй части упражнения сценариев NPM,

3
00:00:11,175 --> 00:00:14,660
в этой второй части этого упражнения ворчущего,

4
00:00:14,660 --> 00:00:17,080
мы собираемся настроить точно такие же задачи.

5
00:00:17,080 --> 00:00:20,475
Мы собираемся сделать очистку папки распространения,

6
00:00:20,475 --> 00:00:23,175
копирование шрифтов в папку распространения,

7
00:00:23,175 --> 00:00:29,780
затем мы также сделаем минимизацию наших изображений с помощью imagemin,

8
00:00:29,780 --> 00:00:37,530
а затем, наконец, использовать задачу usemin для создания и подготовки нашей папки распространения.

9
00:00:37,530 --> 00:00:40,420
Продолжая наше упражнение,

10
00:00:40,420 --> 00:00:43,590
я установлю пару ворчущих модулей.

11
00:00:43,590 --> 00:00:49,990
Итак, давайте установим NPM, install-grunt-contrib-copy.

12
00:00:51,110 --> 00:01:00,665
Это используется для копирования файлов, а затем grunt-contrib-clean

13
00:01:00,665 --> 00:01:04,575
и минус save-dev.

14
00:01:04,575 --> 00:01:06,655
И как только эти два будут установлены,

15
00:01:06,655 --> 00:01:10,595
мы будем продолжать и конфигурируем соответствующие задачи.

16
00:01:10,595 --> 00:01:12,800
Перейдя к вашему файлу grunt,

17
00:01:12,800 --> 00:01:19,770
мы добавим в конфигурацию как для копирования, так и для чистых задач.

18
00:01:19,770 --> 00:01:22,895
Итак, начиная с запятой,

19
00:01:22,895 --> 00:01:26,295
всегда помните, чтобы не забыть запятую.

20
00:01:26,295 --> 00:01:30,360
Он вернется, чтобы укусить тебя в неправильные моменты, если ты это сделаешь.

21
00:01:30,360 --> 00:01:32,245
Итак, давайте настроим задачу копирования.

22
00:01:32,245 --> 00:01:38,180
Для копии usemin ожидает, что мы также сохраним

23
00:01:38,180 --> 00:01:41,110
наши HTML-файлы скопированы в папку распространения

24
00:01:41,110 --> 00:01:44,760
, чтобы он мог делать манипуляции с этим.

25
00:01:44,760 --> 00:01:47,250
Итак, в этом случае

26
00:01:47,250 --> 00:01:48,630
мы собираемся сначала скопировать

27
00:01:48,630 --> 00:01:53,440
HTML-файлы из нашей папки проекта в папку дистрибутива.

28
00:01:53,440 --> 00:01:55,330
Итак, чтобы сделать копирование,

29
00:01:55,330 --> 00:02:01,535
я собираюсь настроить его HTML-часть.

30
00:02:01,535 --> 00:02:04,740
Таким образом, здесь мы будем использовать некоторые из

31
00:02:04,740 --> 00:02:09,920
синтаксиса grunt для указания файлов, которые нужно скопировать.

32
00:02:09,920 --> 00:02:19,880
Итак, я говорю файлы, а также указываю правые,

33
00:02:19,880 --> 00:02:23,560
левые и правые скобки там, поэтому внутри этого

34
00:02:23,560 --> 00:02:27,855
мне нужно указать определенную конфигурацию.

35
00:02:27,855 --> 00:02:37,600
Итак, я бы сказал, расширить true и dot true, затем CWD,

36
00:02:37,600 --> 00:02:42,015
текущий рабочий каталог - точка косой черты

37
00:02:42,015 --> 00:02:44,440
, а затем,

38
00:02:44,440 --> 00:02:51,730
мы настроим следующий, который является SRC, исходные файлы,

39
00:02:51,730 --> 00:02:56,690
а затем исходные файлы star.html,

40
00:02:56,690 --> 00:02:59,325
все HTML-файлы,

41
00:02:59,325 --> 00:03:05,850
а затем мы собираемся скопировать их в папка dist.

42
00:03:05,850 --> 00:03:10,135
Вот почему место назначения устанавливается в папку дистрибутива.

43
00:03:10,135 --> 00:03:12,385
Таким образом, с этой настройкой

44
00:03:12,385 --> 00:03:18,880
моя задача копирования скопирует все HTML-файлы в папку распространения.

45
00:03:18,880 --> 00:03:22,285
Теперь вместе с этим, нам также нужно скопировать шрифты.

46
00:03:22,285 --> 00:03:26,200
Итак, я настрою второй для шрифтов.

47
00:03:26,200 --> 00:03:31,090
Итак, я указываю шрифты, а затем здесь также мне нужно указать

48
00:03:31,090 --> 00:03:37,500
файлы, которые нужно скопировать, и поэтому мы говорим файлы,

49
00:03:37,500 --> 00:03:41,780
а затем это

50
00:03:41,780 --> 00:03:47,465
некоторые параметры конфигурации, которые вам нужно настроить для задачи копирования.

51
00:03:47,465 --> 00:03:49,225
Теперь, если вам нужно понять,

52
00:03:49,225 --> 00:03:54,510
то, прочитав документацию для соответствующего плагина grunt,

53
00:03:54,510 --> 00:03:57,650
вы сможете понять это и так или вы можете

54
00:03:57,650 --> 00:04:00,960
просто следовать примеру, который я даю здесь.

55
00:04:00,960 --> 00:04:05,350
Итак, точка true, а затем CWD,

56
00:04:05,350 --> 00:04:14,780
текущий рабочий каталог - это модули узлов и шрифт удивительный.

57
00:04:14,780 --> 00:04:18,295
Вот где я собираюсь скопировать файлы,

58
00:04:18,295 --> 00:04:27,180
а затем источником файлов является fontsstar.star, это

59
00:04:27,180 --> 00:04:30,310
файлы, которые мне нужно скопировать,

60
00:04:30,310 --> 00:04:38,370
а местом назначения является папка распространения.

61
00:04:38,370 --> 00:04:42,050
Таким образом, я установил свою задачу копирования, чтобы скопировать

62
00:04:42,050 --> 00:04:47,490
как файлы HTML, так и файлы шрифтов в мою папку распространения.

63
00:04:47,490 --> 00:04:52,370
Следующая задача, которую я собираюсь настроить, - это чистая задача.

64
00:04:52,370 --> 00:04:56,290
Итак, позвольте мне настроить чистую задачу.

65
00:04:56,540 --> 00:05:05,825
Для чистой задачи я настрою сборку,

66
00:05:05,825 --> 00:05:13,460
а затем скажу, что источник является папкой распространения.

67
00:05:13,460 --> 00:05:19,660
Таким образом, по существу указав, что папка дистрибутива должна быть очищена.

68
00:05:19,830 --> 00:05:27,835
Итак, теперь мы настроили копию и чистые задачи, так что давайте сохраним изменения.

69
00:05:27,835 --> 00:05:31,530
Следующая задача, которую я собираюсь настроить, - это задача imagemin.

70
00:05:31,530 --> 00:05:40,030
Это то, что мы будем использовать для сжатия и копирования изображений в папку распространения.

71
00:05:40,030 --> 00:05:44,200
Чтобы начать работу с задачей imagemin, на первом шаге

72
00:05:44,200 --> 00:05:49,910
установите соответствующий плагин grunt.

73
00:05:49,910 --> 00:06:00,520
Итак, грант-contrib-imagemin, минус минус save.dev.

74
00:06:00,520 --> 00:06:03,470
И как только это будет установлено,

75
00:06:03,470 --> 00:06:07,330
то мы продолжим и настроим соответствующую задачу imagemin.

76
00:06:07,330 --> 00:06:12,015
Переходя к нашему файлу grunt после настройки для чистой задачи,

77
00:06:12,015 --> 00:06:15,620
я собираюсь настроить задачу imagemin.

78
00:06:15,620 --> 00:06:18,050
Итак, я скажу imagemin,

79
00:06:19,460 --> 00:06:22,055
а затем прямо там,

80
00:06:22,055 --> 00:06:26,225
я буду указывать динамические,

81
00:06:26,225 --> 00:06:30,950
и внутри там я буду указывать файлы, чтобы вы могли

82
00:06:30,950 --> 00:06:36,010
видеть, что спецификация файла будет похожа.

83
00:06:36,010 --> 00:06:39,130
Я бы сказал, разверните true,

84
00:06:39,130 --> 00:06:46,830
тогда CWD - текущий каталог.

85
00:06:49,680 --> 00:06:58,350
Тогда источником файлов является imagestar.

86
00:07:00,840 --> 00:07:05,405
а затем в скобках, в скобках,

87
00:07:05,405 --> 00:07:12,910
я указываю PNG, GIF и JPG.

88
00:07:12,910 --> 00:07:17,000
Таким образом, вы можете увидеть глобальный шаблон файла здесь.

89
00:07:17,000 --> 00:07:18,640
Таким образом, он говорит, что любые

90
00:07:18,640 --> 00:07:21,610
файлы PNG, GIF или JPG, которые соответствуют этому шаблону, а затем

91
00:07:21,610 --> 00:07:25,755
начать точку, означающую все файлы этого шаблона

92
00:07:25,755 --> 00:07:29,280
, и источник и место назначения, которые

93
00:07:29,280 --> 00:07:34,310
я установил в качестве папки распространения.

94
00:07:34,310 --> 00:07:37,790
Таким образом, мы настроили нашу

95
00:07:37,790 --> 00:07:39,425
задачу копирования, очистки и imagemin.

96
00:07:39,425 --> 00:07:46,670
Давайте настроим задачу здесь под названием build.

97
00:07:46,670 --> 00:07:49,365
Итак, я бы сказал, зарегистрировать задачу,

98
00:07:49,365 --> 00:07:55,700
grunt зарегистрировать задачу, а затем я назову задачу как сборку

99
00:07:55,700 --> 00:07:57,695
, а затем внутри этого

100
00:07:57,695 --> 00:08:03,160
мы определим шаги настройки, которые будут выполнены задачей сборки.

101
00:08:03,160 --> 00:08:09,105
Итак, прямо там, точка с запятой, а затем там,

102
00:08:09,105 --> 00:08:13,685
я уточню три задачи в последовательности, которые они должны быть выполнены.

103
00:08:13,685 --> 00:08:16,650
Во-первых, я скажу: «Чисто».

104
00:08:16,650 --> 00:08:19,420
Таким образом, мы очистим папку распространения,

105
00:08:19,420 --> 00:08:22,340
а затем начнем перестроить папку распространения.

106
00:08:22,340 --> 00:08:27,320
Чистый, тогда следующая задача будет

107
00:08:27,320 --> 00:08:36,980
копировать, а затем после этого я сделаю, imagemin.

108
00:08:37,380 --> 00:08:41,340
Таким образом, эти три задачи должны быть настроены здесь.

109
00:08:41,340 --> 00:08:43,910
Так что с этим позвольте мне сохранить изменения.

110
00:08:43,910 --> 00:08:46,590
Посмотрим, как работает эта штука.

111
00:08:46,590 --> 00:08:50,280
Теперь, перейдя к подсказке, если я напечатаю

112
00:08:50,280 --> 00:08:57,955
, ворчусь и строю, вы увидите, что сначала он выполнит очистку,

113
00:08:57,955 --> 00:09:01,550
а затем выполнит копию и выполнит задачу imagemin.

114
00:09:01,550 --> 00:09:05,600
Таким образом, он делает все эти три, и тогда вы сразу увидите, что

115
00:09:05,600 --> 00:09:11,810
папка дистрибутива создана в моей папке проекта здесь.

116
00:09:11,810 --> 00:09:15,200
И внутри папки дистрибутива можно увидеть, что шрифты были скопированы,

117
00:09:15,200 --> 00:09:16,590
изображения были скопированы и

118
00:09:16,590 --> 00:09:20,665
три HTML-файла были скопированы в папку дистрибутива.

119
00:09:20,665 --> 00:09:22,350
Ты только на полпути.

120
00:09:22,350 --> 00:09:29,370
Теперь нам нужно иметь возможность обрабатывать эти файлы с помощью плагина usemin.

121
00:09:29,370 --> 00:09:31,675
Итак, давайте перейдем к следующему.

122
00:09:31,675 --> 00:09:35,140
Теперь я собираюсь установить несколько модулей NPM

123
00:09:35,140 --> 00:09:38,555
, которые полезны для создания папки распространения.

124
00:09:38,555 --> 00:09:42,225
Поэтому, чтобы сделать это, я бы сказал NPM установить.

125
00:09:42,225 --> 00:09:47,120
Я могу указать здесь набор модулей, поэтому,

126
00:09:47,120 --> 00:09:52,300
я бы сказал, grunt-contrib-concat.

127
00:09:52,300 --> 00:10:01,000
Итак, это используется для конкатенации файлов, затем grunt-contrib-cssmin,

128
00:10:01,000 --> 00:10:13,512
grunt-contrib-htmlmin, затем скажем, grunt-contrib-uglify.

129
00:10:13,512 --> 00:10:18,240
Потом хрюнт-filerev.

130
00:10:18,240 --> 00:10:21,910
Вы увидите причину использования filerev через короткое время,

131
00:10:21,910 --> 00:10:32,925
а затем grunt-usemin, а затем сохраните def, а затем

132
00:10:35,475 --> 00:10:40,050
установите все эти grunt модули.

133
00:10:40,050 --> 00:10:42,205
После того, как все они были установлены,

134
00:10:42,205 --> 00:10:44,305
следующим шагом является переход и настройка,

135
00:10:44,305 --> 00:10:47,625
usemin задача, которая также использует

136
00:10:47,625 --> 00:10:55,090
задачи cssmin Uglify Concat для выполнения построения папки распространения.

137
00:10:55,090 --> 00:10:59,140
Теперь давайте приступаем к настройке задачи usemin.

138
00:10:59,140 --> 00:11:03,750
Поэтому возвращаясь к файлу grunt после imagemin,

139
00:11:03,750 --> 00:11:10,950
я собираюсь добавить в следующую задачу для usemin для работы с grunt.

140
00:11:10,950 --> 00:11:17,165
Первая задача, которую мне нужно настроить, называется UseMinPrepare.

141
00:11:19,145 --> 00:11:25,175
Эта задача UseMinPrepare подготовит файлы, а затем также настроить

142
00:11:25,175 --> 00:11:32,655
Concache CSS min и Uglify и file ref плагины,

143
00:11:32,655 --> 00:11:35,070
так что они могут выполнять свою работу правильно.

144
00:11:35,070 --> 00:11:36,915
Таким образом, это причина useMinPrepare.

145
00:11:36,915 --> 00:11:42,220
Так вот, как был разработан плагин grant usemin.

146
00:11:42,220 --> 00:11:48,340
Несколько отличается от того, как usemin, который мы использовали с конца игры скрипты wooks.

147
00:11:48,340 --> 00:11:50,295
Итак, в UseMinPrepare

148
00:11:50,295 --> 00:11:59,590
просто какое-то случайное имя, которое я собираюсь использовать, а затем сказать, что назначение - это dist.

149
00:11:59,590 --> 00:12:08,730
И тогда я бы указал источник как все html-файлы здесь.

150
00:12:08,730 --> 00:12:13,605
Поэтому я бы сказал contactus.html

151
00:12:14,875 --> 00:12:23,550
, aboutus.html и index.html.

152
00:12:23,550 --> 00:12:26,915
Таким образом, все эти три файла должны быть обработаны.

153
00:12:26,915 --> 00:12:30,765
Следующая часть этой конфигурации usemin, конфигурация

154
00:12:30,765 --> 00:12:37,735
UseMinPrepare, где я указываю параметры.

155
00:12:38,115 --> 00:12:43,245
Это то, что я понял с помощью проб и ошибок.

156
00:12:44,995 --> 00:12:47,395
Просто следуйте по шагам.

157
00:12:47,395 --> 00:12:48,845
Поэтому мне нужно настроить

158
00:12:48,845 --> 00:12:54,125
несколько вещей здесь внутри, где мне нужно настроить что-то под названием Flow.

159
00:12:54,125 --> 00:13:00,695
И затем внутри мне нужно настроить другую часть под названием Steps,

160
00:13:00,695 --> 00:13:07,875
а затем здесь я указываю шаги здесь, а затем говорю cssmin,

161
00:13:07,915 --> 00:13:14,645
а затем после этого я скажу, что js uglify.

162
00:13:14,645 --> 00:13:21,515
Итак, это то, что мне нужно указать здесь, а затем после этого я говорю сообщение,

163
00:13:24,405 --> 00:13:29,695
и здесь я могу позволить этому предоставить

164
00:13:29,695 --> 00:13:36,475
некоторые варианты для своих конкретных задач, которые я настроил.

165
00:13:36,475 --> 00:13:40,175
Итак, я предоставляю некоторые дополнительные опции для css.

166
00:13:40,175 --> 00:13:44,540
Таким образом, это поставляется внутри поста здесь.

167
00:13:44,540 --> 00:13:49,485
Теперь, опять же, это то, как должна быть выполнена конфигурация.

168
00:13:49,485 --> 00:13:52,695
Итак, мы только что узнали это, посмотрев документацию там.

169
00:13:52,695 --> 00:13:55,390
Итак, здесь внутри post css,

170
00:13:55,390 --> 00:13:59,275
я бы указал имя как cssmin.

171
00:13:59,275 --> 00:14:01,450
До сих пор это задача cssmin.

172
00:14:01,450 --> 00:14:07,974
Я бы сказал CreateConfig:

173
00:14:08,775 --> 00:14:17,005
блок контекста функции, а затем внутри этой функции

174
00:14:17,005 --> 00:14:19,955
я должен предоставить определенные параметры.

175
00:14:19,955 --> 00:14:22,175
Итак, я бы сказал, что

176
00:14:22,175 --> 00:14:31,835
генератор параметров контекста var.

177
00:14:31,835 --> 00:14:34,685
Таким образом, это некоторая переменная JavaScript, которую мне нужно

178
00:14:34,685 --> 00:14:38,705
указать там, объект JavaScript по существу.

179
00:14:38,705 --> 00:14:44,185
Таким образом, этот объект содержит это свойство, называемое options,

180
00:14:44,185 --> 00:14:48,005
где я могу указать некоторые параметры, которые передаются

181
00:14:48,005 --> 00:14:51,485
в CSS min, задаваемый задачей usemin prepare.

182
00:14:51,485 --> 00:14:56,310
Таким образом, там, сохраняйте

183
00:14:56,310 --> 00:15:02,105
специальные комментарии, а затем,

184
00:15:05,655 --> 00:15:08,635
rebase является ложным.

185
00:15:08,635 --> 00:15:16,025
По-видимому, мне нужно предоставить это, чтобы моя задача cssmin в настоящее время обрабатывала

186
00:15:16,025 --> 00:15:23,855
удивительную модификацию шрифта и включение в конкатенированный файл.

187
00:15:23,855 --> 00:15:25,390
Если я этого не сделаю,

188
00:15:25,390 --> 00:15:29,380
похоже, сломает шрифт удивительным, и это то, что я понял,

189
00:15:29,380 --> 00:15:31,890
выполнив небольшое

190
00:15:31,890 --> 00:15:37,285
исследование переполнения стека и некоторых из этих мест и выяснив,

191
00:15:37,285 --> 00:15:42,505
что их проблема, вызванная шрифтом, может быть

192
00:15:42,505 --> 00:15:48,619
исправлена, включив это в моя вонючий конфигурация.

193
00:15:48,619 --> 00:15:51,445
Итак, снова я только что просмотрел

194
00:15:51,445 --> 00:15:55,810
предложения от некоторых людей, которые пытались и исправить проблему.

195
00:15:55,810 --> 00:15:58,465
Итак, если вы столкнетесь с такими проблемами,

196
00:15:58,465 --> 00:16:02,675
это один из способов решения проблем, которые могут возникнуть при

197
00:16:02,675 --> 00:16:07,525
работе с этими различными инструментами.

198
00:16:07,525 --> 00:16:14,710
Позвольте мне добавить в следующую задачу для Concat.

199
00:16:14,710 --> 00:16:21,180
Здесь я уточню некоторые вещи и варианты.

200
00:16:21,180 --> 00:16:28,135
Я указываю эту точку с запятой,

201
00:16:28,135 --> 00:16:31,215
поэтому это то, что мне нужно указать для Concat,

202
00:16:31,215 --> 00:16:37,725
а затем после

203
00:16:37,725 --> 00:16:43,180
опций я указываю dist как пустой.

204
00:16:43,180 --> 00:16:48,385
Теперь эти параметры Concat будут настроены UseMinPrepare, который запускается ранее.

205
00:16:48,385 --> 00:16:50,435
Таким образом, мы можем оставить большую часть этого пустым там,

206
00:16:50,435 --> 00:16:54,005
а затем это будет перенастроено UseMinPrepare.

207
00:16:54,005 --> 00:16:57,005
Следующий - углифий.

208
00:16:57,665 --> 00:17:06,055
Внутри uglify также мне просто нужно указать этот dist как пустой.

209
00:17:06,055 --> 00:17:08,255
Если я не указываю их,

210
00:17:08,255 --> 00:17:12,890
то задача usemin работает неправильно.

211
00:17:12,890 --> 00:17:16,785
Поэтому мне нужно четко указать все эти вещи.

212
00:17:16,785 --> 00:17:21,905
Поэтому для cssmin также я бы сказал, что dist пустой.

213
00:17:21,905 --> 00:17:29,005
И затем следующая задача, которую я собираюсь настроить, называется filerev.

214
00:17:29,625 --> 00:17:36,725
Итак, вы видели, как я устанавливал плагин filerev для Grunt.

215
00:17:36,725 --> 00:17:38,480
Что делает этот файлерев?

216
00:17:38,480 --> 00:17:44,640
Что делает filerev, это когда usemin готовит файл main.css и main.js,

217
00:17:44,640 --> 00:17:53,170
то, что делает filerev, это добавляет дополнительное расширение к этому главному имени,

218
00:17:53,170 --> 00:18:02,070
так что, когда вы подготавливаете новую версию своего сайта и загружаете ее на веб-страницу,

219
00:18:02,070 --> 00:18:05,895
если кто-то видел ваш Сайт раньше,

220
00:18:05,895 --> 00:18:12,030
то их браузер мог обналичить файлы main.css и main.js.

221
00:18:12,030 --> 00:18:15,675
Если вы не прикрепите этот filerev то, что происходит,

222
00:18:15,675 --> 00:18:21,480
браузер ниже загружает новую версию вашей веб-страницы.

223
00:18:21,480 --> 00:18:24,605
Он может не загружать файл main.js и main.css,

224
00:18:24,605 --> 00:18:28,515
потому что он находит их уже в локальном кэше.

225
00:18:28,515 --> 00:18:31,820
Таким образом, ваша веб-страница может быть некорректно отображена.

226
00:18:31,820 --> 00:18:33,725
Итак, чтобы справиться с проблемой,

227
00:18:33,725 --> 00:18:37,535
то, что мы делаем, это каждый раз, когда мы готовим новую папку дистрибутива,

228
00:18:37,535 --> 00:18:41,235
мы добавим ревизию файла.

229
00:18:41,235 --> 00:18:43,045
Вот что означает filerev,

230
00:18:43,045 --> 00:18:44,985
номер версии файла,

231
00:18:44,985 --> 00:18:54,100
как дополнительное расширение к имени этих файлов css и js.

232
00:18:54,100 --> 00:18:56,950
Main.ss и main.js файлы предварительно подготовленные.

233
00:18:56,950 --> 00:18:58,820
Так вот что делает Filerev.

234
00:18:58,820 --> 00:19:02,440
Теперь, как этот filerev может вычислить это значение?

235
00:19:02,440 --> 00:19:07,685
Он принимает содержимое этих файлов, а затем выполняет некоторую обработку, а затем генерирует

236
00:19:07,685 --> 00:19:14,655
md5 сжатый номер 20 символов, который будет прикреплен к основному файлу.

237
00:19:14,655 --> 00:19:17,440
Итак, я собираюсь настроить эту часть здесь.

238
00:19:17,440 --> 00:19:20,245
Итак, в опциях

239
00:19:20,245 --> 00:19:30,990
я указываю здесь, говоря, как предполагается вычислять это число там.

240
00:19:30,990 --> 00:19:33,740
Итак, я говорю кодирование utf8,

241
00:19:33,740 --> 00:19:40,150
а затем я говорю, что алгоритм, который он использовал для вычисления этого хэша,

242
00:19:40,150 --> 00:19:43,544
то, что мы называем хэшем, является md5.

243
00:19:43,544 --> 00:19:47,060
Теперь это станет яснее, когда мы на самом деле запускаем

244
00:19:47,060 --> 00:19:53,020
задачу usemin, а затем посмотрим, что она делает, длина 20.

245
00:19:53,020 --> 00:19:55,475
Итак, я вернусь и объясню, что

246
00:19:55,475 --> 00:19:59,460
делает эта штука, когда мы действительно запускаем задачу usemin.

247
00:19:59,460 --> 00:20:06,790
Итак, позвольте мне закончить варианты здесь, а затем я бы сказал, релиз.

248
00:20:06,790 --> 00:20:10,855
Итак, мне нужно настроить еще несколько вещей здесь, а затем освободить,

249
00:20:10,855 --> 00:20:18,150
а затем мне нужно указать файлы, для которых должен действовать мой filerev.

250
00:20:18,150 --> 00:20:20,625
Итак, я бы сказал файлы filerev.

251
00:20:20,625 --> 00:20:22,005
Итак, внутри файла.

252
00:20:22,005 --> 00:20:26,645
Итак, вы начинаете видеть шаблон в том, как вещи указаны здесь.

253
00:20:26,645 --> 00:20:28,640
Итак, когда вы укажете файлы здесь,

254
00:20:28,640 --> 00:20:30,775
вы скажете источник,

255
00:20:30,775 --> 00:20:37,815
а затем там вы укажете dist CSS,

256
00:20:37,815 --> 00:20:41,025
а затем star dot CSS,

257
00:20:41,025 --> 00:20:47,295
а затем следующий dist js*.js.

258
00:20:47,295 --> 00:20:51,225
Таким образом, с этим вы настроили filerev.

259
00:20:51,225 --> 00:20:53,625
Таким образом, конфигурируется часть filerev.

260
00:20:53,625 --> 00:20:58,820
И, наконец, нам нужно настроить задачу usemin.

261
00:20:58,820 --> 00:21:00,795
Итак, чтобы настроить задачу usemin,

262
00:21:00,795 --> 00:21:04,125
я иду сюда и говорю usemin,

263
00:21:04,125 --> 00:21:09,100
и здесь позвольте мне указать некоторые параметры для задачи usemin.

264
00:21:09,100 --> 00:21:12,470
Итак, здесь я указываю html.

265
00:21:12,470 --> 00:21:21,205
Итак, здесь я указываю ему, какие файлы он должен изменить,

266
00:21:22,255 --> 00:21:25,455
его нужно обновить.

267
00:21:25,455 --> 00:21:32,465
Таким образом, файлы, которые были скопированы в папку распространения.

268
00:21:33,290 --> 00:21:41,975
И последний - «dist/index.html».

269
00:21:41,975 --> 00:21:50,300
Итак, это три файла, которые он должен обработать,

270
00:21:50,510 --> 00:21:55,095
а затем некоторые варианты для этого здесь.

271
00:21:55,095 --> 00:22:04,970
Итак, параметры я буду указывать «AssetsDirs».

272
00:22:04,970 --> 00:22:10,520
Итак, здесь все активы, которые я использую, существуют.

273
00:22:10,520 --> 00:22:14,355
Таким образом, CSS и JavaScript файлы существуют.

274
00:22:14,355 --> 00:22:21,715
Итак, я укажу «dist/css» и «dist/js».

275
00:22:21,715 --> 00:22:27,020
При этом вы завершили настройку задачи «usemin».

276
00:22:27,020 --> 00:22:30,930
Далее настраиваем задачу «htmlmin».

277
00:22:30,930 --> 00:22:32,870
Для задачи «htmlmin»

278
00:22:32,870 --> 00:22:37,160
мы указали цель «dist», папку распространения

279
00:22:37,160 --> 00:22:40,140
и «htmlmin» для

280
00:22:40,140 --> 00:22:44,690
всех HTML-файлов, находящихся в этой папке распространения.

281
00:22:44,690 --> 00:22:49,560
Параметры, которые мы указываем для этого состояния, что, скажем,

282
00:22:49,560 --> 00:22:53,945
«CollapsedWhiteSpace: True» означает, что

283
00:22:53,945 --> 00:22:58,715
все пробелы в HTML-файлах будут свернуты,

284
00:22:58,715 --> 00:23:04,670
так что [неслышно] содержат только минимальный HTML-код.

285
00:23:04,670 --> 00:23:08,095
Модификация по существу удаляет

286
00:23:08,095 --> 00:23:12,390
все посторонние символы из файлов «htmlmin».

287
00:23:12,390 --> 00:23:16,570
Теперь мы также указываем, что словарь файлов,

288
00:23:16,570 --> 00:23:18,880
те файлы, которые нужно настроить.

289
00:23:18,880 --> 00:23:22,910
Это указывается как место назначения, двоеточие, источник.

290
00:23:22,910 --> 00:23:28,835
Таким образом, мы указываем «dist/index.html»: «dist/index.html»,

291
00:23:28,835 --> 00:23:32,335
что означает, что «index.html» в папке дистрибутива

292
00:23:32,335 --> 00:23:36,900
будет [неслышным], а затем поместим обратно в файл «index.html»,

293
00:23:36,900 --> 00:23:39,025
также в папку дистрибутива.

294
00:23:39,025 --> 00:23:45,290
Аналогичным образом, «contactus.html» указан там, а затем

295
00:23:45,290 --> 00:23:51,965
«aboutus.html» также указывается, как показано в этом списке файлов.

296
00:23:51,965 --> 00:23:56,760
Причина, по которой мы выполняем «htmlmin» после того, как закончим

297
00:23:56,760 --> 00:24:01,985
«usemin», заключается в том, что «usemin

298
00:24:01,985 --> 00:24:06,925
» заменит все скрипты основным файлом «.js», а также все, что

299
00:24:06,925 --> 00:24:12,535
код CSS объединяется и заменяется основным файлом «.css».

300
00:24:12,535 --> 00:24:15,490
Таким образом, «htmlmin» будет выполняться на

301
00:24:15,490 --> 00:24:20,840
результирующих HTML-файлах после того, как «usemin» завершит свою работу.

302
00:24:20,840 --> 00:24:24,605
Вот как это работает в Grunt.

303
00:24:24,605 --> 00:24:31,060
Таким образом, Grunt «htmlmin» должен быть применен после того, как «usemin» завершит свою работу.

304
00:24:31,060 --> 00:24:34,080
Поэтому, как только все это настроено,

305
00:24:34,080 --> 00:24:40,185
тогда один маленький шаг, который мне нужно сделать, это вернуться сюда,

306
00:24:40,185 --> 00:24:45,285
а затем, где мы указываем для «jit-grunt»,

307
00:24:45,285 --> 00:24:50,005
нам нужно указать, что этот «jit-grunt»,

308
00:24:50,005 --> 00:24:53,290
вы помните, что мы ввели что-то под названием

309
00:24:53,290 --> 00:24:57,500
«UsemInPrepare» [неслышно], поэтому вам нужно сообщите «jit-grunt»,

310
00:24:57,500 --> 00:25:01,900
заявив, что конфигурация «UseMinPrepare», которую мы ввели, будет

311
00:25:01,900 --> 00:25:06,430
обрабатываться этим плагином «grunt-usemin».

312
00:25:06,430 --> 00:25:08,575
Поэтому мне нужно явно указать,

313
00:25:08,575 --> 00:25:14,260
иначе «jit-grunt» будет искать плагин «UseMinPrepare» Grunt.

314
00:25:14,260 --> 00:25:16,480
Поэтому, чтобы указать на это,

315
00:25:16,480 --> 00:25:26,450
я бы сказал «UseminPrepare» и сказал «grunt-usemin»,

316
00:25:26,450 --> 00:25:30,950
по существу информируя «jit-grunt», говоря, что «UseminPrepare» будет

317
00:25:30,950 --> 00:25:35,960
обрабатываться плагином «grunt-usemin» там.

318
00:25:35,960 --> 00:25:41,490
Наконец, давайте переконфигурируем задачу «сборки» внизу.

319
00:25:41,490 --> 00:25:46,520
Перейдя к этой задаче «сборки» после «imagemin».

320
00:25:46,520 --> 00:25:49,530
Поэтому мы сделали «clean», «copy», «imagemin»,

321
00:25:49,530 --> 00:25:55,920
затем следующая задача, которую я должен выполнить, - «useMinPrepare», а затем после

322
00:25:55,920 --> 00:26:08,820
«useMinPrepare» выполнить «contact», затем я выполняю «cssmin»,

323
00:26:08,820 --> 00:26:15,305
затем я выполняю «uglify».

324
00:26:15,305 --> 00:26:20,285
Итак, вы видите, что мы должны сделать их в определенный набор шагов.

325
00:26:20,285 --> 00:26:22,395
После запуска «cssmin» и «uglify»

326
00:26:22,395 --> 00:26:26,110
будут созданы основные «.css» и основные «.js» файлы.

327
00:26:26,110 --> 00:26:28,610
Поэтому на данный момент я собираюсь запустить

328
00:26:28,610 --> 00:26:37,290
«filerev», а затем, наконец, запустить задачу «usemin».

329
00:26:37,290 --> 00:26:40,475
Так вы видите секреты: «чистый», «копия»,

330
00:26:40,475 --> 00:26:43,690
«имиджемин», «useMinPrepare», «concat», «cssmin», «uglify».

331
00:26:43,690 --> 00:26:47,210
На данный момент, файлы «.css» и «.js»,

332
00:26:47,210 --> 00:26:49,815
основные «.css» и основные «.js» готовы.

333
00:26:49,815 --> 00:26:54,190
Я могу сделать «filerev» на них, а затем, наконец, запустить «usemin».

334
00:26:54,190 --> 00:26:58,790
Но это, давайте сохраним изменения, а затем

335
00:26:58,790 --> 00:27:03,960
посмотрим, как задача «сборки» на самом деле готовит дистрибутив.

336
00:27:03,960 --> 00:27:06,855
[ неслышно] Перейдя к нашему терминалу,

337
00:27:06,855 --> 00:27:13,605
в подсказке я набираю «grunt build», а затем жду выполнения всех задач.

338
00:27:13,605 --> 00:27:16,870
Таким образом, вы увидите, что он будет проходить через весь набор задач,

339
00:27:16,870 --> 00:27:19,320
а затем, наконец, когда

340
00:27:19,320 --> 00:27:24,950
это будет сделано, он просто уточнит, что все задачи выполнены.

341
00:27:24,950 --> 00:27:29,345
Поэтому, если вы хотите вернуться и посмотреть последовательность задач, которые были выполнены,

342
00:27:29,345 --> 00:27:31,760
вы можете просто прокрутить назад и посмотреть, что он делает.

343
00:27:31,760 --> 00:27:33,885
Сначала он очищает,

344
00:27:33,885 --> 00:27:36,765
затем копирует HTML-файлы,

345
00:27:36,765 --> 00:27:38,400
затем копирует файлы шрифтов,

346
00:27:38,400 --> 00:27:40,455
затем выполняет задачу «imagemin»,

347
00:27:40,455 --> 00:27:42,550
затем он выполняет «UseminPrepare»,

348
00:27:42,550 --> 00:27:45,810
затем он выполняет «concat»,

349
00:27:45,830 --> 00:27:49,645
затем он выполняет «cssmin»,

350
00:27:49,645 --> 00:27:52,010
как распределение, так и сгенерированный,

351
00:27:52,010 --> 00:27:54,130
а затем выполняет» uglify»,

352
00:27:54,130 --> 00:28:01,060
затем задача «uglify», затем она запускает «filerev», а затем, наконец, задачу «usemin».

353
00:28:01,060 --> 00:28:03,920
И тогда наша папка дистрибутива должна быть готова.

354
00:28:03,920 --> 00:28:07,775
Перейдя в наш редактор,

355
00:28:07,775 --> 00:28:11,070
вы увидите, что папка дистрибутива подготовлена.

356
00:28:11,070 --> 00:28:19,415
Давайте конкретно рассмотрим основные «.css» и основные «.js» файлы.

357
00:28:19,415 --> 00:28:22,060
Обратите внимание на имена этих файлов.

358
00:28:22,060 --> 00:28:23,590
Обратите внимание, что после main

359
00:28:23,590 --> 00:28:25,080
есть точка, а затем

360
00:28:25,080 --> 00:28:30,500
есть 20-символьный хэш, который был добавлен «filerev» здесь.

361
00:28:30,500 --> 00:28:34,605
Так что произойдет, если я подготовлю новую папку распространения,

362
00:28:34,605 --> 00:28:41,130
каждый раз, когда я готовлю новую папку распространения, этот хэш изменяется,

363
00:28:41,130 --> 00:28:47,515
что означает, что каждый раз, когда я развертываю новую версию моего веб-сайта,

364
00:28:47,515 --> 00:28:54,130
если какие-либо браузеры ранее просматривали мой веб-сайт, то их записи кэша,

365
00:28:54,130 --> 00:28:57,210
где они возможно, кэшировал основной «.css», а основной «.js» стал

366
00:28:57,210 --> 00:29:02,195
недействительным, потому что у нас есть новая версия основного «.css» и основного «.js».

367
00:29:02,195 --> 00:29:06,805
Таким образом, браузер повторно загрузит эти вещи.

368
00:29:06,805 --> 00:29:10,455
Я не показывал «filerev» со сценариями NPM,

369
00:29:10,455 --> 00:29:15,940
но я просто добавил его здесь, чтобы показать вам, как это делается с Grunt.

370
00:29:15,940 --> 00:29:19,650
Таким образом, мы завершим это упражнение.

371
00:29:19,650 --> 00:29:26,035
Давайте быстро посмотрим на сайт в нашем браузере.

372
00:29:26,035 --> 00:29:27,795
Перейдя в ваш браузер,

373
00:29:27,795 --> 00:29:32,035
вы можете видеть, что я теперь загружаю в «dist/index.html».

374
00:29:32,035 --> 00:29:34,200
Так что это из папки дистрибутива,

375
00:29:34,200 --> 00:29:39,260
поэтому я проверяю, и это выглядит просто отлично.

376
00:29:39,260 --> 00:29:44,440
« aboutus.html» также выглядит отлично, как и раньше.

377
00:29:44,440 --> 00:29:51,060
И контактная страница также выглядит хорошо подготовленной к развертыванию.

378
00:29:51,060 --> 00:29:54,970
Таким образом, мы завершим это упражнение.

379
00:29:54,970 --> 00:29:57,365
После всех хрюкающих,

380
00:29:57,365 --> 00:30:00,560
я уверен, что тебе нужно задохнуться.

381
00:30:00,560 --> 00:30:09,400
Прежде чем сделать это, обязательно сделайте хороший комментарий с сообщением «Grunt Part 2».