Наверняка вы уже слышали о Grunt справа налево, в конференциях, даже ваша коробка уже использует его, но вы еще толком не знаете, что скрывается за этим абсурдным термином, достойным персонажа Warcraft. Либо это не очень серьезно. Grunt — это просто JavaScript Task Runner , инструмент, который позволяет создавать автоматизированные задачи на JavaScript. Очевидно, это не очень информативно, но в этом весь смысл этой статьи, объясняющей вам, что такое Grunt и почему он может быть вам полезен в рабочем процессе фронтенд -разработчика. Узнать подробнее об этом можно перейдя по ссылке https://kupereal.com/kb/web-development/poshagovaya-rabota-s-grunt.html.
Вам когда-нибудь приходилось регулярно вручную запускать, запускать и перезапускать такие процессы, как Sass, LESS , uglify — в основном препроцессоры или минификаторы? Разве это не больно? Не слишком ли больно говорить всем своим коллегам, как они должны работать, чтобы вы все были последовательны? Да ? Grunt решает подобные проблемы: уважая чертов рабочий процесс , гарантируя, что путь будет одинаковым для всех, и выполняя все это с помощью одной команды. Разве это не чертовски круто, ребята?
Вот довольно стандартный рабочий процесс :
- Скомпилируйте мой .scssen .css;
- Объединить мои *.jsв один файл;
- Минимизируйте (например, с помощью uglify) результат предыдущего действия.
Теперь давайте посмотрим, как это можно настроить через Grunt.
Средство
Во-первых, давайте установим Grunt . Обратите внимание, что Grunt находится в nodejs, и я предполагаю, что у вас уже установлен nodejs . С другой стороны, мы собираемся создать новый проект npm , чтобы зарегистрировать все пакеты, которые вы собираетесь установить.
Во-первых, вы должны установить пакет, позволяющий управлять Grunt из командной строки. Это Grunt ‘s Commander навалом. После этого установите Grunt локально в свой проект.
Ни много, ни мало, Grunt наконец-то установлен в вашем проекте.
Инициализация
Теперь необходимо создать файл конфигурации Grunt. Для этого мы создадим файл с именем Gruntfile.jsв корне вашего проекта.
Теперь у нас есть все необходимое для запуска нашего проекта. Наконец-то мы сможем заняться серьезными вещами. .scss Давайте вернемся немного назад, где мы объясняли, что мы хотим скомпилировать наш en в первую очередь .css.
