1
00:00:00,000 --> 00:00:04,535
[МУЗЫКА]

2
00:00:04,535 --> 00:00:10,479
Теперь мы продолжим наше путешествие со сценариями NPM в следующем упражнении.

3
00:00:10,479 --> 00:00:15,182
Здесь мы собираемся узнать, как иметь возможность построить

4
00:00:15,182 --> 00:00:20,335
папку распространения, которая содержит все файлы для

5
00:00:20,335 --> 00:00:27,970
нашего проекта, которые мы можем просто развернуть на веб-сервере, на котором размещается наш веб-сайт.

6
00:00:27,970 --> 00:00:33,050
Поэтому, учитывая HTML, CSS и JavaScript файлы, которые

7
00:00:33,050 --> 00:00:39,010
мы уже подготовили в нашей папке проекта, мы собираемся, из них,

8
00:00:39,010 --> 00:00:44,895
обрабатывать их с помощью различных задач, о которых мы говорили.

9
00:00:44,895 --> 00:00:49,246
Это делает модификацию CSS,

10
00:00:49,246 --> 00:00:54,740
конкатенацию и углификацию JavaScript, минимизацию

11
00:00:54,740 --> 00:00:59,230
и минимизацию HTML,

12
00:00:59,230 --> 00:01:04,895
а затем генерирует папку распространения со всеми файлами.

13
00:01:04,895 --> 00:01:09,520
Но по сути формирует набор файлов, которые могут быть

14
00:01:09,520 --> 00:01:13,200
развернуты на нашем веб-сервере, на котором размещается наш веб-сайт.

15
00:01:15,165 --> 00:01:21,005
Чтобы помочь вам понять, что мы будем делать в этом конкретном упражнении,

16
00:01:22,085 --> 00:01:29,102
как мы отмечаем с нашей страницы index.html, у нас есть набор

17
00:01:29,102 --> 00:01:34,352
CSS файлов, которые вы включили здесь, используя этот тег ссылки здесь.

18
00:01:34,352 --> 00:01:38,742
Аналогично, у вас есть набор скриптов, которые вы включили

19
00:01:38,742 --> 00:01:42,847
в нижней части этой страницы с помощью тега скрипта.

20
00:01:42,847 --> 00:01:46,152
Мы включили набор кода JavaScript.

21
00:01:46,152 --> 00:01:51,150
Теперь, что мы собираемся сделать в этом упражнении, это объединить все эти

22
00:01:51,150 --> 00:01:56,760
файлы в один файл JavaScript, который будет доставлен

23
00:01:56,760 --> 00:02:03,710
с нашего веб-сервера в браузер, который пытается просмотреть наш веб-сайт.

24
00:02:03,710 --> 00:02:08,480
Таким образом, мы минимизируем количество загрузок, которые браузер должен сделать для

25
00:02:08,480 --> 00:02:10,930
того, чтобы сделать наш сайт.

26
00:02:10,930 --> 00:02:16,960
Аналогичным образом, мы собираемся объединить весь код CSS в один файл CSS,

27
00:02:16,960 --> 00:02:18,325
так что он может быть доставлен.

28
00:02:18,325 --> 00:02:24,353
Таким образом, объединенный файл CSS будет содержать весь код для

29
00:02:24,353 --> 00:02:31,751
Bootstrap плюс Bootstrap social, а также шрифт Awesome, а

30
00:02:31,751 --> 00:02:36,697
также код CSS, который мы сами написали.

31
00:02:36,697 --> 00:02:40,351
Аналогично, будет один файл JavaScript, который

32
00:02:40,351 --> 00:02:45,297
будет содержать трос jQuery, Bootstrap и код JavaScript, который мы,

33
00:02:45,297 --> 00:02:49,790
сами написали, объединены в один файл.

34
00:02:49,790 --> 00:02:53,610
Теперь, вот как вы можете сделать развертывание ваших веб-страниц.

35
00:02:53,610 --> 00:02:58,190
И вместо того, чтобы иметь несколько таких файлов, один из способов

36
00:02:59,560 --> 00:03:03,750
развертывания делается, чтобы объединить их в один файл, чтобы одна загрузка

37
00:03:03,750 --> 00:03:08,840
вы получили весь код JavaScript, необходимый для рендеринга вашей веб-страницы.

38
00:03:08,840 --> 00:03:11,810
Одна загрузка вы получаете весь код CSS, необходимый для

39
00:03:11,810 --> 00:03:13,200
рендеринга вашей веб-страницы.

40
00:03:13,200 --> 00:03:16,590
И тогда, конечно же, сам HTML-файл будет загружен.

41
00:03:18,530 --> 00:03:23,390
Чтобы эти задачи были завершены, нам нужно использовать

42
00:03:23,390 --> 00:03:29,070
определенный набор модулей NPM для этого.

43
00:03:29,070 --> 00:03:33,810
Теперь, что мы в конечном итоге сделаем, это создать папку

44
00:03:33,810 --> 00:03:38,760
в файле наших проектов, а затем мы называем эту папку как dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Я просто случайно назову это как папку dist.

46
00:03:42,580 --> 00:03:47,100
В моем случае, то, что я имею в виду под папкой dist, - это папка распространения.

47
00:03:47,100 --> 00:03:51,270
В конце набора шагов, которые мы собираемся сделать, эта папка будет содержать все

48
00:03:51,270 --> 00:03:59,510
файлы, которые могут быть просто скопированы на веб-сервер, на котором размещен наш веб-сайт.

49
00:03:59,510 --> 00:04:03,930
Чтобы начать работу, мы собираемся создать набор

50
00:04:05,140 --> 00:04:10,960
сценариев здесь, которые помогут нам автоматизировать этот процесс.

51
00:04:10,960 --> 00:04:13,930
Итак, во-первых, мы могли бы

52
00:04:13,930 --> 00:04:18,850
подготовить папку распространения один раз, тогда, возможно, мы можем сделать некоторые правки

53
00:04:18,850 --> 00:04:23,310
в наши исходные файлы, тогда нам может потребоваться перекомпилировать нашу папку распространения.

54
00:04:24,420 --> 00:04:29,370
Первый шаг, мы бы настроили скрипт для очистки этой папки дистрибутива

55
00:04:29,370 --> 00:04:33,050
по существу означает, удалить папку дистрибутива.

56
00:04:33,050 --> 00:04:37,950
Поэтому, чтобы сделать это, я собираюсь воспользоваться помощью модуля NPM под названием rimfraf.

57
00:04:37,950 --> 00:04:47,760
Поэтому я установлю npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Этот модуль помогает нам полностью очистить папку.

59
00:04:51,920 --> 00:04:56,370
Поэтому, как только я установлю это, я настрою скрипт

60
00:04:56,370 --> 00:05:01,550
в моем файле package.json, чтобы очистить все файлы.

61
00:05:01,550 --> 00:05:05,360
Переходя к файлу package.json, я собираюсь добавить, поэтому

62
00:05:05,360 --> 00:05:11,380
всегда помните, что кома очень, очень важна в этих сценариях.

63
00:05:11,380 --> 00:05:15,200
Иногда вы сталкиваетесь с проблемами только потому, что вы забыли запятую.

64
00:05:15,200 --> 00:05:18,230
Поэтому убедитесь, что вы положили запятые там, где это необходимо.

65
00:05:18,230 --> 00:05:21,800
Следующий описал, который я собираюсь добавить, является чистым,

66
00:05:23,410 --> 00:05:29,000
очевидно, как следует из названия, это собирается очистить мою папку.

67
00:05:29,000 --> 00:05:32,510
Так что я скажу римраф дист.

68
00:05:32,510 --> 00:05:35,610
Это означает, что это, при выполнении,

69
00:05:35,610 --> 00:05:39,860
очистит папку дистрибутива.

70
00:05:39,860 --> 00:05:42,215
Поэтому я добавлю это в, а

71
00:05:42,215 --> 00:05:46,780
затем я поставлю эту запятую, потому что я собираюсь добавить больше сценариев ниже этого.

72
00:05:46,780 --> 00:05:51,814
Поэтому позвольте мне сохранить изменения, следующий шаг, который я собираюсь сделать, -

73
00:05:51,814 --> 00:05:57,048
установить модуль npm под названием copy файлы, которые используются для копирования

74
00:05:57,048 --> 00:06:03,206
некоторых файлов шрифтов из моей папки модулей узла в мою папку распространения.

75
00:06:03,206 --> 00:06:07,430
Таким образом, когда он развертывается, файлы шрифтов также развертываются.

76
00:06:07,430 --> 00:06:12,840
Перейдя к терминалу, следующий пакет, который я собираюсь установить, - это

77
00:06:12,840 --> 00:06:19,860
npm -g, напомним, что это означает, что он должен быть установлен глобально.

78
00:06:19,860 --> 00:06:23,900
Поскольку я делаю это на Mac,

