Немного вступления

Около года я пользовался онлайн редактором кода — JSFiddle, он отлично подходит для написания различных элементов кода на HTML, CSS и JavaScript, а также разработки функционала сайтов и приложений с использованием библиотек и других языков. Но совсем недавно я решил попрактиковаться в работе с HAML и PUG, поскольку они довольно востребованы на рынке и знаительно ускоряют работу веб-разработчика. И здесь я столкнулся с проблемой — JSFiddle не поддерживает эти языки. Вернее поддерживает только HAML. В веб-серфинге я нашел другой полезный ресурс — CodePen.io. Это не только очень удобный редактор, с поддержкой различных языков и большим количеством полезных функций, но еще и является неким сообществом, социальной сетью для веб-разработчиков. И самое главное в данной теме — он поддерживает PUG.

Pug — это препроцессор для html, шаблонизатор, написанный на javascript.

Если вы не знаете JavaScript, не спешите пугаться. Pug довольно прост. Сайт шаблонизатора написан на английском языке, но у вас не должно возникнуть трудностей с пониманием написанного. Я изучил документацию и за пару недель освоил простейшие функции, которые необходимы мне для работы. Сделав несколько маленьких страничек и проектов на pug, я влюбился в него.

Так как мне удобнее работать в Visual Studio Code (далее, Вижл студия или Вижла), мне, естественно, захотелось опробовать работу pug в ней. Однако, простого решения я не нашел. Подходящих расширений у этой IDE (Интегрированная среда разработки (англ. Integrated Development Environment)) пока нет. Здесь на помощь приходит Gulp. Давайте перейдем к разбору работы и настройке программы.

Как настроить pug в vs code при помощи Gulp?

Прежде всего вам необходимо установить Node.js и настроить свой проект, создав все необходимые файлы и папки.

Вам необходимо создать минимум три файла и папки:

• pug
  • index.pug
• gulpfile.js
• .gitignore

Я так же создал папку со стилями и разместил в ней файл style.scss, который позже преобразую в css и буду использовать на страницы.

• style
  • style.scss
  • style.css
  • style.css.map

Далее работаем по пунктам

• Переходим в консоль Вижлы и вводим команду npm init. Таким образом вы автоматически создадите файл package.json, в котором будет указана информация о вашем проекте и подключенные npm пакеты.
• Устанавливаем сам галп при помощи команды npm install --save-dev gulp
• После установки, у вас в проекте появится новая папка с npm пакетами node_modules. Необходимо ее скрыть при публикации вашего проекта. Для этого, откройте ранее созданный файл .gitignore, напишите в нем строку node_modules и сохраните файлик. Если вы обратите внимание, в файле package.json появится установленный вами пакет:

"devDependencies": {
    "gulp": "^4.0.0",

• Если у вас появился файл package-lock.json, внесите его в тот же .gitignore на новой строке.

• Далее, переходим на страничку пакета PUG, копируем код npm i gulp-pug и добавляем --save-dev.

• Переходим к файлу gulpfile.js

• В документации gulp-pug все просто и понятно написано. Копируем оттуда код и вставляем в наш файл.

• Я еще использую пакет для переименования, на случай, если мне припрет изменить название оригинального файла. Установить его можно так же, в командной строке вводим npm i gulp-rename --save-dev и жмем Enter.

В конечном итоге, ваш gulpfile.js должен выглядеть таким образом:

const 
    gulp = require('gulp'),
    pug = require('gulp-pug'),
    rename = require("gulp-rename");

gulp.task('pug-compile', function buildHTML() {
    return gulp.src('./pug/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(rename('./index.html'))
        .pipe(gulp.dest('./'))
});

Вот и все. Теперь вы можете писать код в файле .pug и переводить его в html формат. По завершению работы или для проверки введите в командной строке вот команду и нажмите Enter. У вас в коневой папке появится файл index.html с вашим содержимым.

Если у вас возникли вопросы, посмотрите репозиторий с файлами на GitHub и/или задайте вопросы ниже в комментариях.