<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

Сборка статического сайта в 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.