Сегодня многие фронтэнд разработчики тратят много времени на изучение таких технологий, как Sass, LESS, HTML и JavaScript. В последние годы интерес к веб-разработке вспыхнул с новой силой, поскольку появились новые удивительные инструменты, такие как Grunt.

В данной серии статей я планирую показать вам, что собой представляет Grunt и как с его помощью улучшить разработку тем и плагинов WordPress. Мы установим Grunt и подготовим его для использования в нашем новом проекте. Также мы рассмотрим доступные инструменты командной строки.

Что представляет собой Grunt?

Grunt – это инструмент автоматизации для фронтэнд-разработчиков. Он написан на JavaScript, поэтому, если вы знаете этот язык, то вы сможете быстро начать работу с Grunt. Вот описание, взятое с сайта Grunt:

Одним словом: автоматизация. Упрощается выполнение повторяющихся задач, таких как минимизация, компиляция, тестирование модулей, линтинг и т.д. После настройки Grunt вы сможете избавиться от рутинной работы, не прилагая практически никаких усилий.

Grunt – это инструмент, не зависящий от операционной системы, т.е. вы можете использовать при разработке на Mac, Windows или Linux. Он очень удобен для крупных команд девелоперов, которые создают свои решения сразу под разные платформы. Установка, а также последующее использование Grunt – удивительно простые шаги. Мы раскроем их в нашей следующей статье данной серии.

Node.js

Если вы не работали или не слышали про Node.js, то это – JavaScript-платформа, превращающая JS в язык общего назначения. Интерес к Node.js сильно вырос за последние несколько лет; такие инструменты, как Grunt и Bower, ускорили процесс принятия Node.js. Вот описание Node.js с официального сайта:

Node.js – это платформа, основанная на движке V8, позволяющая создавать быстрые, масштабируемые сетевые приложения. Node.js использует событийную, неблокируемую модель ввода-вывода, которая позволяет сделать эту платформу легкой и эффективной, идеальной для информационно емких приложений реального времени, создаваемых под разные устройства.

Node – лишь одно из условий использования Grunt. Вам нужно будет установить Node на вашу машину и, возможно, на ваши серверы. Grunt использует npm для установки и обслуживания плагинов. Вы можете узнать больше о требованиях Grunt на странице Getting Started.

Gruntfile

Как только вы установите задачи для своего проекта, вам понадобится их выполнить. Для выполнения задач используется Gruntfile.js. Он определяет, какие задачи должны быть включены, а также какие опции вы задали для их выполнения.

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

Задачи

Задачи – это именно то, в чем, по моему мнению, скрывается сила данной платформы. Задача – это просто способ выполнить группу плагинов. Вы можете определить задачу по умолчанию, которая будет выполняться, когда вы запустите `grunt`. Вы можете использовать отслеживание задач, т.е. вы можете автоматически выполнять задачи или плагины при изменении определенных файлов в вашем проекте.

Я опишу задачи подробнее в следующей статье.

Заключение

Grunt – это инструмент, с которым вы обязательно должны быть знакомы, если вы являетесь фронтэнд-разработчиком WordPress. Вот цитата с сайта Grunt, которая прекрасно иллюстрирует этот факт:

Экосистема Grunt огромна, она растет с каждым днем. Благодаря сотням плагинов, Grunt позволяет автоматизировать практически все, что угодно, прилагая минимум усилий. Если кто-то еще не создал то, что вам требуется, вы можете сами написать и опубликовать свой собственный Grunt плагин в npm – это очень просто.

Если вы еще не начали использовать Grunt в своих проектах, вам обязательно следует рассмотреть такую возможность.

Источник: code.tutsplus.com