Grunt для начинающих (johncms, mobicms)

Итак, решил написать статью, доходчивую для тех, кто вообще может пару раз читал упоминания такого названия как Grunt, но не знает, что это такое, а тем более пользоваться им вообще не умеет.
---
К сожалению Русскоязычных статей почти нет, на память приходит только эта, довольно старая, но полезная для понимания что же такое Grunt?
---
Коворя короче - Grunt это система автоматизации рутинных задач. Типа .bat файла, или РНР скрипта в столбик. Но на самом деле система намнрго более продвинута и расширяется с помощью огромного к-ва имеющихся дополнений (модулей). С помощью доустановки нужных модулей можно собрать любую конфигурацию под свои нужды.

ВНИМАНИЕ!
Данная статья для реальных разработчиков, кто знает, что такое репозиторий, умеет поковыряться в скриптах и хочет изучить что-то новое. Простым сайтовладельцам, желающим просто побыстрее получить новые разработки, советую дальше не читать, ибо будет взрыв мозга.

УСТАНАВЛИВАЕМ GRUNT
Grunt сам по себе является JS скриптом и работает в среде Node.js
Не стоит пугаться этого "страшного" и всем известного имени. Весит он мало, в памяти не сидит и никаких ресурсов от системы не отжирает, пока Вы его не запустите. Да и сами скрипты для него Вам писать не придется. Понадобится только несколько раз воспользоваться коммандной строкой при установке Grunt.

Итак, приступаем к установке:

1) Идем сюда: https://nodejs.org/en/ скачиваем и устанавливаем Node.js
Процесс простой и интуитивно понятный, проблем не должно возникнуть.
Ставьте любую из версий, но для надежности лучше LTS

2) После установки Node.js проверяем правильность установки и его работу.
Для этого открываем командную строку и вводим команду npm
Должна высветиться краткая инструкция по использованию NPM. Если это так, то переходите к другому пункту. Если нет (пишет, что команда не найдена), значит Node.js установлен неправильно.

3) Далее, устанавливаем сам Grunt.
Для этого, открываем командную строку и вводим npm install -g grunt-cli Установится сам Grunt и на этом все подготовительные работы завершены.

Не сложно, не правда ли?
Далее напишу, как работать с Grunt в конкретном проекте, на примере JohnCMS 7

Выше мы установили Grunt, но это только так сказать его "ядро", он пока ничего не знает о конкретных требованиях нашего проекта, пользоваться им пока еще нельзя и никакой помощи пока что он нам не окажет. Нам предстоит "познакомить" Grunt с нашим проектом и привести его в боеготовное состояние, чтоб им наконец уже можно было пользоваться.

Для этого в начале немного теории (только для ознакомления, работать с ней Вам не придется).
Как знать, что проект требует Grunt и какова его конфигурация? Что мы с помощью него можем делать?
Для этого нам надо заглянуть в репозиторий, в самый корень нашего проекта: https://github.com/john-cms/johncms-next
Там лежат два файла, которые нас интересуют, это package.json и Gruntfile.js

Первый файл package.json используется NPM установщиком Node.js, грубо говоря - это инсталлятор https://github.com/john-cms/jo ... .json В разделе "devDependencies" там записаны те модули Grunt, которые будут использоваться в нашем проекте и которые надо установить.

Файл Gruntfile.js это уже и есть наш главный конфигурационный командный файл для Grunt. Именно в нем описано все поведение и те команды, которые потом будет выполнять наш Grunt.
Подробности описывать не буду, для этого есть мануалы, а перейдем уже к самой интересной части

УСТАНОВКА GRUNT НА ПРОЕКТ
1) Переходим в корневую папку нашего проекта, где лежат файлы package.json и Gruntfile.js
2) Открываем командную строку (в вышеуказанной папке).
3) Вводим команду npm install
Если выше все сделали правильно, то установщик начнет скачивать нужные NPM модули и их зависимости. Все проходит на автомате, Вам вмешиваться в процесс не надо.

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

ИСПОЛЬЗУЕМ GRUNT (на примере JohnCMS 7)
Итак, переходим к самой интересной части: практическое использование
Мы скачали себе из Гитхаба JohnCMS 7, с помощью Composer установили нужные зависимости и хотим собрать дистрибутив. Вроде бы чего тут сложного? Заархивируй папку с проектом и все.

Но это НЕ ВСЕ, таким "тупым" копированием у нас в дистрибутив попадет много чего ненужного, увеличивающего вес, да и вообще, того, что не должно попасть ко всем (к примеру Ваши локальные конфиги с паролями). Как писали в другой теме, размер архива получился более 8 мегабайт, хотя реально он должен быть около 2,5. Посему, все приходится вычищать руками, процесс довольно однообразный и нудный.

Посему, логично было поручить подобное Grunt
===
Допустим выше вы все сделали правильно и установили Grunt.
Теперь, в папке проепкта открываете командную строку и вводите grunt distributive
Через пару минут, у Вас в папке /dist будет лежать готовый (причем зазипованный) дистрибутив, где уже все вычищено и приведено в товарный вид.

спасибо за статью четко все понятно

Классно! Азы выучили теперь в перед...

Альк, может проще было бы https://getcomposer.org/doc/ar ... rs.md + composer create-project ? Удобная штука, не требует NodeJS и расширяется на чистом PHP. Еси хочешь, могу помочь с этим.

В качестве примера использования можешь попробовать установить:
composer create-project zendframework/skeleton-application

# Delphinum (24.12.2016 / 13:41)
Альк, может проще было бы https://getcomposer.org/doc/ar ... rs.md + composer create-project ? Удобная штука, не требует NodeJS и расширяется на чистом PHP. Еси хочешь, могу помочь с

А при чем тут Composer?
Мы же говорим про Grunt, он не имеет никакого отношения к РНР и работает в среде Node.js
У него свой установщик NPM, именно с него черпали вдохновение разработчики Композера https://ru.wikipedia.org/wiki/Composer

AlkatraZ, а тебе действительно нужен grunt? Если ты не планируешь много JS и CSS (много в смысле какой нить Angular + Less), то лучше откажись от grunt, поверь, гемора будет больше чем пользы. Если тебе нужен grunt просто для подготовки диста, то composer умеет делать то же самое.