Уменьшаем время разработки за счет Grunt

Published 3 года ago // No comments

Наверное не совру, если скажу, что большинство разработчиков ленивые. Они готовы автоматизировать буквально каждый шаг их разработок. И это правильно — тем самым значительно уменьшается время, которое мы тратим на разработку.

Такие задачи как сжатие JavaScript и CSS файлов, проверка файлов на ошибки, компилирование из предроцессорных файлов LESS, SASS готовых стилей CSS, Livereload и многое другое может быть успешно выполнено с помощью Grunt. Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. В данной статье будут расмотрены выполнения следующих задач с применением:

  • Проверка на ошибки JS файлов
  • Сжатие JS файлов
  • Компилирование LESS файлов
  • Сжатие CSS файлов
  • Выполнение определенных действий при изменение файлов

 

Установка Grunt и менеджера пакетов npm

Для использования Grunt потребуется установка Node.js. Установку последнего можно осуществить перейдя по следующей ссылке. Также в комплект установки входит менеджер пакетов npm. Для того, чтобы убедиться правильно ли были установлены Node и npm в командной строке нужно выполнить команды node -v и npm -v. Если отображаются их версии, значит все установлено верно.

Настройка проекта

Для работы Grunt нужно всего два текстовых файла, расположенных в корне вашего проекта:

  • Package.json — для того, чтобы менеджеру пакетов npm указать какие модули нужны нам для работы (ничего скачивать самостоятельно не нужно, они будут установлены автоматически)
  • Gruntfile.js — непосредственно сам файл настроек Grunt, здесь указываем какие модули будут нами использоваться и прописываем настройки для каждого из них

Файл Package.json выглядит следующим образом:

В нем следует указать название проекта, его версию и пакеты, которые мы собираемся использовать — в нашем случае это сам Grunt и плагин к нему для компилирования LESS файлов. Следующий файл это Gruntfile.js, его структура следующая:

Как я думаю вы заметили, что в нем тоже нет ничего сложного. Указываем какие плагины подгружать, в нашем случае это grunt-contrib-less и вешаем его на дефаулт событие — другими словами при наборе в командной строке grunt будет сразу же выполняться комплирование. Прописываем настройки для каждого из плагинов внутри initConfig. Вы, я думаю, будете удивлены, но все, все готово уже и настроено, осталось зайти в командную строку, перейти в нашу папку и прописать две команды.

  • npm install — установит все пакеты
  • grunt — запустит непосредственно сам grunt

Для того, чтобы остановить его работу нажимаем ctrl+C и затем Y.

Что еще важно знать?

Также в дополнение ко всему следует сказать, что не обязательно все плагины прописывать в registerTask для выполнения по команде grunt, к примеру если вам лишь изредка нужно компилировать файлы LESS то можно выполнить команду grunt less.

На этом у меня все друзья. Надеюсь статья оказалась полезной и у вас не осталось вопросов после ее прочтения. Если они возникли то, можете спрашивать в комментариях — я с удовольствием вам отвечу.