Сборка статического сайта в WebStorm с помощью NodeJS. Часть 2
В прошлой статье мы разобрались с теоретической частью сборки фронтенда сайта, а в этой рассмотрим, как на практике, организовать взаимодействие всех этих инструментов.
Для использования SASS в системе должен быть установлен пакет sass:
C:/> npm install -g sass
Пакет я поставил глобально (-g), чтобы иметь возможность работать простым указанием имени sass. Также в настройках Argument в WebStorm File Watcher у меня прописан точный путь к папкам в которых будет происходить отслеживание sass файлов и папки в которую эти файлы будут компилироваться.
$FileName$:$FileNameWithoutExtension$.css $ProjectFileDir$\src\sass:$ProjectFileDir$\dist\css
Вообще структура папок следующая:
D:.
├───.idea
├───dist здесь лежат собранные стили и страницы
│ ├───css стили
│ └───pages конкретные страницы
└───src
├───sass папки sass файлов
│ └───parts файлы sass, которые не должны компилироваться (начинаются с нижнего подчеркивания)
└───templates файлы шаблонов
├───pages страницы сайта
└───parts части страниц, который сами компилироваться не должны
Структура каталогов с папками и файлами будет выглядеть вот так:
D:.
│ package-lock.json
│
├───.idea
│
│
├───dist
│ │ index.html
│ │
│ ├───css
│ │ main.css
│ │ main.css.map
│ │
│ └───pages
│ contacts.html
│ products.html
│
└───src
├───sass
│ │ main.scss
│ │
│ └───parts
│ _card.scss
│ _grid.scss
│
└───templates
│ index.njk
│
├───pages
│ contacts.njk
│ products.njk
│
└───parts
_base.njk
_boostrap.njk
_card.njk
_footer.njk
_header.njk
_menu.njk
Как видите ничего чрезмерно сложного здесь нет, просто определенным образом организованная структура каталогов, которая, в общем говоря не является обязательной, т.е. вы сами вольны организовать ее так как вам будет удобно. Но тем не менее, определенная логика в структуре каталогов присутствовать должна.
Теперь, когда мы разобрались с файлам и каталогами, установили Sass, пора поставить шаблонизатор Nunjucks и Nunjucks-Cli. Оба этих пакета я также буду ставить глобально, также обратите внимание, что именно второй пакет даст нам возможность назначить наблюдатель изменений в WebStorm IDE, для автоматической перекомпиляциии файлов шаблонизатора *.njk в html и копирования их в каталог dist и dist/pages.
Также, обратите внимание, чтобы WebStorm понимал файлы *.njk - этот тип файлов надо добавить в список зарегистрированных расширений IDE. Путь к настройке в IDE Editor > File Types. В списке выбрать Twig и добавить к нему расширение. Теперь файлы с расширением *.njk будут распознаваться как Twig файлы, в них будет доступна подсветка и автодополнение.
Теперь для Nunjucks нам надо настроить наблюдатель File Watcher. Идем в Tools > File Watchers. Добавляем новый элемент в список. В открывшемся окне заполняем поле File Type как Twig, чтобы наблюдатель вызывался при изменении файлов шаблона. В поле Program вводим nunjucks, в поле Arguments следующее:
-p $ProjectFileDir$/src/templates -o $ProjectFileDir$/dist **/*.njk
Данные параметры указывают откуда брать файлы шаблонов и куда их сохранять после обработки, причем файлы шаблонов обрабатываются и во вложенных каталогах.
Итак, у нас все настроено, теперь при изменении файлов в src, будь-то sass или njk они будут автоматически собираться в dist**. Не хватает одного, автоматической перезагрузки страницы в браузере при пересборке проекта, т.е. нам нужна возможность так называемого Live Reload. Для этого воспользуемся еще одним пакетом Node - live-server. Также поставим его глобально.
C:/> npm install -g live-server
И запустим следующим образом:
C:/> live-server ./dist --port=9090
У live-server много разных параметров, но мы используем здесь лишь два: ./dist - путь в котором лежат отслеживаемые файлы и порт на котором работает наш сервер. Остается открыть браузер (адрес localhost:9090) и начать разработку. Изменения которые вы будете делать в файлах будут сразу отображаться в браузере.
Таким образом, из данной статьи Вы узнали как можно организовать сборку сайта из различных частей в IDE WebStorm при помощи Node.
-
Создано 05.12.2019 12:21:46
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.