Автоматизируем рабочий процесс web-разработчика с помощью Grunt.js


Достаточно давно уже (по меркам индустрии разработки ПО) веб-разработка разделилась на 2 отрасли: Серверная часть (backend) и Клиентская часть (frontend).

Как это ни странно, но до сих пор не все признают это разделение. Однако развитие веб-технологий в сторону клиентской части, вынуждает этих ретроградов выделять отдельных сотрудников на задачи клиентской части, независимо от того хотят они этого или нет. Прогресс не остановить, и теперь стало просто физически невозможно одному сотруднику тянуть на себе все задачи как клиентской, так и серверной части. Более того, сама клиентская часть разрослась до того, что приходится автоматизировать множество рутинных задач и этапов разработки frontend части. Один из таких способов автоматизации это использование сборщиков пакетов на основе javacript и технологии Node.js. Основные задачи, которые можно автоматизировать с помощью Grunt.js:

  1. Собрать файлы всех вендорных библиотек в один файл, чтобы уменьшить количество обращений к серверу; минификация файлов;
  2. автоматическая перезагрузка страницы в браузере, при изменении исходника;
  3. очистка кэша.

Также, в сети можно найти еще множество вариантов применения этой технологии. Я же, поделюсь тем, что я использую в своей повседневной работе.

Вкратце сценарий рабочего процесса у меня такой:

  1. При добавлении вендорной библиотеки, она автоматически добавляется к общему файлу vendor.js, который минифицируется и кладется в файл js_min/vendor.min.js.
  2. При изменении рабочего файла модуля, после сохранения, этот файл минифицируется и кладется в каталог js_min/_modules/N.min.js, где N - название файла источника.
  3. При добавлении, или изменении, вендорного файла стилей, он совмещается со всеми остальными в файл vendor. css, минифицируется и кладется в каталог css_min/vendor.min.css.
  4. При изменении, рабочего файла стилей, после сохранения, он минифицируется и кладется в каталог css_min/styles.min.css.
  5. При изменении любого файла исходного кода проекта, автоматически перезагружается страница проекта открытая в браузере.
  6. После каждого сохранения очищается содержимое каталога cache/

Инструкцию о том как пользоваться Grunt.js приводить не буду, проект отлично документирован, всю нужную информацию вы можете найти на официальном сайте: Проект Grunt.js

Тут, я предоставлю свой файл настроек grunt (gruntfile.js), который вы можете использовать как основу для своих проектов.

Собственно вот мой Gruntfile.js

Мой Gruntfile.js на github.com

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


комментарии: