Сборка статического сайта в WebStorm с помощью NodeJS

При работе над фронтендом сайта из раза в раз приходится повторять одни и те же операции. Так, например, если Вы верстаете макет сайта, то алгоритм работы примерно следующий: сверстать макет страницы, добавить к нему стили, открыть в браузере, посмотреть на результат и так до тех пор пока Вы не придете к желаемому результату. Несмотря на то, что современные среды разработки предоставляют большое количество инструментов, позволяющих оптимизировать процесс разработки фронтенда, Вы не обойдетесь без использования хотя бы некоторых инструментов из мира NodeJS. Но NodeJS содержит так много пакетов для решения, по сути, одинаковых задач, что даже опытному разработчику бывает трудно разобраться со всем этим зоопарком инструментов, что же говорить о только начинающем разработчике, которому надо просто запустить среду разработки и начать.

Вот как раз на решение этой проблемы и нацелена эта статья. Из данной статьи и последующих статей Вы узнаете, как собрать статический сайт, в котором используются препроцессор SASS и шаблонизатор HTML Nunjucks. О первом инструменте говорить не буду, так как на сайте и так достаточно информации о нем, но а Nunjucks скажу, что это - шаблонизатор, который позволяет собрать из отдельных HTML кусочков - одну страницу. По своему синтаксису он сильно похож на Twig (и для Nunjucks и для Twig прообразам послужил шаблонизатор Python - Jinja2), о котором на сайте Вы также можете найти достаточно информации.

У Nunjucks также, как и у Twig доступны блоки и наследование, что как раз нам и надо. Вы можете спросить, а зачем использовать шаблонизатор на фронтенде, когда с этим отлично справляется и PHP в связке с Twig. Причина в следующем - при верстке макета сайта один и тот же HTML-код заголовка сайта, меню, подвала часто кочует из одно файла в другой простым копированием. Для небольшого сайта с небольшим количеством страниц такое допустимо, но если это крупный проект с десятками страниц, то Вы очень скоро поймете насколько нерационально, например, править один и тот же макет заголовка сайта в нескольких десятка файлах. А если требование к проекту со стороны заказчика не до конца определены, то вы просто обречены на адскую рутину. Но так быть не должно, надо стремиться к тому, чтобы изменение частей макета было бы как можно более централизованным. Далее я Вам покажу как можно этого добиться, но для начала, отмечу, что работу я веду в WebStorm IDE. Для SASS файлов IDE сама покажет Вам всплывающее окно с предложением настроить автоматическую компиляцию в CSS.

В настройках ничего сложно нет, за исключением того, что нужно правильно настроить пути к папке с исходниками SASS и к папке куда эти файлы будут компилироваться. В настройках наблюдателя (File Watcher) обязательно используйте переменные для указания пути к файлам, чтобы избежать в дальнейшем ошибок с их неправильным определением.

Таким образом в данной статье Вы узнали о тех инструментах, которые понадобятся для сборки сайта из отдельных шаблонов.А в следующей статье мы разберем как заставить все эти инструменты работать вместе.