1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
До сих пор мы сосредоточились на разработке и

3
00:00:08,968 --> 00:00:14,540
внедрении нашего веб-сайта, будь то HTML, CSS или JavaScript код.

4
00:00:16,170 --> 00:00:21,890
После того, как ваш сайт будет готов, следующий шаг будет иметь возможность построить свой веб-сайт и

5
00:00:21,890 --> 00:00:26,010
развернуть его на веб-сервере, чтобы он стал общедоступным.

6
00:00:27,300 --> 00:00:30,750
Затем наш второй набор шагов, которые мы должны пройти до того, как

7
00:00:30,750 --> 00:00:34,580
ваш сайт будет готов к развертыванию на веб-сервере.

8
00:00:34,580 --> 00:00:39,079
Это то, на что мы будем смотреть в этом и следующем уроке.

9
00:00:40,915 --> 00:00:43,479
Как я уже упоминал, веб-разработка и

10
00:00:43,479 --> 00:00:47,870
развертывание сопряжены с множеством повторяющихся задач.

11
00:00:47,870 --> 00:00:54,820
Очевидно, что написание HTML/CSS и кода JavaScript является одной из его частей.

12
00:00:54,820 --> 00:00:57,600
Но другая часть заключается в том, что если вы пишете

13
00:00:59,200 --> 00:01:04,170
код CSS, используя один из языков предварительной обработки CSS, например Sass или

14
00:01:04,170 --> 00:01:09,200
Less, вам нужно преобразовать этот код в соответствующий код CSS.

15
00:01:09,200 --> 00:01:14,614
После этого вам нужно выполнить дополнительную обработку ваших

16
00:01:14,614 --> 00:01:20,810
файлов CSS, таких как минимизация, уплотнение и конкатенация.

17
00:01:20,810 --> 00:01:24,850
Мы поговорим немного больше об этом в следующих нескольких слайдах.

18
00:01:24,850 --> 00:01:30,090
Аналогично, с вашим кодом JavaScript вам нужно сделать

19
00:01:30,090 --> 00:01:34,580
JSHinting, проверяя потенциальные ошибки.

20
00:01:34,580 --> 00:01:40,590
Затем конкатенация различных файлов скриптов, а

21
00:01:40,590 --> 00:01:45,100
затем даже углификация и искажение кода.

22
00:01:45,100 --> 00:01:49,240
Мы немного поговорим об этом в следующих нескольких слайдах.

23
00:01:49,240 --> 00:01:54,889
Все эти задачи являются повторяющимися задачами, которые мы хотели бы автоматизировать

24
00:01:54,889 --> 00:02:00,536
насколько это возможно, чтобы мы могли сосредоточиться на фактическом дизайне и

25
00:02:00,536 --> 00:02:05,730
построении нашего сайта, а не на этих повторяющихся задачах.

26
00:02:05,730 --> 00:02:09,623
Так что принцип DRY, не повторяя сам принцип,

27
00:02:09,623 --> 00:02:11,840
очень важен в этом случае.

28
00:02:11,840 --> 00:02:16,840
Мы не хотим тратить время на такие повторяющиеся задачи горения,

29
00:02:16,840 --> 00:02:20,140
а вместо этого стараемся автоматизировать их, насколько это возможно,

30
00:02:20,140 --> 00:02:23,410
чтобы они могли выполняться всякий раз, когда это необходимо.

31
00:02:23,410 --> 00:02:27,649
Давайте поговорим о некоторых из этих повторяющихся задач чуть более подробно.

32
00:02:28,950 --> 00:02:33,580
Возьмем пример CSS в качестве примера.

33
00:02:33,580 --> 00:02:37,470
Когда мы пишем код CSS, мы часто пишем код,

34
00:02:37,470 --> 00:02:41,440
используя один из языков предварительной обработки, таких как Less или Sass.

35
00:02:41,440 --> 00:02:46,920
Теперь, как только код написан, его нужно преобразовать в CSS с помощью

36
00:02:46,920 --> 00:02:52,460
одного из препроцессоров, как мы видели в предыдущем уроке.

37
00:02:54,130 --> 00:02:59,660
Там нам может потребоваться сделать некоторые специфические для поставщика префикс для

38
00:02:59,660 --> 00:03:06,300
нашего кода CSS, чтобы решить проблемы, которые могут возникнуть с различными браузерами.

39
00:03:06,300 --> 00:03:12,599
Таким образом, здесь используется задача выполнения автопрефикса,

40
00:03:12,599 --> 00:03:16,980
благодаря чему это может быть автоматически сделано для нас.

41
00:03:16,980 --> 00:03:20,430
Точно так же, как только ваш код CSS написан, очевидно,

42
00:03:20,430 --> 00:03:26,010
способ, которым мы пишем код CSS, должен быть читаемым человеком.