79
00:06:23,900 --> 00:06:30,670
я должен сказать sudo npm -g, если вы делаете это в Windows, вам не нужен sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g установить копии файлов.

81
00:06:42,837 --> 00:06:47,493
И затем, как только это будет установлено, этот модуль NPM поможет мне скопировать

82
00:06:47,493 --> 00:06:50,360
файлы из одной папки в другую папку.

83
00:06:51,390 --> 00:06:54,650
Теперь позвольте мне представить еще один сценарий NPM здесь.

84
00:06:56,110 --> 00:06:59,534
Перейдя к моему файлу package.json,

85
00:06:59,534 --> 00:07:05,046
я собираюсь создать новый скрип здесь имя copyfonts.

86
00:07:05,046 --> 00:07:09,666
Этот скрипт позволит мне скопировать все файлы шрифтов из моей

87
00:07:09,666 --> 00:07:13,650
папки Font Awesome в папку дистрибутива.

88
00:07:13,650 --> 00:07:17,510
Таким образом, когда мой сайт отображается,

89
00:07:17,510 --> 00:07:21,500
все эти файлы шрифтов также могут быть отправлены, так что

90
00:07:21,500 --> 00:07:26,110
мои веб-страницы отображаются правильно с шрифтами Font Awesome на месте.

91
00:07:26,110 --> 00:07:30,949
Чтобы сделать это, скажу, скопируйте файлы -f,

92
00:07:30,949 --> 00:07:36,530
-f означает, что он просто копирует файлы без полной иерархии и

93
00:07:36,530 --> 00:07:40,550
просто копирует файлы из одного места в другое.

94
00:07:40,550 --> 00:07:43,594
Так что я скажу, скопируйте файлы -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/font/star

96
00:08:03,367 --> 00:08:09,416
И dist/fonts,

97
00:08:12,386 --> 00:08:14,970
а затем сохраните изменения.

98
00:08:14,970 --> 00:08:20,620
Позвольте мне теперь проиллюстрировать, как эти два скрипта npm работают вместе.

99
00:08:20,620 --> 00:08:25,605
Перейдя к моему командному окну, я

100
00:08:25,605 --> 00:08:30,300
напечатаю npm copyfonts.

101
00:08:30,300 --> 00:08:34,650
Когда это выполняется, он собирается создать папку с

102
00:08:34,650 --> 00:08:38,640
именем dist в иерархии папок проекта.

103
00:08:38,640 --> 00:08:39,880
А затем внутри dist

104
00:08:39,880 --> 00:08:44,730
будет вложенная папка с именем fonts, которая будет содержать файлы шрифтов.

105
00:08:44,730 --> 00:08:46,310
Таким образом, запустив это,

106
00:08:46,310 --> 00:08:50,480
вы сразу заметите, что папка дистрибутива создана здесь.

107
00:08:50,480 --> 00:08:52,190
И внутри папки дистрибутива

108
00:08:52,190 --> 00:08:55,000
вы можете видеть, что есть вложенная папка с именем fonts.

109
00:08:55,000 --> 00:08:58,760
И внутри, все файлы fontawesome были скопированы.

110
00:09:00,070 --> 00:09:03,700
Так работает скрипт copyfonts.

111
00:09:04,790 --> 00:09:08,720
Теперь я покажу вам, как работает чистый скрипт.

112
00:09:08,720 --> 00:09:15,275
Поэтому, если я введу npm, запустить clean, это удалит эту папку распространения.

113
00:09:15,275 --> 00:09:17,805
Поэтому, когда я запускаю это, вы заметите, что

114
00:09:17,805 --> 00:09:22,435
папка дистрибутива удаляется из иерархии папок моих проектов.

115
00:09:22,435 --> 00:09:25,055
Так вот, как работает чистый.

116
00:09:25,055 --> 00:09:28,075
Теперь, когда у нас есть эти два скрипта настроены,

117
00:09:28,075 --> 00:09:32,735
нам теперь нужно иметь возможность создавать оставшиеся файлы дистрибутива.

118
00:09:33,745 --> 00:09:39,034
На следующем шаге мы собираемся установить модуль узла под названием imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
который является интерфейсом командной строки для модуля imagemin.

120
00:09:43,182 --> 00:09:51,032
Модуль imaginemin возьмет секту файлов изображений, а затем сжимает их вниз.

121
00:09:51,032 --> 00:09:57,550
Таким образом, размер этих файлов свернут до минимума, насколько это возможно,

122
00:09:57,550 --> 00:10:01,650
но все же будет отображаться должным образом, когда наш сайт отображается.

