[MUSIC]
До сих пор мы сосредоточились на разработке и
внедрении нашего веб-сайта, будь то HTML, CSS или JavaScript код.
После того, как ваш сайт будет готов, следующий шаг будет иметь возможность построить свой веб-сайт и
развернуть его на веб-сервере, чтобы он стал общедоступным.
Затем наш второй набор шагов, которые мы должны пройти до того, как
ваш сайт будет готов к развертыванию на веб-сервере.
Это то, на что мы будем смотреть в этом и следующем уроке.
Как я уже упоминал, веб-разработка и
развертывание сопряжены с множеством повторяющихся задач.
Очевидно, что написание HTML/CSS и кода JavaScript является одной из его частей.
Но другая часть заключается в том, что если вы пишете
код CSS, используя один из языков предварительной обработки CSS, например Sass или
Less, вам нужно преобразовать этот код в соответствующий код CSS.
После этого вам нужно выполнить дополнительную обработку ваших
файлов CSS, таких как минимизация, уплотнение и конкатенация.
Мы поговорим немного больше об этом в следующих нескольких слайдах.
Аналогично, с вашим кодом JavaScript вам нужно сделать
JSHinting, проверяя потенциальные ошибки.
Затем конкатенация различных файлов скриптов, а
затем даже углификация и искажение кода.
Мы немного поговорим об этом в следующих нескольких слайдах.
Все эти задачи являются повторяющимися задачами, которые мы хотели бы автоматизировать
насколько это возможно, чтобы мы могли сосредоточиться на фактическом дизайне и
построении нашего сайта, а не на этих повторяющихся задачах.
Так что принцип DRY, не повторяя сам принцип,
очень важен в этом случае.
Мы не хотим тратить время на такие повторяющиеся задачи горения,
а вместо этого стараемся автоматизировать их, насколько это возможно,
чтобы они могли выполняться всякий раз, когда это необходимо.
Давайте поговорим о некоторых из этих повторяющихся задач чуть более подробно.
Возьмем пример CSS в качестве примера.
Когда мы пишем код CSS, мы часто пишем код,
используя один из языков предварительной обработки, таких как Less или Sass.
Теперь, как только код написан, его нужно преобразовать в CSS с помощью
одного из препроцессоров, как мы видели в предыдущем уроке.
Там нам может потребоваться сделать некоторые специфические для поставщика префикс для
нашего кода CSS, чтобы решить проблемы, которые могут возникнуть с различными браузерами.
Таким образом, здесь используется задача выполнения автопрефикса,
благодаря чему это может быть автоматически сделано для нас.
Точно так же, как только ваш код CSS написан, очевидно,
способ, которым мы пишем код CSS, должен быть читаемым человеком.
Но для машины на самом деле не важно, достаточно ли пробелов
между кодом или правильно ли он отформатирован или нет.
Таким образом, минимизация - это процесс удаления всех ненужных символов,
пробелов, новых строк, комментариев, из вашего кода CSS.
Таким образом, ваш конечный результат - очень компактный файл с минимальным
количеством символов, так что может быть подан очень, очень быстро.
Но в то же время,
вы хотите сохранить функциональность, которую вы разработали в вашем CSS коде.
Аналогичным образом, вы можете распространять свой код CSS во многих файлах, в
то время как вы разрабатываете и создаете свой веб-сайт.
Вы можете объединить все их в один CSS-файл в конце,
так что только один CSS-файл должен быть загружен
браузером, когда он рендеринг вашего веб-сайта.
Таким образом, конкатенация -
еще одна задача, которая возникает, когда вы создаете свой сайт.
Аналогичным образом, когда вы пишете код JavaScript, будь то чистый JavaScript или
jQuery или один из фреймворков, которые мы будем использовать в
будущих курсах этой специализации, вам нужно будет написать код JavaScript.
Поэтому, как только вы написали код JavaScript, вы захотите иметь возможность проверить
код JavaScript на наличие ошибок и потенциальных проблем.
Такие вещи, как отсутствие точек с запятой,
неправильное использование языка и так далее, так что мы называем статическим анализом кода.
Поэтому, если вы хотите, чтобы иметь возможность выполнить это, еще до того, как мы развертываем наш
сайт на веб-сервере.
Аналогичным образом, мы можем организовать наш код в несколько файлов JavaScript.
Когда мы фактически развертываем, мы можем захотеть объединить все эти файлы в
один файл JavaScript, а затем использовать его на наших веб-страницах.
И эта конкатенация может быть выполнена автоматически.
Аналогично, углификация кода JavaScript, который означает
минимизацию, что означает удаление всего ненужного пробела и
комментариев и так далее.
И искажение кода, означающее сокращение имен локальных
переменных до одиночных букв, где это возможно.
Теперь, с точки зрения компьютера, на
самом деле не важно, как выглядит код, пока он работает правильно.
Для читаемого формата мы, очевидно, пишем код гораздо более
сложным образом, так что нам легче следовать тому, что делает код.
Поэтому, когда вы действительно
развертываете, вы можете удалить все посторонние функции из вашего кода.
А затем сжать его так, чтобы минимальное количество кода было подано.
В то же время, по завершении
процесса конкатенации и углификации JSHint,
вы все равно можете убедиться, что ваш результирующий код по-прежнему будет работать правильно.
Таким образом, вы можете перепроверить свой код на возможные ошибки.
CSS и JavaScript - это два основных аспекта вашей веб-разработки, на которые вам,
очевидно, нужно обратить много внимания.
Но есть много других более мелких задач, которые необходимо выполнить,
прежде чем ваш сайт будет готов к развертыванию.
Вы можете включить много изображений в свои веб-страницы.
После того, как ваш сайт
будет готов, вы можете захотеть сжать эти изображения таким образом, чтобы вы оптимизировали размеры файлов, чтобы их изображения были минимальными размерами для развертывания.
Аналогичным образом, во время разработки вы можете вносить изменения,
например, в файлы Sass или код JavaScript.
Когда такие изменения сделаны,
вы хотите иметь возможность автоматически выполнять эти задачи,
такие как конкатенация, минимизация и углификация.
Таким образом, мы могли бы использовать задачи наблюдения,
основная задача которых - следить за всеми этими файлами.
И если в эти файлы будут внесены какие-либо изменения,
задачи будут выполняться автоматически.
Это освободит большую часть нашего времени от выполнения повторяющихся задач вручную.
Мы рассмотрим некоторые из этого более подробно в последующих упражнениях.
Еще один аспект, пока вы делаете свою разработку,
заключается в том, чтобы иметь возможность обслуживать свой код и
смотреть код в вашем браузере.
Таким образом, мы видели использование живого сервера в нашей предыдущей разработке,
где мы запустили сервер и обслуживали код.
Таким образом, мы можем видеть изменения, которые мы делаем мгновенно
визуализируются в браузере.
Итак, для этого нам нужен механизм сервера и livereload, и
живой сервер, который мы видели ранее, является одним из таких примеров того, как мы можем этого достичь.
Наконец, если вы пишете код, вам, очевидно, нужно провести тестирование
вашего кода, что, в случае Bootstrap, гораздо меньше внимания.
Но по мере того, как вы продолжаете использовать различные фреймворки JavaScript,
тестирование становится не менее важной задачей.
Наконец, вы хотите иметь возможность выполнить все эти задачи, а
затем создать свой окончательный код развертывания, который затем может быть загружен
на ваш веб-сервер, чтобы сделать ваш веб-сайт доступным для широкой общественности.
Действия, связанные с созданием вашего сайта для развертывания, то, что мы
называем созданием файлов распространения, также являются не менее важной задачей.
Мы рассмотрим некоторые из них через примеры в следующем упражнении, а
также следующий урок, где мы рассмотрим бегунов задач.
[ МУЗЫКА]