43
00:03:26,010 --> 00:03:30,550
Но для машины на самом деле не важно, достаточно ли пробелов

44
00:03:30,550 --> 00:03:34,000
между кодом или правильно ли он отформатирован или нет.

45
00:03:35,100 --> 00:03:41,274
Таким образом, минимизация - это процесс удаления всех ненужных символов,

46
00:03:41,274 --> 00:03:46,080
пробелов, новых строк, комментариев, из вашего кода CSS.

47
00:03:46,080 --> 00:03:51,280
Таким образом, ваш конечный результат - очень компактный файл с минимальным

48
00:03:51,280 --> 00:03:56,306
количеством символов, так что может быть подан очень, очень быстро.

49
00:03:56,306 --> 00:03:57,812
Но в то же время,

50
00:03:57,812 --> 00:04:03,099
вы хотите сохранить функциональность, которую вы разработали в вашем CSS коде.

51
00:04:04,550 --> 00:04:09,140
Аналогичным образом, вы можете распространять свой код CSS во многих файлах, в

52
00:04:09,140 --> 00:04:12,870
то время как вы разрабатываете и создаете свой веб-сайт.

53
00:04:12,870 --> 00:04:17,620
Вы можете объединить все их в один CSS-файл в конце,

54
00:04:17,620 --> 00:04:21,430
так что только один CSS-файл должен быть загружен

55
00:04:21,430 --> 00:04:25,290
браузером, когда он рендеринг вашего веб-сайта.

56
00:04:25,290 --> 00:04:27,150
Таким образом, конкатенация -

57
00:04:27,150 --> 00:04:32,340
еще одна задача, которая возникает, когда вы создаете свой сайт.

58
00:04:33,660 --> 00:04:38,940
Аналогичным образом, когда вы пишете код JavaScript, будь то чистый JavaScript или

59
00:04:38,940 --> 00:04:44,800
jQuery или один из фреймворков, которые мы будем использовать в

60
00:04:44,800 --> 00:04:50,640
будущих курсах этой специализации, вам нужно будет написать код JavaScript.

61
00:04:50,640 --> 00:04:53,550
Поэтому, как только вы написали код JavaScript, вы захотите иметь возможность проверить

62
00:04:53,550 --> 00:04:57,510
код JavaScript на наличие ошибок и потенциальных проблем.

63
00:04:57,510 --> 00:05:00,576
Такие вещи, как отсутствие точек с запятой,

64
00:05:02,810 --> 00:05:09,030
неправильное использование языка и так далее, так что мы называем статическим анализом кода.

65
00:05:09,030 --> 00:05:13,490
Поэтому, если вы хотите, чтобы иметь возможность выполнить это, еще до того, как мы развертываем наш

66
00:05:14,830 --> 00:05:18,180
сайт на веб-сервере.

67
00:05:18,180 --> 00:05:23,379
Аналогичным образом, мы можем организовать наш код в несколько файлов JavaScript.

68
00:05:23,379 --> 00:05:28,135
Когда мы фактически развертываем, мы можем захотеть объединить все эти файлы в

69
00:05:28,135 --> 00:05:33,515
один файл JavaScript, а затем использовать его на наших веб-страницах.

70
00:05:33,515 --> 00:05:36,775
И эта конкатенация может быть выполнена автоматически.

71
00:05:36,775 --> 00:05:42,340
Аналогично, углификация кода JavaScript, который означает

72
00:05:42,340 --> 00:05:46,720
минимизацию, что означает удаление всего ненужного пробела и

73
00:05:46,720 --> 00:05:48,880
комментариев и так далее.

74
00:05:48,880 --> 00:05:53,670
И искажение кода, означающее сокращение имен локальных

75
00:05:53,670 --> 00:05:58,100
переменных до одиночных букв, где это возможно.

76
00:05:58,100 --> 00:06:01,562
Теперь, с точки зрения компьютера, на

77
00:06:01,562 --> 00:06:06,790
самом деле не важно, как выглядит код, пока он работает правильно.

78
00:06:06,790 --> 00:06:12,230
Для читаемого формата мы, очевидно, пишем код гораздо более

79
00:06:12,230 --> 00:06:17,960
сложным образом, так что нам легче следовать тому, что делает код.

80
00:06:17,960 --> 00:06:19,620
Поэтому, когда вы действительно

81
00:06:19,620 --> 00:06:23,460
развертываете, вы можете удалить все посторонние функции из вашего кода.

82
00:06:23,460 --> 00:06:29,226
А затем сжать его так, чтобы минимальное количество кода было подано.

83
00:06:29,226 --> 00:06:35,270
В то же время, по завершении

84
00:06:35,270 --> 00:06:37,200
процесса конкатенации и углификации JSHint,