123
00:10:01,650 --> 00:10:05,060
Таким образом, мы сократим количество данных, которые

124
00:10:05,060 --> 00:10:09,870
должны быть загружены браузером, когда он должен отобразить нашу веб-страницу.

125
00:10:09,870 --> 00:10:16,250
Поэтому, если вы включаете изображения в свою веб-страницу, то задача imagemin - это

126
00:10:16,250 --> 00:10:21,950
то, что вы должны узнать, чтобы tor уменьшить размер ваших файлов изображений.

127
00:10:21,950 --> 00:10:29,740
Поэтому для этого я собираюсь установить этот модуль узла imagemin как глобальный модуль.

128
00:10:29,740 --> 00:10:36,145
Поэтому я набираю sudo, поскольку я использую Mac,

129
00:10:36,145 --> 00:10:41,270
npm -g install imagemin-cli,

130
00:10:41,270 --> 00:10:46,770
а затем устанавливаю этот модуль узла.

131
00:10:50,730 --> 00:10:56,670
Иногда на Mac некоторые плагины imagemin не устанавливаются правильно.

132
00:10:56,670 --> 00:11:02,979
Поэтому я даю эти дополнительные флаги команде,

133
00:11:02,979 --> 00:11:09,310
они говорят: —unsafe-perm = true и —allow-root.

134
00:11:09,310 --> 00:11:12,497
Как только эта установка будет завершена,

135
00:11:12,497 --> 00:11:18,183
позвольте мне настроить сценарий, чтобы сделать это увеличение моих изображений.

136
00:11:18,183 --> 00:11:23,650
Собираясь снова package.json, я собираюсь настроить следующий сценарий здесь.

137
00:11:23,650 --> 00:11:32,350
Поэтому я бы сказал, что imagemin - это имя сценария, которое я собираюсь сделать,

138
00:11:32,350 --> 00:11:36,610
и я бы сказал imagemin.

