В первой части этой серии статьей я дал быстрый обзор Grunt и показал, как работать с ним. Также я поговорил о различных технологиях, которые требуются для использования Grunt. Затем я показал, что собой представляет Gruntfile, и какие задачи он содержит в себе.

Теперь пришло время поговорить о том, как использование Grunt может улучшить процесс разработки WordPress тем и плагинов.

Быстрая настройка проекта

В Grunt и npm мне лично нравится то, что как только вы запускаете свой проект, все зависимости проекта автоматически документируются. Это очень удобно для команд разработчиков и проектов с открытым кодом. Кому захочется писать документацию о том, как настроить рабочую область, верно?

package.json

Во-первых, в вашем проекте должен быть файл package.json. Вам понадобится настроить название проекта, версию и описание. Мы расскажем об этом подробнее в следующей статье, а пока вот простой пример:

{

"name": "project-name",

"version": "1.0.0",

"description": "Awesome project"

}

Как только вы зададите все это, при установке Grunt плагина вам нужно будет добавить –save-dev в самый конец команды, чтобы плагин был указан в вашем файле package.json в разделе devDependencies. К примеру, если я хочу добавить плагин grunt-contrib-watch к своему проекту, я должен буду запустить следующую команду:

npm install grunt-contrib-watch --save-dev

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

{

"name": "project-name",

"version": "1.0.0",

"description": "Awesome project",

"devDependencies": {

"grunt-contrib-watch": "~0.5.x"

}

}

Если вы захотите установить другие плагины Grunt и добавите в конец команды –save-dev, то в таком случае они будут отражены в объекте devDependencies.

Установка npm

Зачем это нужно? В чем польза npm? Как я уже отмечал ранее, npm отвечает за автоматическое документирование зависимостей вашего проекта. Как только все плагины будут установлены и добавлены к вашему файлу package.json, человек из другой команды разработки сможет легко выполнить команду npm install, после чего будет установлено все, что требуется для вашего проекта.

Вы можете проверить это следующим образом: удалите всю вашу папку node_modules и запустите npm install. В итоге вы увидите, что все, заданное вами, установится автоматически.

Примечание: возможно, вам понадобится добавить папку node_modules к вашему файлу .gitignore, чтобы не раздувать размер хранилища.

Отслеживание изменений

В разных проектах я использую разные плагины Grunt, однако один из плагинов, который я обычно всегда устанавливаю – это плагин grunt-contrib-watch. Этот плагин следит за файлами проекта и запускает любые задачи, которые вы определили для данного файла или типа файлов.

Один из примеров: отслеживание любого JS-файла. Когда вы вносите изменения в такой файл и сохраняете его, вы можете запускать в Grunt задачи JSLint, concat и minify. Вы можете задавать порядок задач – когда одна из них выполнится, сразу же запустится другая. Если какая-либо из них не будет выполнена, то вся последовательность задач прекращается.

CodeKit имеет похожую возможность, однако он выполняет все ваши задачи. К примеру, если вы внесли изменения в SASS или LESS файлы, то CodeKit выполняет не только установленные задачи, но и задачи вашего JS-файла. Задача отслеживания в Grunt дает вам больше управления над тем, как выполняются задачи, когда определенные файлы или типы файлов были изменены.

Создание произвольных задач

Наряду с задачами Grunt для установленных плагинов вы можете создавать свои собственные задачи. Чаще всего я задаю три следующие задачи при запуске проекта: default, setup и build.

Default

Задача default будет запускаться тогда, когда вы введете «grunt» в командной строке. Чаще всего я передаю значение по умолчанию задаче отслеживания. Вы можете добавлять любые задачи, которые вы хотите выполнить.

Setup

Задача setup обычно выполняет то, что происходит при первом запуске вашего проекта. Чаще всего я использую Bower для загрузки сторонних библиотек (как, к примеру, Bootstrap), поэтому мне нужно получить их, после чего запустить задачу copy для перемещения некоторых файлов в мой проект, а затем запустить начальную компиляцию LESS- и JS-файлов.

Build

Задача build обычно запускается перед выпуском или распространением проекта. Я всегда выполняю ее, чтобы убедиться, что все связано между собой, минимизировано и сжато. Прекрасный пример – запуск grunt-contrib-imagemin для оптимизации всех изображений в вашем проекте. Еще один пример – использование grunt-contrib-compress для создания zip-файла вашей темы, чтобы ее можно было быстро установить через панель администратора WordPress.

Заключение

Grunt – прекрасный инструмент для команд разработчиков. С его помощью вы можете как автоматически документировать все зависимости, так и задавать свои собственные задачи. Используя Grunt для автоматизации разных задач в своем проекте, вы сможете сильнее сфокусироваться на создании своей темы или плагина WordPress.

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