85
00:06:37,200 --> 00:06:41,990
вы все равно можете убедиться, что ваш результирующий код по-прежнему будет работать правильно.

86
00:06:41,990 --> 00:06:46,490
Таким образом, вы можете перепроверить свой код на возможные ошибки.

87
00:06:47,550 --> 00:06:52,127
CSS и JavaScript - это два основных аспекта вашей веб-разработки, на которые вам,

88
00:06:52,127 --> 00:06:55,640
очевидно, нужно обратить много внимания.

89
00:06:55,640 --> 00:06:59,640
Но есть много других более мелких задач, которые необходимо выполнить,

90
00:06:59,640 --> 00:07:02,870
прежде чем ваш сайт будет готов к развертыванию.

91
00:07:02,870 --> 00:07:08,601
Вы можете включить много изображений в свои веб-страницы.

92
00:07:08,601 --> 00:07:17,881
После того, как ваш сайт

93
00:07:17,881 --> 00:07:23,440
будет готов, вы можете захотеть сжать эти изображения таким образом, чтобы вы оптимизировали размеры файлов, чтобы их изображения были минимальными размерами для развертывания.

94
00:07:24,510 --> 00:07:30,310
Аналогичным образом, во время разработки вы можете вносить изменения,

95
00:07:30,310 --> 00:07:35,580
например, в файлы Sass или код JavaScript.

96
00:07:35,580 --> 00:07:38,268
Когда такие изменения сделаны,

97
00:07:38,268 --> 00:07:42,748
вы хотите иметь возможность автоматически выполнять эти задачи,

98
00:07:42,748 --> 00:07:47,990
такие как конкатенация, минимизация и углификация.

99
00:07:47,990 --> 00:07:52,110
Таким образом, мы могли бы использовать задачи наблюдения,

100
00:07:52,110 --> 00:07:56,480
основная задача которых - следить за всеми этими файлами.

101
00:07:56,480 --> 00:07:59,340
И если в эти файлы будут внесены какие-либо изменения,

102
00:07:59,340 --> 00:08:03,070
задачи будут выполняться автоматически.

103
00:08:03,070 --> 00:08:09,260
Это освободит большую часть нашего времени от выполнения повторяющихся задач вручную.

104
00:08:10,610 --> 00:08:15,320
Мы рассмотрим некоторые из этого более подробно в последующих упражнениях.

105
00:08:16,660 --> 00:08:22,060
Еще один аспект, пока вы делаете свою разработку,

106
00:08:22,060 --> 00:08:25,940
заключается в том, чтобы иметь возможность обслуживать свой код и

107
00:08:25,940 --> 00:08:30,570
смотреть код в вашем браузере.

108
00:08:30,570 --> 00:08:37,960
Таким образом, мы видели использование живого сервера в нашей предыдущей разработке,

109
00:08:37,960 --> 00:08:42,330
где мы запустили сервер и обслуживали код.

110
00:08:42,330 --> 00:08:46,530
Таким образом, мы можем видеть изменения, которые мы делаем мгновенно

111
00:08:48,230 --> 00:08:51,020
визуализируются в браузере.

112
00:08:51,020 --> 00:08:55,549
Итак, для этого нам нужен механизм сервера и livereload, и

113
00:08:55,549 --> 00:09:01,340
живой сервер, который мы видели ранее, является одним из таких примеров того, как мы можем этого достичь.

114
00:09:02,740 --> 00:09:07,850
Наконец, если вы пишете код, вам, очевидно, нужно провести тестирование

115
00:09:07,850 --> 00:09:14,210
вашего кода, что, в случае Bootstrap, гораздо меньше внимания.

116
00:09:14,210 --> 00:09:18,930
Но по мере того, как вы продолжаете использовать различные фреймворки JavaScript,

117
00:09:18,930 --> 00:09:21,915
тестирование становится не менее важной задачей.

118
00:09:23,190 --> 00:09:28,680
Наконец, вы хотите иметь возможность выполнить все эти задачи, а

119
00:09:28,680 --> 00:09:34,250
затем создать свой окончательный код развертывания, который затем может быть загружен

120
00:09:34,250 --> 00:09:40,790
на ваш веб-сервер, чтобы сделать ваш веб-сайт доступным для широкой общественности.

121
00:09:42,450 --> 00:09:48,115
Действия, связанные с созданием вашего сайта для развертывания, то, что мы

122
00:09:48,115 --> 00:09:53,950
называем созданием файлов распространения, также являются не менее важной задачей.

123
00:09:53,950 --> 00:09:59,754
Мы рассмотрим некоторые из них через примеры в следующем упражнении, а

124
00:09:59,754 --> 00:10:04,470
также следующий урок, где мы рассмотрим бегунов задач.

125
00:10:04,470 --> 00:10:10,569
[ МУЗЫКА]