139
00:11:36,610 --> 00:11:43,930
И тогда, поскольку все мои изображения находятся в папке img, я бы сказал img/*,

140
00:11:43,930 --> 00:11:49,913
а затем многие файлы будут скопированы в dist image.

141
00:11:49,913 --> 00:11:54,997
Таким образом, исходные файлы изображений из папки изображений, которая у меня есть, будут

142
00:11:54,997 --> 00:12:00,300
скопированы в папку распространения и в подпапку изображения там.

143
00:12:00,300 --> 00:12:03,616
Таким образом, это завершает мой образ.

144
00:12:03,616 --> 00:12:07,460
Позвольте мне продолжить с оставшейся настройкой, и

145
00:12:07,460 --> 00:12:13,070
тогда мы увидим, как мы будем использовать скрипты, которые мы уже создали там.

146
00:12:14,260 --> 00:12:19,270
Теперь, когда у меня есть тестовая папка, которую я мог бы создать,

147
00:12:19,270 --> 00:12:26,450
я не хочу проверять папку dist в моем репозитории Git.

148
00:12:26,450 --> 00:12:31,640
Поэтому в мой файл.gitignore я также добавлю в папку dist.

149
00:12:31,640 --> 00:12:37,060
Таким образом, папка dist будет игнорироваться, когда я делаю свою проверку в репозитории Git.

150
00:12:37,060 --> 00:12:43,342
Итак, давайте сохраним изменения, возвращаясь к package.json.

151
00:12:43,342 --> 00:12:49,710
Теперь, что я собираюсь сделать дальше, это установить три разных

152
00:12:50,870 --> 00:12:56,080
модуля узла, которые позволяют мне

153
00:12:56,080 --> 00:13:02,550
вносить изменения в мой файл index.html и остальные HTML-файлы там.

154
00:13:02,550 --> 00:13:09,280
В командной строке введите npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Я собираюсь установить модуль под названием usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Этот usemin-cli - это тот, который позволяет мне выполнять преобразование из моего

157
00:13:21,166 --> 00:13:22,230
HTML-файла.

158
00:13:22,230 --> 00:13:26,870
А затем объединить и объединить все

159
00:13:26,870 --> 00:13:30,650
файлы CSS в один файл CSS, а затем поместить его в папку распространения.

160
00:13:30,650 --> 00:13:36,700
Аналогично, все JS-файлы будут объединены и помещены в одну папку.

161
00:13:36,700 --> 00:13:38,720
Таким образом, этот usemin-cli полезен.

162
00:13:38,720 --> 00:13:44,005
Но этот usemin-cli принимает помощь

163
00:13:44,005 --> 00:13:51,051
трех других модулей узлов, называемых cssmin,

164
00:13:51,051 --> 00:13:56,350
затем uglifyjs и htmlmin.

165
00:13:56,350 --> 00:14:01,600
Поэтому мне нужно установить эти три модуля узлов в дополнение к usemin-cli.

166
00:14:01,600 --> 00:14:04,610
И я собираюсь установить это локально в свой проект,

167
00:14:04,610 --> 00:14:08,330
поэтому npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Таким образом, они будут запомнены в моем файле package.json.

169
00:14:13,910 --> 00:14:15,890
Итак, давайте продолжим и завершим установку.

170
00:14:17,230 --> 00:14:21,270
Теперь, когда я установил usemin и

171
00:14:21,270 --> 00:14:26,440
связанные модули узлов, мне нужно сделать некоторое преобразование

172
00:14:26,440 --> 00:14:30,695
в мой файл index.html и остальные HTML-файлы.

173
00:14:30,695 --> 00:14:35,750
Таким образом, usemin node_module распознает, что эта группа представляет

174
00:14:35,750 --> 00:14:42,330
собой кучу файлов CSS, которые должны быть сжаты, вычислены и проверены.

175
00:14:42,330 --> 00:14:47,730
Аналогично, это группа файлов JavaScript, которые должны быть углифицированы

176
00:14:47,730 --> 00:14:51,130
, объединены и объединены вместе.

177
00:14:51,130 --> 00:14:54,480
Поэтому, чтобы помочь работе пакета

178
00:14:54,480 --> 00:15:00,430
usemin, мне нужно добавить немного кода в мой файл index.html.

179
00:15:00,430 --> 00:15:07,942
Так что прямо перед первой ссылкой,

180
00:15:07,942 --> 00:15:14,747
я собираюсь добавить здесь отметку,

181
00:15:14,747 --> 00:15:21,100
которая говорит! — сборка:css.

182
00:15:21,100 --> 00:15:25,621
Теперь, это! —, как вы узнаете,

183
00:15:25,621 --> 00:15:29,640
является комментарием с точки зрения html.

184
00:15:29,640 --> 00:15:33,405
Поэтому внутри этого комментария я собираюсь включить, что эта конкретная строка

185
00:15:33,405 --> 00:15:38,480
будет использоваться меню использования, чтобы распознать блок

186
00:15:38,480 --> 00:15:43,370
кода, который указывает все файлы CSS, которые нужно передать.

187
00:15:43,370 --> 00:15:49,743
Поэтому я говорю build.css, а затем я

188
00:15:49,743 --> 00:15:54,770
укажу имя файла как css/main.css.

189
00:15:54,770 --> 00:15:57,160
Это синтаксис для указания.

190
00:15:57,160 --> 00:16:04,080
Это означает, что эти блоки файлов CSS будут объединены вместе,

191
00:16:04,080 --> 00:16:10,510
а затем конкатенированы, минимизированы, а затем помещены в этот файл под названием main.css.

192
00:16:10,510 --> 00:16:15,723
И тогда этот блок будет идентифицирован с другой стороны, сказав: «

193
00:16:21,873 --> 00:16:27,090
Дефис», хорошо, извините.

194
00:16:27,090 --> 00:16:34,210
Я забыл включить двойное тире в конце.

195
00:16:34,210 --> 00:16:37,050
Вот почему это не поворачивало цвета.

196
00:16:37,050 --> 00:16:41,780
Поэтому иногда вы счастливы, что ваш

197
00:16:41,780 --> 00:16:46,540
редактор указывает на потенциальные ошибки, которые вы, возможно, совершаете.

198
00:16:46,540 --> 00:16:51,779
Так что прямо там я бы сказал endbuild, а

199
00:16:51,779 --> 00:16:56,206
затем — правая скобка там.

200
00:16:56,206 --> 00:17:00,904
Теперь, что бы ни было между этой сборкой и

201
00:17:00,904 --> 00:17:06,708
endbuild, эта группа будет рассматриваться как единица для

202
00:17:06,708 --> 00:17:12,252
объединения нашим модулем usemin npm там.

203
00:17:12,252 --> 00:17:14,890
Смотрите синтаксис, используемый в модуле usemin.

204
00:17:16,230 --> 00:17:22,020
Мне нужно сделать то же самое преобразование в contactus.html и aboutus.html.

205
00:17:22,020 --> 00:17:26,759
Так что я собираюсь скопировать этот

206
00:17:26,759 --> 00:17:31,306
здесь тот ленивый, какой я есть.

207
00:17:31,306 --> 00:17:35,149
Я просто скопирую и

208
00:17:35,149 --> 00:17:39,866
вставьте в contactus.html, а

209
00:17:39,866 --> 00:17:44,770
затем также aboutus.html там.

210
00:17:44,770 --> 00:17:50,263
Аналогичным образом, возвращаясь к index.html,

211
00:17:50,263 --> 00:17:56,477
я скопирую этот inbuild, а затем также скопирую его в

212
00:17:56,477 --> 00:18:01,840
данные contactus.html и aboutus.html.

213
00:18:03,530 --> 00:18:08,990
Ладно, давайте сохраним изменения во всех файлах.

214
00:18:08,990 --> 00:18:12,190
Затем, возвращаясь к index.html.

215
00:18:12,190 --> 00:18:16,670
Я собираюсь повторить то же самое внизу для моих

216
00:18:16,670 --> 00:18:22,220
сценариев JavaScript, которые я включил туда.

217
00:18:22,220 --> 00:18:26,730
Итак, перейдя на дно здесь,

218
00:18:26,730 --> 00:18:30,026
что мне нужно сделать здесь,

219
00:18:30,026 --> 00:18:34,883
это указать <! — сборка js,

220
00:18:34,883 --> 00:18:39,225
и я скажу js/main.js.

221
00:18:41,216 --> 00:18:43,130
Двойной дефис, косая черта.

222
00:18:43,130 --> 00:18:47,781
Итак, это начало блока, а затем окончание указывается,

223
00:18:51,540 --> 00:18:55,034
Build, хорошо?

224
00:18:55,034 --> 00:19:00,782
Поэтому с этими изменениями теперь мой файл index.html готов,

225
00:19:00,782 --> 00:19:07,899
и я должен сделать то же самое преобразование в contactus.html внизу.

226
00:19:14,090 --> 00:19:18,715
И aboutus.html также внизу.

227
00:19:25,340 --> 00:19:29,505
Аналогично, это enbuild скопировано в. В

228
00:19:32,892 --> 00:19:38,649
contactus.html и aboutus.html, а затем сохраните все файлы.

229
00:19:40,130 --> 00:19:44,550
И это готовит наши HTML-файлы для

230
00:19:44,550 --> 00:19:48,940
преобразования, чтобы подготовить папку распространения.

231
00:19:48,940 --> 00:19:53,540
Эти файлы останутся такими, но затем преобразованные файлы будут помещены в

232
00:19:53,540 --> 00:19:58,380
папку распространения, созданную из этих файлов.

233
00:19:58,380 --> 00:20:02,948
Теперь, как только мы закончим это, давайте настроим несколько сценариев.

234
00:20:02,948 --> 00:20:07,875
Отправляясь в package.json, я настрою свой следующий скрипт под названием usemin.

235
00:20:11,930 --> 00:20:15,890
И тогда это говорит usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, это синтаксис для

237
00:20:24,671 --> 00:20:29,366
указания -d dist, что означает, что место назначения для

238
00:20:29,366 --> 00:20:32,507
этой папки дистрибутива dist.

239
00:20:32,507 --> 00:20:39,110
И тогда я бы сказал htmlmin, это также минимизирует HTML-файл.

240
00:20:39,110 --> 00:20:43,300
Таким образом, он удалит все посторонние пробелы и комментарии из HTML-файла.

241
00:20:43,300 --> 00:20:45,110
Но они сжимают его так

242
00:20:45,110 --> 00:20:48,350
, чтобы он содержал минимальное количество символов там.

243
00:20:48,350 --> 00:20:55,165
Мы посмотрим на результат после завершения и сделаем трансформацию там.

244
00:20:55,165 --> 00:21:00,528
Так что и тогда, не только это,

245
00:21:00,528 --> 00:21:05,509
а затем htmlmin, а затем сказать

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html и

247
00:21:10,684 --> 00:21:15,664
&&, это означает, что

248
00:21:15,664 --> 00:21:19,970
после этого будет больше.

249
00:21:19,970 --> 00:21:25,730
Тогда я скажу usemin,

250
00:21:25,730 --> 00:21:31,171
затем aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d dist —htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
Так что это второй для преобразования файла aboutus.html.

254
00:21:50,078 --> 00:21:55,135
И тогда &&, это длинный скрипт,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
нам нужно преобразовать все файлы.

257
00:22:02,890 --> 00:22:08,150
Поэтому мне нужно явно указать каждый из них.

258
00:22:08,150 --> 00:22:11,910
usemin не принимает Wild-карты,

259
00:22:11,910 --> 00:22:16,080
поэтому я должен указать холдинг, как [неразборчиво].

260
00:22:16,080 --> 00:22:21,365
И поэтому usemin index.html

261
00:22:21,365 --> 00:22:27,426
-d dist —htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
И затем я положил запятую, потому что я собираюсь ввести следующий скрипт,

264
00:22:40,656 --> 00:22:45,940
который называется build.

265
00:22:45,940 --> 00:22:50,490
Таким образом, этот скрипт сборки создаст мою папку распространения.

266
00:22:50,490 --> 00:22:54,159
Поэтому, чтобы создать мою папку распространения,

267
00:22:54,159 --> 00:22:59,328
первое, что я собираюсь сделать, это npm запустить чистый.

268
00:22:59,328 --> 00:23:07,090
А затем npm запускает копирайты.

269
00:23:07,090 --> 00:23:12,347
Вы уже видели эти два в действии раньше,

270
00:23:12,347 --> 00:23:18,950
тогда я скажу, что npm run imagemin для создания свернутых изображений,

271
00:23:18,950 --> 00:23:23,220
а затем я бы сказал, что npm run usemin.

272
00:23:23,220 --> 00:23:29,257
И этот конкретный скрипт создаст мою папку дистрибутива,

273
00:23:29,257 --> 00:23:36,171
содержимое которой затем может быть скопировано на мой веб-сервер, чтобы решить мой шаг.

274
00:23:36,171 --> 00:23:39,238
Сохраните изменения.

275
00:23:39,238 --> 00:23:45,837
Давайте посмотрим, как мы создаем сайт.

276
00:23:45,837 --> 00:23:49,431
На этом этапе, чтобы создать наш веб-сайт и

277
00:23:49,431 --> 00:23:55,950
командную строку, просто введите npm run build, а затем просто выполнить.

278
00:23:55,950 --> 00:24:00,430
Этот скрипт, который, в свою очередь, выполнит набор

279
00:24:00,430 --> 00:24:05,440
из любого скрипта, который, в свою очередь, завершит весь набор

280
00:24:05,440 --> 00:24:10,870
задач, которые должны быть выполнены, чтобы подготовить мою папку распространения.

281
00:24:10,870 --> 00:24:13,690
Итак, давайте продолжим и запустим эту вещь, а

282
00:24:13,690 --> 00:24:18,520
затем это будет проходить через все различные скрипты там.

283
00:24:18,520 --> 00:24:23,320
Это займет несколько минут, и когда он будет завершен,

284
00:24:23,320 --> 00:24:29,838
папка распространения будет готова к развертыванию на веб-сервере.

285
00:24:29,838 --> 00:24:34,950
Перейдя в наш редактор,

286
00:24:34,950 --> 00:24:38,750
теперь вы увидите, что папка дистрибутива уже готова.

287
00:24:38,750 --> 00:24:44,020
Внутри папки дистрибутива вы увидите три файла индекса,

288
00:24:44,020 --> 00:24:48,580
а в папке CSS вы увидите один файл с именем m ain.css,

289
00:24:48,580 --> 00:24:55,050
который содержит все Bootstraps CSS, Bootstraps CSS

290
00:24:55,050 --> 00:24:57,660
и код CSS, который вы создали.

291
00:24:58,690 --> 00:25:01,863
И папка JS будет содержать main.js,

292
00:25:01,863 --> 00:25:05,287
который содержит Bootstrap, jQuery и

293
00:25:05,287 --> 00:25:10,905
всю кучу кода JavaScript, объединенных вместе в один файл.

294
00:25:10,905 --> 00:25:15,638
Изображение будет содержать оптимизированные изображения, а шрифты, очевидно,

295
00:25:15,638 --> 00:25:18,730
вы видели ранее, содержат файлы шрифтов.

296
00:25:18,730 --> 00:25:24,030
Теперь давайте посмотрим на index.html, который был создан здесь.

297
00:25:24,030 --> 00:25:27,290
Поэтому, когда вы посмотрите на index.html, который был создан здесь,

298
00:25:27,290 --> 00:25:31,120
вы заметите, что все это буквально нечитаемо,

299
00:25:32,530 --> 00:25:37,850
потому что, когда вы сделали HTML min, он лишил все посторонние

300
00:25:39,500 --> 00:25:42,800
комментарии, он лишил все пробелы, а

301
00:25:42,800 --> 00:25:48,100
затем создал весь этот запущенный набор символов.

302
00:25:49,540 --> 00:25:52,800
Для компьютера это не имеет никакого значения, потому что он будет отображать эту

303
00:25:52,800 --> 00:25:55,190
веб-страницу также.

304
00:25:55,190 --> 00:25:58,727
Для нас с тобой это имеет значение, потому что мы не можем прочитать это легко.

305
00:26:01,038 --> 00:26:05,620
Таким образом, это то, что минимизация вызывает ваш HTML-файл.

306
00:26:05,620 --> 00:26:08,180
Давайте посмотрим на main.css.

307
00:26:08,180 --> 00:26:12,200
Когда вы смотрите на main.css, вы видите, что все это хрустает

308
00:26:12,200 --> 00:26:15,090
в один блок, когда вы идете вниз.

309
00:26:16,300 --> 00:26:20,808
Если вы достаточно храбры, спуститесь вниз, а затем вы увидите,

310
00:26:24,793 --> 00:26:29,683
Вы увидите часы специально написанные

311
00:26:29,683 --> 00:26:34,870
классы CSS прямо внизу здесь.

312
00:26:37,220 --> 00:26:42,801
Прямо там, ты узнаешь пуговицу карусели и другие вещи

313
00:26:42,801 --> 00:26:49,693
, темные и другие вещи там, так что все обжато.

314
00:26:49,693 --> 00:26:52,896
Вот что минимизация, и стоит.

315
00:26:52,896 --> 00:26:55,530
Main.js, то же самое.

316
00:26:55,530 --> 00:26:56,545
Нечитаемый код там.

317
00:26:56,545 --> 00:26:59,440
Их компьютер, без разницы.

318
00:26:59,440 --> 00:27:03,580
Таким образом, наша папка дистрибутива теперь завершена.

319
00:27:03,580 --> 00:27:06,250
Давайте проверим нашу папку дистрибутива.

320
00:27:06,250 --> 00:27:08,669
К счастью, наш световой сервер уже работает.

321
00:27:08,669 --> 00:27:12,014
Итак, что я собираюсь сделать, это перейти в браузер, а

322
00:27:12,014 --> 00:27:16,867
затем проверить готовый к индексу файл CLM в этой папке дистрибутива, чтобы

323
00:27:16,867 --> 00:27:20,507
узнать, правильно ли он отображается или нет.

324
00:27:20,507 --> 00:27:25,870
Перейдя в браузер, в моей адресной строке я напечатаю,

325
00:27:25,870 --> 00:27:31,440
dist index.html, и

326
00:27:31,440 --> 00:27:36,920
обратите внимание, что этот конкретный файл является файлом дистрибутива,

327
00:27:36,920 --> 00:27:40,680
который был создан, и он содержит точно то же самое и

328
00:27:40,680 --> 00:27:47,370
визуализирует точно так же, как наша оригинальная веб-страница, которую мы создали.

329
00:27:47,370 --> 00:27:52,230
О, аналогичным образом, обратите внимание, что этот aboutus.html из

330
00:27:52,230 --> 00:27:57,490
папки дистрибутива, и это отображается точно так же, как

331
00:27:57,490 --> 00:28:01,350
и прежде, а также файл contactus.html.

332
00:28:01,350 --> 00:28:03,360
Все работает отлично.

333
00:28:03,360 --> 00:28:08,970
Итак, теперь все, что вам осталось сделать, чтобы развернуть вашу веб-страницу

334
00:28:08,970 --> 00:28:15,530
или ваш сайт, это просто скопировать содержимое из папки dist,

335
00:28:15,530 --> 00:28:19,460
а затем загрузить его на ваш веб-сервер,

336
00:28:19,460 --> 00:28:24,830
а затем ваш веб-сервер работает и работает, обслуживая ваш веб-сайт.

337
00:28:26,080 --> 00:28:28,740
С этим мы завершаем это упражнение.

338
00:28:28,740 --> 00:28:33,620
В этом упражнении мы увидели, как мы можем использовать

339
00:28:33,620 --> 00:28:38,636
скрипты NBM для создания и развертывания нашего веб-сайта.

340
00:28:38,636 --> 00:28:40,610
Это может быть подходящее время для

341
00:28:40,610 --> 00:28:45,223
вас, чтобы сделать комментарий с сообщением NPM Сценарии, часть 2.

342
00:28:45,223 --> 00:28:50,815
[ МУЗЫКА]