[МУЗЫКА]
Теперь мы продолжим наше путешествие со сценариями NPM в следующем упражнении.
Здесь мы собираемся узнать, как иметь возможность построить
папку распространения, которая содержит все файлы для
нашего проекта, которые мы можем просто развернуть на веб-сервере, на котором размещается наш веб-сайт.
Поэтому, учитывая HTML, CSS и JavaScript файлы, которые
мы уже подготовили в нашей папке проекта, мы собираемся, из них,
обрабатывать их с помощью различных задач, о которых мы говорили.
Это делает модификацию CSS,
конкатенацию и углификацию JavaScript, минимизацию
и минимизацию HTML,
а затем генерирует папку распространения со всеми файлами.
Но по сути формирует набор файлов, которые могут быть
развернуты на нашем веб-сервере, на котором размещается наш веб-сайт.
Чтобы помочь вам понять, что мы будем делать в этом конкретном упражнении,
как мы отмечаем с нашей страницы index.html, у нас есть набор
CSS файлов, которые вы включили здесь, используя этот тег ссылки здесь.
Аналогично, у вас есть набор скриптов, которые вы включили
в нижней части этой страницы с помощью тега скрипта.
Мы включили набор кода JavaScript.
Теперь, что мы собираемся сделать в этом упражнении, это объединить все эти
файлы в один файл JavaScript, который будет доставлен
с нашего веб-сервера в браузер, который пытается просмотреть наш веб-сайт.
Таким образом, мы минимизируем количество загрузок, которые браузер должен сделать для
того, чтобы сделать наш сайт.
Аналогичным образом, мы собираемся объединить весь код CSS в один файл CSS,
так что он может быть доставлен.
Таким образом, объединенный файл CSS будет содержать весь код для
Bootstrap плюс Bootstrap social, а также шрифт Awesome, а
также код CSS, который мы сами написали.
Аналогично, будет один файл JavaScript, который
будет содержать трос jQuery, Bootstrap и код JavaScript, который мы,
сами написали, объединены в один файл.
Теперь, вот как вы можете сделать развертывание ваших веб-страниц.
И вместо того, чтобы иметь несколько таких файлов, один из способов
развертывания делается, чтобы объединить их в один файл, чтобы одна загрузка
вы получили весь код JavaScript, необходимый для рендеринга вашей веб-страницы.
Одна загрузка вы получаете весь код CSS, необходимый для
рендеринга вашей веб-страницы.
И тогда, конечно же, сам HTML-файл будет загружен.
Чтобы эти задачи были завершены, нам нужно использовать
определенный набор модулей NPM для этого.
Теперь, что мы в конечном итоге сделаем, это создать папку
в файле наших проектов, а затем мы называем эту папку как dist, D-I-S-T.
Я просто случайно назову это как папку dist.
В моем случае, то, что я имею в виду под папкой dist, - это папка распространения.
В конце набора шагов, которые мы собираемся сделать, эта папка будет содержать все
файлы, которые могут быть просто скопированы на веб-сервер, на котором размещен наш веб-сайт.
Чтобы начать работу, мы собираемся создать набор
сценариев здесь, которые помогут нам автоматизировать этот процесс.
Итак, во-первых, мы могли бы
подготовить папку распространения один раз, тогда, возможно, мы можем сделать некоторые правки
в наши исходные файлы, тогда нам может потребоваться перекомпилировать нашу папку распространения.
Первый шаг, мы бы настроили скрипт для очистки этой папки дистрибутива
по существу означает, удалить папку дистрибутива.
Поэтому, чтобы сделать это, я собираюсь воспользоваться помощью модуля NPM под названием rimfraf.
Поэтому я установлю npm —save-dev rimfraf.
Этот модуль помогает нам полностью очистить папку.
Поэтому, как только я установлю это, я настрою скрипт
в моем файле package.json, чтобы очистить все файлы.
Переходя к файлу package.json, я собираюсь добавить, поэтому
всегда помните, что кома очень, очень важна в этих сценариях.
Иногда вы сталкиваетесь с проблемами только потому, что вы забыли запятую.
Поэтому убедитесь, что вы положили запятые там, где это необходимо.
Следующий описал, который я собираюсь добавить, является чистым,
очевидно, как следует из названия, это собирается очистить мою папку.
Так что я скажу римраф дист.
Это означает, что это, при выполнении,
очистит папку дистрибутива.
Поэтому я добавлю это в, а
затем я поставлю эту запятую, потому что я собираюсь добавить больше сценариев ниже этого.
Поэтому позвольте мне сохранить изменения, следующий шаг, который я собираюсь сделать, -
установить модуль npm под названием copy файлы, которые используются для копирования
некоторых файлов шрифтов из моей папки модулей узла в мою папку распространения.
Таким образом, когда он развертывается, файлы шрифтов также развертываются.
Перейдя к терминалу, следующий пакет, который я собираюсь установить, - это
npm -g, напомним, что это означает, что он должен быть установлен глобально.
Поскольку я делаю это на Mac,
я должен сказать sudo npm -g, если вы делаете это в Windows, вам не нужен sudo.
sudo npm -g установить копии файлов.
И затем, как только это будет установлено, этот модуль NPM поможет мне скопировать
файлы из одной папки в другую папку.
Теперь позвольте мне представить еще один сценарий NPM здесь.
Перейдя к моему файлу package.json,
я собираюсь создать новый скрип здесь имя copyfonts.
Этот скрипт позволит мне скопировать все файлы шрифтов из моей
папки Font Awesome в папку дистрибутива.
Таким образом, когда мой сайт отображается,
все эти файлы шрифтов также могут быть отправлены, так что
мои веб-страницы отображаются правильно с шрифтами Font Awesome на месте.
Чтобы сделать это, скажу, скопируйте файлы -f,
-f означает, что он просто копирует файлы без полной иерархии и
просто копирует файлы из одного места в другое.
Так что я скажу, скопируйте файлы -f
node_modules/font_awesome/font/star
И dist/fonts,
а затем сохраните изменения.
Позвольте мне теперь проиллюстрировать, как эти два скрипта npm работают вместе.
Перейдя к моему командному окну, я
напечатаю npm copyfonts.
Когда это выполняется, он собирается создать папку с
именем dist в иерархии папок проекта.
А затем внутри dist
будет вложенная папка с именем fonts, которая будет содержать файлы шрифтов.
Таким образом, запустив это,
вы сразу заметите, что папка дистрибутива создана здесь.
И внутри папки дистрибутива
вы можете видеть, что есть вложенная папка с именем fonts.
И внутри, все файлы fontawesome были скопированы.
Так работает скрипт copyfonts.
Теперь я покажу вам, как работает чистый скрипт.
Поэтому, если я введу npm, запустить clean, это удалит эту папку распространения.
Поэтому, когда я запускаю это, вы заметите, что
папка дистрибутива удаляется из иерархии папок моих проектов.
Так вот, как работает чистый.
Теперь, когда у нас есть эти два скрипта настроены,
нам теперь нужно иметь возможность создавать оставшиеся файлы дистрибутива.
На следующем шаге мы собираемся установить модуль узла под названием imagemin-cli,
который является интерфейсом командной строки для модуля imagemin.
Модуль imaginemin возьмет секту файлов изображений, а затем сжимает их вниз.
Таким образом, размер этих файлов свернут до минимума, насколько это возможно,
но все же будет отображаться должным образом, когда наш сайт отображается.
Таким образом, мы сократим количество данных, которые
должны быть загружены браузером, когда он должен отобразить нашу веб-страницу.
Поэтому, если вы включаете изображения в свою веб-страницу, то задача imagemin - это
то, что вы должны узнать, чтобы tor уменьшить размер ваших файлов изображений.
Поэтому для этого я собираюсь установить этот модуль узла imagemin как глобальный модуль.
Поэтому я набираю sudo, поскольку я использую Mac,
npm -g install imagemin-cli,
а затем устанавливаю этот модуль узла.
Иногда на Mac некоторые плагины imagemin не устанавливаются правильно.
Поэтому я даю эти дополнительные флаги команде,
они говорят: —unsafe-perm = true и —allow-root.
Как только эта установка будет завершена,
позвольте мне настроить сценарий, чтобы сделать это увеличение моих изображений.
Собираясь снова package.json, я собираюсь настроить следующий сценарий здесь.
Поэтому я бы сказал, что imagemin - это имя сценария, которое я собираюсь сделать,
и я бы сказал imagemin.
И тогда, поскольку все мои изображения находятся в папке img, я бы сказал img/*,
а затем многие файлы будут скопированы в dist image.
Таким образом, исходные файлы изображений из папки изображений, которая у меня есть, будут
скопированы в папку распространения и в подпапку изображения там.
Таким образом, это завершает мой образ.
Позвольте мне продолжить с оставшейся настройкой, и
тогда мы увидим, как мы будем использовать скрипты, которые мы уже создали там.
Теперь, когда у меня есть тестовая папка, которую я мог бы создать,
я не хочу проверять папку dist в моем репозитории Git.
Поэтому в мой файл.gitignore я также добавлю в папку dist.
Таким образом, папка dist будет игнорироваться, когда я делаю свою проверку в репозитории Git.
Итак, давайте сохраним изменения, возвращаясь к package.json.
Теперь, что я собираюсь сделать дальше, это установить три разных
модуля узла, которые позволяют мне
вносить изменения в мой файл index.html и остальные HTML-файлы там.
В командной строке введите npm install —save dev.
Я собираюсь установить модуль под названием usemin-cli.
Этот usemin-cli - это тот, который позволяет мне выполнять преобразование из моего
HTML-файла.
А затем объединить и объединить все
файлы CSS в один файл CSS, а затем поместить его в папку распространения.
Аналогично, все JS-файлы будут объединены и помещены в одну папку.
Таким образом, этот usemin-cli полезен.
Но этот usemin-cli принимает помощь
трех других модулей узлов, называемых cssmin,
затем uglifyjs и htmlmin.
Поэтому мне нужно установить эти три модуля узлов в дополнение к usemin-cli.
И я собираюсь установить это локально в свой проект,
поэтому npm install —save-def.
Таким образом, они будут запомнены в моем файле package.json.
Итак, давайте продолжим и завершим установку.
Теперь, когда я установил usemin и
связанные модули узлов, мне нужно сделать некоторое преобразование
в мой файл index.html и остальные HTML-файлы.
Таким образом, usemin node_module распознает, что эта группа представляет
собой кучу файлов CSS, которые должны быть сжаты, вычислены и проверены.
Аналогично, это группа файлов JavaScript, которые должны быть углифицированы
, объединены и объединены вместе.
Поэтому, чтобы помочь работе пакета
usemin, мне нужно добавить немного кода в мой файл index.html.
Так что прямо перед первой ссылкой,
я собираюсь добавить здесь отметку,
которая говорит! — сборка:css.
Теперь, это! —, как вы узнаете,
является комментарием с точки зрения html.
Поэтому внутри этого комментария я собираюсь включить, что эта конкретная строка
будет использоваться меню использования, чтобы распознать блок
кода, который указывает все файлы CSS, которые нужно передать.
Поэтому я говорю build.css, а затем я
укажу имя файла как css/main.css.
Это синтаксис для указания.
Это означает, что эти блоки файлов CSS будут объединены вместе,
а затем конкатенированы, минимизированы, а затем помещены в этот файл под названием main.css.
И тогда этот блок будет идентифицирован с другой стороны, сказав: «
Дефис», хорошо, извините.
Я забыл включить двойное тире в конце.
Вот почему это не поворачивало цвета.
Поэтому иногда вы счастливы, что ваш
редактор указывает на потенциальные ошибки, которые вы, возможно, совершаете.
Так что прямо там я бы сказал endbuild, а
затем — правая скобка там.
Теперь, что бы ни было между этой сборкой и
endbuild, эта группа будет рассматриваться как единица для
объединения нашим модулем usemin npm там.
Смотрите синтаксис, используемый в модуле usemin.
Мне нужно сделать то же самое преобразование в contactus.html и aboutus.html.
Так что я собираюсь скопировать этот
здесь тот ленивый, какой я есть.
Я просто скопирую и
вставьте в contactus.html, а
затем также aboutus.html там.
Аналогичным образом, возвращаясь к index.html,
я скопирую этот inbuild, а затем также скопирую его в
данные contactus.html и aboutus.html.
Ладно, давайте сохраним изменения во всех файлах.
Затем, возвращаясь к index.html.
Я собираюсь повторить то же самое внизу для моих
сценариев JavaScript, которые я включил туда.
Итак, перейдя на дно здесь,
что мне нужно сделать здесь,
это указать <! — сборка js,
и я скажу js/main.js.
Двойной дефис, косая черта.
Итак, это начало блока, а затем окончание указывается,
Build, хорошо?
Поэтому с этими изменениями теперь мой файл index.html готов,
и я должен сделать то же самое преобразование в contactus.html внизу.
И aboutus.html также внизу.
Аналогично, это enbuild скопировано в. В
contactus.html и aboutus.html, а затем сохраните все файлы.
И это готовит наши HTML-файлы для
преобразования, чтобы подготовить папку распространения.
Эти файлы останутся такими, но затем преобразованные файлы будут помещены в
папку распространения, созданную из этих файлов.
Теперь, как только мы закончим это, давайте настроим несколько сценариев.
Отправляясь в package.json, я настрою свой следующий скрипт под названием usemin.
И тогда это говорит usemin,
contactus.html -d dist, это синтаксис для
указания -d dist, что означает, что место назначения для
этой папки дистрибутива dist.
И тогда я бы сказал htmlmin, это также минимизирует HTML-файл.
Таким образом, он удалит все посторонние пробелы и комментарии из HTML-файла.
Но они сжимают его так
, чтобы он содержал минимальное количество символов там.
Мы посмотрим на результат после завершения и сделаем трансформацию там.
Так что и тогда, не только это,
а затем htmlmin, а затем сказать
-o dist/contactus.html и
&&, это означает, что
после этого будет больше.
Тогда я скажу usemin,
затем aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Так что это второй для преобразования файла aboutus.html.
И тогда &&, это длинный скрипт,
usemin index.html,
нам нужно преобразовать все файлы.
Поэтому мне нужно явно указать каждый из них.
usemin не принимает Wild-карты,
поэтому я должен указать холдинг, как [неразборчиво].
И поэтому usemin index.html
-d dist —htmlmin
-o dist/index.html.
И затем я положил запятую, потому что я собираюсь ввести следующий скрипт,
который называется build.
Таким образом, этот скрипт сборки создаст мою папку распространения.
Поэтому, чтобы создать мою папку распространения,
первое, что я собираюсь сделать, это npm запустить чистый.
А затем npm запускает копирайты.
Вы уже видели эти два в действии раньше,
тогда я скажу, что npm run imagemin для создания свернутых изображений,
а затем я бы сказал, что npm run usemin.
И этот конкретный скрипт создаст мою папку дистрибутива,
содержимое которой затем может быть скопировано на мой веб-сервер, чтобы решить мой шаг.
Сохраните изменения.
Давайте посмотрим, как мы создаем сайт.
На этом этапе, чтобы создать наш веб-сайт и
командную строку, просто введите npm run build, а затем просто выполнить.
Этот скрипт, который, в свою очередь, выполнит набор
из любого скрипта, который, в свою очередь, завершит весь набор
задач, которые должны быть выполнены, чтобы подготовить мою папку распространения.
Итак, давайте продолжим и запустим эту вещь, а
затем это будет проходить через все различные скрипты там.
Это займет несколько минут, и когда он будет завершен,
папка распространения будет готова к развертыванию на веб-сервере.
Перейдя в наш редактор,
теперь вы увидите, что папка дистрибутива уже готова.
Внутри папки дистрибутива вы увидите три файла индекса,
а в папке CSS вы увидите один файл с именем m ain.css,
который содержит все Bootstraps CSS, Bootstraps CSS
и код CSS, который вы создали.
И папка JS будет содержать main.js,
который содержит Bootstrap, jQuery и
всю кучу кода JavaScript, объединенных вместе в один файл.
Изображение будет содержать оптимизированные изображения, а шрифты, очевидно,
вы видели ранее, содержат файлы шрифтов.
Теперь давайте посмотрим на index.html, который был создан здесь.
Поэтому, когда вы посмотрите на index.html, который был создан здесь,
вы заметите, что все это буквально нечитаемо,
потому что, когда вы сделали HTML min, он лишил все посторонние
комментарии, он лишил все пробелы, а
затем создал весь этот запущенный набор символов.
Для компьютера это не имеет никакого значения, потому что он будет отображать эту
веб-страницу также.
Для нас с тобой это имеет значение, потому что мы не можем прочитать это легко.
Таким образом, это то, что минимизация вызывает ваш HTML-файл.
Давайте посмотрим на main.css.
Когда вы смотрите на main.css, вы видите, что все это хрустает
в один блок, когда вы идете вниз.
Если вы достаточно храбры, спуститесь вниз, а затем вы увидите,
Вы увидите часы специально написанные
классы CSS прямо внизу здесь.
Прямо там, ты узнаешь пуговицу карусели и другие вещи
, темные и другие вещи там, так что все обжато.
Вот что минимизация, и стоит.
Main.js, то же самое.
Нечитаемый код там.
Их компьютер, без разницы.
Таким образом, наша папка дистрибутива теперь завершена.
Давайте проверим нашу папку дистрибутива.
К счастью, наш световой сервер уже работает.
Итак, что я собираюсь сделать, это перейти в браузер, а
затем проверить готовый к индексу файл CLM в этой папке дистрибутива, чтобы
узнать, правильно ли он отображается или нет.
Перейдя в браузер, в моей адресной строке я напечатаю,
dist index.html, и
обратите внимание, что этот конкретный файл является файлом дистрибутива,
который был создан, и он содержит точно то же самое и
визуализирует точно так же, как наша оригинальная веб-страница, которую мы создали.
О, аналогичным образом, обратите внимание, что этот aboutus.html из
папки дистрибутива, и это отображается точно так же, как
и прежде, а также файл contactus.html.
Все работает отлично.
Итак, теперь все, что вам осталось сделать, чтобы развернуть вашу веб-страницу
или ваш сайт, это просто скопировать содержимое из папки dist,
а затем загрузить его на ваш веб-сервер,
а затем ваш веб-сервер работает и работает, обслуживая ваш веб-сайт.
С этим мы завершаем это упражнение.
В этом упражнении мы увидели, как мы можем использовать
скрипты NBM для создания и развертывания нашего веб-сайта.
Это может быть подходящее время для
вас, чтобы сделать комментарий с сообщением NPM Сценарии, часть 2.
[ МУЗЫКА]