Скачать PhpStorm можно на официальном сайте: https://www.jetbrains.com/phpstorm/

Настройка pug / Jade Watchers.

Для начала нам нужно установить поддержку pug.

PhpStorm -> Preference -> Plugins

Дальше ищем плагин Pug (ex- Jade) и устанавливаем его.

Чтобы правильно настроить в PhpStorm вочер pug делаем простые манипуляции в настройках:

PhpStorm -> Preference -> Tools -> File Watchers

Добавляем вочер Pug и заполняем настройками как на скриншоте:

Важно в аргументах поставить галочку на против Track only root files

Также нужно заполнить аргументы (Arguments):

--pretty --out ../ $FileName$

—pretty — этот аргумент означает что выдаваемый html код будет структурированный. Если этот параметр не поставить то код будет в одну строку.
—out ../ — это путь куда будет генерироваться html код. ../ — означает на одну папку выше чем текущий файл.

Настройка less Watchers.

Чтобы правильно настроить less вочер идем по тому же пути что и pug.

PhpStorm -> Preference -> Tools -> File Watchers

Вводим настройки что на скриншоте:

Опять же важно поставить галочку на против Track only root files чтобы не создавать мусора, и следить только за основным файлом, и не учитывать подключенные файлы.

Чтобы выбрать папку где будет копмилироваться css файл, настраиваем параметр Output path to refresh:

../css/$FileNameWithoutExtension$.css

Эта настройка скажет что нужно выйти на папку выше создать там папку css и сохранить там сгенерированный файл.

Также есть версия этого вочера где генерируется map. В таком случае оставляем все как есть кроме поля Arguments:

$FileName$
../css/$FileNameWithoutExtension$.css

Если нам надо сжать css файл в одну строчку нам необходимо дополнение к less. Его можно установить этой командой в командной строке:

npm install -g less-plugin-clean-css

после этого в настройках аргументов пишем опцию:

--clean-css --no-color $FileName$

На этом все, вочеры pug и less настроены и можно приступать к работе.

Настройка SASS/SCSS Watchers.

Все похоже как в настройке less только в аргументах пишем:

--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --style expanded

Если у вас есть дополнения или новые идеи к этой статье, пишите их в комментариях. Также для того чтобы написать на нашем сайте свою статью — у нас открыта регистрация по ссылке http://wiki.pwodev.com/wp-admin

Сообщение Настройка PhpStorm pug (jade) и less Watchers появились сначала на Wiki | PWODEV.

1. Для начала создадим файлик базы данных. Назовем его db.pug.

2. Поместим в этот файлик небольшой массив данных (Синтаксис такой же как у JSON)

- var db_array = [
        {
            id: '1',
            title: 'The title 1',
            content: 'The content 1'
        },
        {
            id: '2',
            title: 'The title 2',
            content: 'The content 2'
        },
    ]

3. Теперь заходим в файл где нам нужно вывести повторяющиеся блоки и добавляем там вывод этого массива:

each val in db_array
    .array_item_block(id=val.id)
        .item_title!= val.title
        .item_content!= val.content

4. Теперь в html варианте мы увидим следующее:

<div class="array_item_block" id="1">
    <div class="item_title">The title 1</div>
    <div class="item_content">The content 1</div>
</div>
<div class="array_item_block" id="2">
    <div class="item_title">The title 2</div>
    <div class="item_content">The content 2</div>
</div>

Теперь возьми себя в руки и протестируй все у себя локально, и если что-то пойдет не так — напиши это в комментариях. 🙂

Сообщение Pug (Jade) — Database, Loop повторяющихся блоков появились сначала на Wiki | PWODEV.