Теперь, когда у нас есть понимание
различных шагов, связанных с созданием и развертыванием нашего сайта,
а также краткое введение в сценарии NPM в предыдущей лекции,
давайте глубоко погрузимся в разработку
сценариев NPM для автоматизации многих задач, о которых мы говорили ранее.
Как вы видели в предыдущей лекции, у
нас уже есть несколько сценариев NPM, которые мы включили в наш файл package.json,
один для запуска облегченного сервера и второй
для преобразования кода SCSS в CSS.
В этом упражнении и следующем
мы рассмотрим сценарии NPM более подробно.
Чтобы начать работу, давайте сначала сделаем некоторые уборку в файле index.html.
Переходя к файлу index.html,
мы видим, что у нас есть этот код JavaScript в нижней части этого файла index.html.
Я предпочел бы сохранить этот код JavaScript в
отдельном файле, который содержит все наши скрипты,
а затем включить этот файл в мой index.html.
Для этого давайте создадим здесь другую папку с именем js.
И в этой папке js
я собираюсь создать новый файл с именем scripts.js.
И перейдя к index.html,
я собираюсь просто вырезать этот код JavaScript отсюда, а
затем вставить его в файл scripts.js,
а затем сохранить изменения в файле scripts.js.
Теперь, когда мы переместили весь наш код JavaScript в свой собственный файл,
я собираюсь теперь включить этот файл JavaScript в мой index.html прямо там.
Я бы сказал <script src =
«js/scripts.js» Таким образом,
весь мой код JavaScript теперь включен обратно в мой файл index.html.
Таким образом, мой файл index.html содержит весь html-код,
и весь мой код CSS и JavaScript отключены в своих собственных отдельных файлах.
Позвольте мне скопировать эту строку скриптов со страницы index.html,
а затем перейти на страницу aboutus.html,
прокрутите вниз до конца, где я включил
другие скрипты, а затем вставьте это.
Аналогичным образом, позвольте мне перейти на страницу contactus.html
и снова прокрутите вниз до нижней части файла там.
Позвольте мне вставить эту строку.
Давайте сохраним изменения, а затем перейдем к следующему шагу.
Следующий шаг, который я хотел бы сделать, - установить пару
модулей NPM, которые я собираюсь использовать для автоматизации некоторых задач.
Первый модуль NMP, который я собираюсь установить, называется onchange.
Этот модуль onchange будет смотреть файлы в моей папке проекта,
а затем всякий раз, когда эти файлы меняются,
он автоматически запускает задачу, которая должна быть выполнена.
Таким образом, например,
если я настрою часы окончания кавычки на некоторых файлах,
например, в моем SCSS-файле,
то каждый раз, когда я
внесу изменения в свой SCSS-файл, он автоматически будет перекомпилирован в соответствующий CSS-файл. У
нас уже есть скрипт, который выполняет перекомпиляцию.
Так что все, что мне нужно сделать, это настроить часы на этом конкретном файле.
Теперь здесь я собираюсь использовать модуль NPM под названием Onchange.
Существует еще одна модель NPM под названием Watch,
которую вы также можете использовать для той же цели.
В этом упражнении я собираюсь использовать модуль Onchange,
затем мы будем иметь дело с грантом и глотком в последующих уроках,
мы будем использовать модуль Watch для той же цели.
Кроме того, я также собираюсь установить еще один модуль NPM под названием параллельная оболочка.
Этот модуль Parallshell позволяет мне выполнять
несколько сценариев NPM в Parallellshells, как следует из названия.
Таким образом, несколько сценариев NPM могут быть одновременно
выполнены и позволяют мне следить за различными файлами,
а также выполнять другие задачи.
Таким образом, давайте установить эти два модуля NPM.
Мы собираемся установить их локально в этом конкретном проекте.
Поэтому, чтобы сделать это, я напечатаю npm install.
Я должен —save-dev, а затем я бы сказал onchange
и parallshell, а затем дождался установки этих двух модулей NPM.
Как только два модуля будут установлены,
я собираюсь включить пару сценариев NPM в мой файл package.json.
И я объясню вам причину, когда мы включаем эти сценарии.
Возвращаясь к файлу package.json,
сразу после этого SCSS,
я собираюсь включить еще один скрипт под названием «watch: scss».
И как следует из названия,
это будет следить за файлами SCSS.
Таким образом, здесь я вызову модуль onchange NPM, который я только что установил,
а затем я бы сказал один код «css/* .scss».
Таким образом, это означает, что наблюдение за всеми файлами SCSS, которые находятся в папке CSS.
Если какой-либо из них изменится,
то вы собираетесь запустить этот конкретный скрипт, и сценарий - «—npm
run scss», потому что
это сценарий, который будет выполнять перекомпиляцию моего SCSS-кода в соответствующий код CSS.
Таким образом, я установил часы для моего SCSS.
Очевидно, я могу ввести «часы nmp: scss».
И тогда он запустит скрипт там с модулем onchange,
поэтому он будет следить за этим.
Если вы выполняете это упражнение на компьютере с Windows,
вместо одной кавычки в сценарии,
вы должны заменить это обратной косой чертой и двойной кавычкой.
Аналогично, другая одиночная кавычка
также заменяет ее обратной косой чертой и двойной кавычкой.
Итак, вот как сценарий будет выглядеть на компьютере Windows.
Теперь я собираюсь использовать Parallshell
для запуска нескольких из этих сценариев, чтобы быть одновременно активными.
Поэтому я бы сказал «parallshell»,
а затем в кавычках
я бы сказал «npm run watch: scs».
Таким образом, Parallshell принимает несколько из них в качестве параметров,
каждый из которых находится в одиночных кавычках.
И второй - «npm run lite».
Таким образом, вы можете видеть, что этот Parallshell позволяет мне выполнять два сценария одновременно,
один для наблюдения за моим SCSS-файлом,
другой для запуска облегченной оболочки.
Если вы выполняете это упражнение на компьютере с Windows,
вместо одного кода в скрипте
вы должны заменить его обратной косой чертой и двойной кавычкой.
Аналогично, другая одиночная кавычка
также заменяет ее обратной косой чертой и двойной кавычкой.
Так вот как сценарий будет выглядеть на компьютере Windows.
Теперь, после внесения этих изменений,
позвольте мне сохранить изменения, а затем я пойду
сюда, а затем начну скрипт, который у меня есть здесь.
Я изменю это с «npm run lite» на «npm run watch: all».
И сохраните изменения здесь.
Таким образом, скрипты, которые мне нужны, теперь настроены.
Итак, теперь я могу пойти вперед и сделать
«npm start», и который в основном запустит эти два скрипта одновременно,
один будет следить за моими файлами SCSS, которые, в свою очередь,
вызовут компиляцию SCSS в CSS,
другой, который запускает мой облегченный сервер.
Теперь я начал на вкладке таблицы, а затем переместился в папку проекта,
а затем добавьте приглашение.
Я напечатаю «npm start».
И это должно вызвать
как мой облегченный сервер, который сохранит файлы из моей папки путаницы,
так и вызовет модуль Onchange, чтобы следить за файлами SCSS.
Чтобы помочь вам проиллюстрировать, как этот Onchange держит часы на моих SCSS-файлах,
то, что я собираюсь сделать, это перейти к файлу styles.scss здесь,
а затем я просто сохраню файл снова.
Теперь, когда этот файл сохраняется,
я не собираюсь вносить в него никаких изменений.
Я просто собираюсь нажать на сохранение в файле.
Таким образом, каждый раз, когда этот файл
будет изменен, вы увидите, что немедленно Onchange вызовет скрипт узла SAS для выполнения,
который скомпилирует файл из SCSS в CSS и создает здесь файл CSS,
а затем сохранит файл, который также вызовет
мою веб-страницу для перезагрузки его в браузер.
Таким образом, это, по сути, то, чего мы достигли, используя модуль Onchange, чтобы следить
за файлами, которые затем изменились,
автоматически запустит некоторые скрипты NPM.
Теперь это освобождает нас от опасений о необходимости вручную запускать эти задачи.
Например, если у вас есть набор задач, которые вы хотите запустить автоматически,
то некоторые изменения происходят.
Вы можете легко настроить такие задачи наблюдения, чтобы следить за этими изменениями.
Теперь я проиллюстрировал это одним примером.
В моем примере здесь
я только изменяю файлы CSS, которые должны быть скомпилированы.
Но позже мы работаем с фреймворками JavaScript.
Вы увидите, что вы можете инициировать компиляции, когда различные файлы изменились.
И все это можно легко управлять с помощью этих задач часов.
Будет ли это, мы завершим это упражнение.
Здесь мы научились настраивать еще несколько сценариев NPM
и автоматически запускать некоторые из сценариев с помощью модуля onchange NPM.
Мы также видели использование параллельного модуля оболочки для выполнения
нескольких сценариев NPM одновременно в нашем окне терминала.
Это хороший момент для вас сделать комментарий Git с сообщением «NPM Scripts Part 1».