Grunt для тех, кто считает штуки вроде него странными и сложными
Фронтенд-разработчикам часто советуют делать следующие вещи:
·Работать с маленькими кусками CSS и JavaScript кода, насколько это имеет смысл, а затем объединять их для продакшена.
·Сжимать CSS и минифицировать JavaScript с целью сделать файлы для продакшена как можно меньше по размеру.
·Оптимизировать изображения, чтобы уменьшить размеры файлов без потерь в качестве.
· Использовать Sass для написания CSS из-за всех полезных абстракций, которые он позволяет использовать.
Конечно, этот список далеко не полон, но это такие вещи, которые делать просто необходимо. Вы могли бы смело назвать эти советы задачами.
Бьюсь об заклад, вы наверняка уже что-то слышали про Grunt. Что ж, Grunt — это, по сути, планировщик задач. Grunt может делать все эти задачи за вас. Стоит лишь установить его, что, кстати, не так уж и сложно, и эти операции будут происходить автоматически, так, что вам про них даже не придётся вспоминать.
Но, давайте посмотрим правде в глаза. Grunt — одна из тех новомодных штук, которой пользуются все эти крутые парни, но которая на первый взгляд выглядит странно и пугающе. Я вас понимаю. И эта статья для вас.
Пресекаем заблуждения в зародыше
Возможно, вы слышали про Grunt, но, по какой-то причине, никогда с ним не работали. Я уверен, это предположение относится к большинству из вас. Я также уверен, что большинство ваших сомнений перечислены ниже.
Мне не нужно то, что делает Grunt
Возможно, так оно и есть. Проверьте-ка ещё раз тот список задач в начале статьи. Эти рекомендации не просто неплохо было бы выполнять. Они — жизненно важная часть процесса веб–разработки в наше время. Если вы их уже соблюдаете, это замечательно. Вероятно, вы используете для этого разнообразные утилиты. Grunt помогает собрать их все, так сказать, под одной крышей. А если вы их ещё не используете, то, возможно, стоило бы, и тут вам может помочь Grunt. Ну а потом, когда вы уже будете их использовать, Grunt может сделать для вас ещё большее, что, в конечном итоге, будет означать, что вы лучше делаете свою работу.
Grunt работает на Node.js, а я его не знаю
Вам и не надо знать Node. Точно так же, как вам не нужно знать Ruby, чтобы пользоваться Sass. Или PHP, чтобы пользоваться WordPress. Или C++, чтобы пользоваться Microsoft Word.
Вещи, которые делает Grunt, я и так могу сделать, по-другому
Правда? Они все собраны в одном месте, настроены так, что запускаются автоматически, когда понадобятся, и есть у каждого члена команды, который работает над проектом? Рискну предположить, что это не так.
Grunt — консольная программа, а я всего лишь дизайнер
Я тоже дизайнер. И я предпочитаю использовать в работе приложения с графическим интерфейсом, если, конечно, он существует. Но я не думаю, что у Grunt1 такой интерфейс появится в ближайшее время.
Степень, в которой придётся работать с командной строкой, примерно такая:
1.Перейти в папку с проектом.
2.Напечатать grunt и нажать Return.
После установки, которая, повторюсь, не такая уж и сложная.
Хорошо. Устанавливаем Grunt
Необходимое условие для установки Grunt - наличие Node.js. Если Node.js у Вас не установлен, не беспокойтесь, это очень легко. вы просто скачиваете установочный файл и запускаете его. Давайте, просто кликните по большой кнопке Install на сайте Node.js.
Сам Grunt устанавливается на каждый проект отдельно. Вам нужно зайти в папку проекта и создать небольшой файл под названием package.json в его корне.
Содержимое файла package.json должно быть таким:
{
"name": "example-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
Измените название проекта и укажите актуальную версию, главное, объявлениеdevDependencies должно остаться таким же, как есть.
Это то, как Node обозначает зависимости в проекте. В Node для этого есть специальный пакетный менеджер под названием NPM.
Как только package.json будет находиться в нужном вам месте, откройте терминал, и перейдите в папку проекта. Парни вроде меня, которые мало смыслят в терминале, делают это примерно так:
Далее запустите команду:
npm install
После того, как она будет выполнена, в проекте появится новая папка с именем node_modules.
Другие файлы, которые вы видите на анимации в корне моего проекта, README.md и LICENSE, находятся там только потому, что я собираюсь выложить этот проект на Github, они не относятся непосредственно к установке Grunt.
Последний шаг — установка Grunt CLI (command line interface, интерфейс командной строки). Это то, что заставит терминал обрабатывать команду grunt. Без неё запуск grunt вернёт ошибку «Command Not Found» («Команда или файл не найдена»). Она устанавливается отдельно по причинам эффективности. Иначе, если бы у вас был десяток проектов, пришлось бы устанавливать десять копий GruntCLI.
Установка GruntCLI — всего одна строчка в терминале. Просто запустите команду:
npm install -g grunt-cli
После этого следует закрыть и заново открыть окно терминала. Это вообще хороший подход для того, чтобы убедиться, что всё работает как надо. Типа как перезагрузить компьютер после установки новой программы в старые добрые времена.