Grunt

Запуск нескольких задач одновременно

После того как мы увидели как работают наши задачи, давайте сделаем нечто более эффективное и выполним всё сразу с помощью только одной задачи. Это гораздо лучше, чем отдельное выполнение grunt uglify, grunt jshint и т.д.

Компиляция Less в CSS

Для этого примера мы воспользуемся Less. Чтобы сделать то же самое для Sass вы можете использовать пакет grunt-contrib-compass. Вот наши настройки для компиляции Less-файлов. Как и в примере с минимизацией JavaScrip в параметрах определяются исходные и выходные файлы.

Минимизация CSS-файлов

Подобно минимизации JS-файлов настройки для такой задачи довольно простые. Мы уже это проходили, так что создайте такую конфигурацию.

Минимизация JavaScript-файлов

Можно сделать гораздо больше, чем просто минимизировать единственный файл — взять несколько файлов и уменьшать их все в один выходной файл. Это может ускорить наши сайты, поскольку мы обрабатываем только один JS-файл для посетителей.

Почему Gulp?

Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?

Приступая к работе с Grunt

Во время процесса веб-разработки возникает много задач, которые нам требуется периодически выполнять вроде минимизации JavaScript и CSS-файлов, модульного тестирования, проверки файлов на наличие ошибок, компиляции препроцессорных файлов (Less, Sass) в CSS и многое другое. Grunt предназначен для запуска задач, а значит повторяющиеся задачи, с которыми мы имеем дело каждый день, становятся автоматизированы.

Различные задачи для разных условий

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

Следим за изменениями и запускаем задачи

Задача watch будет выполняться каждый раз при изменении и сохранении файла. Всё, что нам надо сделать, это следить за определёнными файлами и сказать что делать, когда эти файлы изменятся. Давайте отойдём от базовой конфигурации build, которую мы использовали ранее и сделаем разделение на стили и скрипты. Мы делаем так потому, что хотим задать разные задачи для каждого типа файлов.

Установка и настройка Grunt

Чтобы задать настройки для Grunt мы воспользуемся файлом Gruntfile.js. Это то место, где по умолчанию хранится конфигурация для запуска.

Установка и настройка Grunt

Grunt является рабочей лошадкой в мире Node. Если вам нужно выполнять задачи, включите Grunt в работу. Если вы из мира Rails, Grunt похож на Rake. Существует масса документации о Grunt, но в этом руководстве я остановлюсь на основах, которые помогут вам в работе с приложением.