1
00:00:03,510 --> 00:00:07,990
Теперь, когда у нас есть понимание

2
00:00:07,990 --> 00:00:12,965
различных шагов, связанных с созданием и развертыванием нашего сайта,

3
00:00:12,965 --> 00:00:18,690
а также краткое введение в сценарии NPM в предыдущей лекции,

4
00:00:18,690 --> 00:00:22,830
давайте глубоко погрузимся в разработку

5
00:00:22,830 --> 00:00:28,755
сценариев NPM для автоматизации многих задач, о которых мы говорили ранее.

6
00:00:28,755 --> 00:00:31,350
Как вы видели в предыдущей лекции, у

7
00:00:31,350 --> 00:00:38,760
нас уже есть несколько сценариев NPM, которые мы включили в наш файл package.json,

8
00:00:38,760 --> 00:00:41,735
один для запуска облегченного сервера и второй

9
00:00:41,735 --> 00:00:46,240
для преобразования кода SCSS в CSS.

10
00:00:46,240 --> 00:00:49,755
В этом упражнении и следующем

11
00:00:49,755 --> 00:00:53,055
мы рассмотрим сценарии NPM более подробно.

12
00:00:53,055 --> 00:01:00,810
Чтобы начать работу, давайте сначала сделаем некоторые уборку в файле index.html.

13
00:01:00,810 --> 00:01:03,095
Переходя к файлу index.html,

14
00:01:03,095 --> 00:01:09,325
мы видим, что у нас есть этот код JavaScript в нижней части этого файла index.html.

15
00:01:09,325 --> 00:01:12,930
Я предпочел бы сохранить этот код JavaScript в

16
00:01:12,930 --> 00:01:19,385
отдельном файле, который содержит все наши скрипты,

17
00:01:19,385 --> 00:01:23,015
а затем включить этот файл в мой index.html.

18
00:01:23,015 --> 00:01:31,155
Для этого давайте создадим здесь другую папку с именем js.

19
00:01:31,155 --> 00:01:34,210
И в этой папке js

20
00:01:34,210 --> 00:01:41,520
я собираюсь создать новый файл с именем scripts.js.

21
00:01:42,120 --> 00:01:49,060
И перейдя к index.html,

22
00:01:49,060 --> 00:01:54,890
я собираюсь просто вырезать этот код JavaScript отсюда, а

23
00:01:54,890 --> 00:02:01,120
затем вставить его в файл scripts.js,

24
00:02:01,120 --> 00:02:05,305
а затем сохранить изменения в файле scripts.js.

25
00:02:05,305 --> 00:02:10,915
Теперь, когда мы переместили весь наш код JavaScript в свой собственный файл,

26
00:02:10,915 --> 00:02:20,430
я собираюсь теперь включить этот файл JavaScript в мой index.html прямо там.

27
00:02:20,430 --> 00:02:24,540
Я бы сказал <script src =

28
00:02:24,540 --> 00:02:31,040
«js/scripts.js» Таким образом,

29
00:02:31,040 --> 00:02:35,005
весь мой код JavaScript теперь включен обратно в мой файл index.html.

30
00:02:35,005 --> 00:02:40,390
Таким образом, мой файл index.html содержит весь html-код,

31
00:02:40,390 --> 00:02:46,345
и весь мой код CSS и JavaScript отключены в своих собственных отдельных файлах.

32
00:02:46,345 --> 00:02:52,590
Позвольте мне скопировать эту строку скриптов со страницы index.html,

33
00:02:52,590 --> 00:02:56,330
а затем перейти на страницу aboutus.html,

34
00:02:56,330 --> 00:02:59,365
прокрутите вниз до конца, где я включил

35
00:02:59,365 --> 00:03:02,540
другие скрипты, а затем вставьте это.

36
00:03:02,540 --> 00:03:07,405
Аналогичным образом, позвольте мне перейти на страницу contactus.html

37
00:03:07,405 --> 00:03:11,545
и снова прокрутите вниз до нижней части файла там.

38
00:03:11,545 --> 00:03:13,975
Позвольте мне вставить эту строку.

39
00:03:13,975 --> 00:03:18,205
Давайте сохраним изменения, а затем перейдем к следующему шагу.

40
00:03:18,205 --> 00:03:23,075
Следующий шаг, который я хотел бы сделать, - установить пару

41
00:03:23,075 --> 00:03:29,905
модулей NPM, которые я собираюсь использовать для автоматизации некоторых задач.

42
00:03:29,905 --> 00:03:34,310
Первый модуль NMP, который я собираюсь установить, называется onchange.

43
00:03:34,310 --> 00:03:42,335
Этот модуль onchange будет смотреть файлы в моей папке проекта,

44
00:03:42,335 --> 00:03:44,445
а затем всякий раз, когда эти файлы меняются,

45
00:03:44,445 --> 00:03:48,865
он автоматически запускает задачу, которая должна быть выполнена.

46
00:03:48,865 --> 00:03:50,660
Таким образом, например,

47
00:03:50,660 --> 00:03:56,860
если я настрою часы окончания кавычки на некоторых файлах,

48
00:03:56,860 --> 00:03:59,305
например, в моем SCSS-файле,

49
00:03:59,305 --> 00:04:02,270
то каждый раз, когда я

50
00:04:02,270 --> 00:04:07,220
внесу изменения в свой SCSS-файл, он автоматически будет перекомпилирован в соответствующий CSS-файл. У

51
00:04:07,220 --> 00:04:11,565
нас уже есть скрипт, который выполняет перекомпиляцию.

52
00:04:11,565 --> 00:04:16,080
Так что все, что мне нужно сделать, это настроить часы на этом конкретном файле.

53
00:04:16,080 --> 00:04:20,675
Теперь здесь я собираюсь использовать модуль NPM под названием Onchange.

54
00:04:20,675 --> 00:04:23,170
Существует еще одна модель NPM под названием Watch,

55
00:04:23,170 --> 00:04:25,945
которую вы также можете использовать для той же цели.

56
00:04:25,945 --> 00:04:29,240
В этом упражнении я собираюсь использовать модуль Onchange,

57
00:04:29,240 --> 00:04:34,765
затем мы будем иметь дело с грантом и глотком в последующих уроках,

58
00:04:34,765 --> 00:04:37,580
мы будем использовать модуль Watch для той же цели.

59
00:04:37,580 --> 00:04:42,845
Кроме того, я также собираюсь установить еще один модуль NPM под названием параллельная оболочка.

60
00:04:42,845 --> 00:04:46,250
Этот модуль Parallshell позволяет мне выполнять

61
00:04:46,250 --> 00:04:51,320
несколько сценариев NPM в Parallellshells, как следует из названия.

62
00:04:51,320 --> 00:04:55,095
Таким образом, несколько сценариев NPM могут быть одновременно

63
00:04:55,095 --> 00:04:59,785
выполнены и позволяют мне следить за различными файлами,

64
00:04:59,785 --> 00:05:03,835
а также выполнять другие задачи.

65
00:05:03,835 --> 00:05:06,340
Таким образом, давайте установить эти два модуля NPM.

66
00:05:06,340 --> 00:05:09,645
Мы собираемся установить их локально в этом конкретном проекте.

67
00:05:09,645 --> 00:05:14,555
Поэтому, чтобы сделать это, я напечатаю npm install.

68
00:05:14,555 --> 00:05:20,420
Я должен —save-dev, а затем я бы сказал onchange

69
00:05:20,420 --> 00:05:27,540
и parallshell, а затем дождался установки этих двух модулей NPM.

70
00:05:27,540 --> 00:05:29,755
Как только два модуля будут установлены,

71
00:05:29,755 --> 00:05:35,745
я собираюсь включить пару сценариев NPM в мой файл package.json.

72
00:05:35,745 --> 00:05:40,930
И я объясню вам причину, когда мы включаем эти сценарии.

73
00:05:40,930 --> 00:05:43,650
Возвращаясь к файлу package.json,

74
00:05:43,650 --> 00:05:46,270
сразу после этого SCSS,

75
00:05:46,270 --> 00:05:52,565
я собираюсь включить еще один скрипт под названием «watch: scss».

76
00:05:52,565 --> 00:05:55,125
И как следует из названия,

77
00:05:55,125 --> 00:05:59,290
это будет следить за файлами SCSS.

78
00:05:59,290 --> 00:06:07,435
Таким образом, здесь я вызову модуль onchange NPM, который я только что установил,

79
00:06:07,435 --> 00:06:12,610
а затем я бы сказал один код «css/* .scss».

80
00:06:13,960 --> 00:06:20,465
Таким образом, это означает, что наблюдение за всеми файлами SCSS, которые находятся в папке CSS.

81
00:06:20,465 --> 00:06:22,095
Если какой-либо из них изменится,

82
00:06:22,095 --> 00:06:29,535
то вы собираетесь запустить этот конкретный скрипт, и сценарий - «—npm

83
00:06:29,535 --> 00:06:35,915
run scss», потому что

84
00:06:35,915 --> 00:06:42,380
это сценарий, который будет выполнять перекомпиляцию моего SCSS-кода в соответствующий код CSS.

85
00:06:42,380 --> 00:06:46,075
Таким образом, я установил часы для моего SCSS.

86
00:06:46,075 --> 00:06:49,160
Очевидно, я могу ввести «часы nmp: scss».

87
00:06:49,160 --> 00:06:56,700
И тогда он запустит скрипт там с модулем onchange,

88
00:06:56,700 --> 00:06:58,690
поэтому он будет следить за этим.

89
00:06:58,690 --> 00:07:02,960
Если вы выполняете это упражнение на компьютере с Windows,

90
00:07:02,960 --> 00:07:06,345
вместо одной кавычки в сценарии,

91
00:07:06,345 --> 00:07:10,760
вы должны заменить это обратной косой чертой и двойной кавычкой.

92
00:07:10,760 --> 00:07:13,660
Аналогично, другая одиночная кавычка

93
00:07:13,660 --> 00:07:16,490
также заменяет ее обратной косой чертой и двойной кавычкой.

94
00:07:16,490 --> 00:07:22,770
Итак, вот как сценарий будет выглядеть на компьютере Windows.

95
00:07:22,770 --> 00:07:28,385
Теперь я собираюсь использовать Parallshell

96
00:07:28,385 --> 00:07:35,765
для запуска нескольких из этих сценариев, чтобы быть одновременно активными.

97
00:07:35,765 --> 00:07:39,670
Поэтому я бы сказал «parallshell»,

98
00:07:39,990 --> 00:07:42,660
а затем в кавычках

99
00:07:42,660 --> 00:07:49,150
я бы сказал «npm run watch: scs».

100
00:07:49,590 --> 00:07:55,605
Таким образом, Parallshell принимает несколько из них в качестве параметров,

101
00:07:55,605 --> 00:07:58,380
каждый из которых находится в одиночных кавычках.

102
00:07:58,380 --> 00:08:05,380
И второй - «npm run lite».

103
00:08:05,550 --> 00:08:11,630
Таким образом, вы можете видеть, что этот Parallshell позволяет мне выполнять два сценария одновременно,

104
00:08:11,630 --> 00:08:14,370
один для наблюдения за моим SCSS-файлом,

105
00:08:14,370 --> 00:08:17,745
другой для запуска облегченной оболочки.

106
00:08:17,745 --> 00:08:21,840
Если вы выполняете это упражнение на компьютере с Windows,

107
00:08:21,840 --> 00:08:25,245
вместо одного кода в скрипте

108
00:08:25,245 --> 00:08:29,665
вы должны заменить его обратной косой чертой и двойной кавычкой.

109
00:08:29,665 --> 00:08:32,560
Аналогично, другая одиночная кавычка

110
00:08:32,560 --> 00:08:35,390
также заменяет ее обратной косой чертой и двойной кавычкой.

111
00:08:35,390 --> 00:08:41,685
Так вот как сценарий будет выглядеть на компьютере Windows.

112
00:08:41,685 --> 00:08:44,335
Теперь, после внесения этих изменений,

113
00:08:44,335 --> 00:08:48,160
позвольте мне сохранить изменения, а затем я пойду

114
00:08:48,160 --> 00:08:52,890
сюда, а затем начну скрипт, который у меня есть здесь.

115
00:08:52,890 --> 00:08:59,480
Я изменю это с «npm run lite» на «npm run watch: all».

116
00:09:01,950 --> 00:09:05,145
И сохраните изменения здесь.

117
00:09:05,145 --> 00:09:10,460
Таким образом, скрипты, которые мне нужны, теперь настроены.

118
00:09:10,460 --> 00:09:15,745
Итак, теперь я могу пойти вперед и сделать

119
00:09:15,745 --> 00:09:21,124
«npm start», и который в основном запустит эти два скрипта одновременно,

120
00:09:21,124 --> 00:09:24,850
один будет следить за моими файлами SCSS, которые, в свою очередь,

121
00:09:24,850 --> 00:09:28,825
вызовут компиляцию SCSS в CSS,

122
00:09:28,825 --> 00:09:32,150
другой, который запускает мой облегченный сервер.

123
00:09:32,150 --> 00:09:41,125
Теперь я начал на вкладке таблицы, а затем переместился в папку проекта,

124
00:09:41,125 --> 00:09:42,665
а затем добавьте приглашение.

125
00:09:42,665 --> 00:09:44,705
Я напечатаю «npm start».

126
00:09:44,705 --> 00:09:46,585
И это должно вызвать

127
00:09:46,585 --> 00:09:54,435
как мой облегченный сервер, который сохранит файлы из моей папки путаницы,

128
00:09:54,435 --> 00:10:02,290
так и вызовет модуль Onchange, чтобы следить за файлами SCSS.

129
00:10:02,290 --> 00:10:09,100
Чтобы помочь вам проиллюстрировать, как этот Onchange держит часы на моих SCSS-файлах,

130
00:10:09,100 --> 00:10:14,705
то, что я собираюсь сделать, это перейти к файлу styles.scss здесь,

131
00:10:14,705 --> 00:10:18,675
а затем я просто сохраню файл снова.

132
00:10:18,675 --> 00:10:20,860
Теперь, когда этот файл сохраняется,

133
00:10:20,860 --> 00:10:22,620
я не собираюсь вносить в него никаких изменений.

134
00:10:22,620 --> 00:10:25,755
Я просто собираюсь нажать на сохранение в файле.

135
00:10:25,755 --> 00:10:30,620
Таким образом, каждый раз, когда этот файл

136
00:10:32,750 --> 00:10:40,495
будет изменен, вы увидите, что немедленно Onchange вызовет скрипт узла SAS для выполнения,

137
00:10:40,495 --> 00:10:47,555
который скомпилирует файл из SCSS в CSS и создает здесь файл CSS,

138
00:10:47,555 --> 00:10:50,335
а затем сохранит файл, который также вызовет

139
00:10:50,335 --> 00:10:55,450
мою веб-страницу для перезагрузки его в браузер.

140
00:10:55,450 --> 00:11:03,285
Таким образом, это, по сути, то, чего мы достигли, используя модуль Onchange, чтобы следить

141
00:11:03,285 --> 00:11:07,660
за файлами, которые затем изменились,

142
00:11:07,660 --> 00:11:12,395
автоматически запустит некоторые скрипты NPM.

143
00:11:12,395 --> 00:11:20,790
Теперь это освобождает нас от опасений о необходимости вручную запускать эти задачи.

144
00:11:20,790 --> 00:11:25,390
Например, если у вас есть набор задач, которые вы хотите запустить автоматически,

145
00:11:25,390 --> 00:11:27,395
то некоторые изменения происходят.

146
00:11:27,395 --> 00:11:35,100
Вы можете легко настроить такие задачи наблюдения, чтобы следить за этими изменениями.

147
00:11:35,100 --> 00:11:37,785
Теперь я проиллюстрировал это одним примером.

148
00:11:37,785 --> 00:11:39,985
В моем примере здесь

149
00:11:39,985 --> 00:11:45,260
я только изменяю файлы CSS, которые должны быть скомпилированы.

150
00:11:45,260 --> 00:11:50,125
Но позже мы работаем с фреймворками JavaScript.

151
00:11:50,125 --> 00:11:57,335
Вы увидите, что вы можете инициировать компиляции, когда различные файлы изменились.

152
00:11:57,335 --> 00:12:02,964
И все это можно легко управлять с помощью этих задач часов.

153
00:12:02,964 --> 00:12:07,560
Будет ли это, мы завершим это упражнение.

154
00:12:07,560 --> 00:12:13,685
Здесь мы научились настраивать еще несколько сценариев NPM

155
00:12:13,685 --> 00:12:20,855
и автоматически запускать некоторые из сценариев с помощью модуля onchange NPM.

156
00:12:20,855 --> 00:12:24,550
Мы также видели использование параллельного модуля оболочки для выполнения

157
00:12:24,550 --> 00:12:32,050
нескольких сценариев NPM одновременно в нашем окне терминала.

158
00:12:32,200 --> 00:12:42,890
Это хороший момент для вас сделать комментарий Git с сообщением «NPM Scripts Part 1».