JavaScript

Grunt: автоматизация работы с JS проектами

Порой очень лениво и сложно выполнять одни и те же задачи раз за разом. Согласитесь, пару раз проверить проект линтом, сделать сборку и минифицировать ее можно руками, но если делать это постоянно… Не самый лучший вариант. Для таких задач существуют специальные инструменты, автоматизирующие долгий и нудный процесс. Знакомтесь - Grunt!

Установка

Прежде чем ставить Grunt, убедитесь, что у вас установлен Node.js. Если не установлен - следуйте данной ссылке, после чего можно перейти к процессу установки Grunt’a.

Sample code
1
$ npm install -g grunt-cli

Следует заметить, что хоть данная команда подготавливает к использованию команду grunt, сам Grunt еще не установлен.
Также я установил grunt-init, который позволяет быстро и легко инициализировать проект по некоторому заданному шаблону:

Sample code
1
$ npm install -g grunt-init

Далее нужно перейти в папку .grunt-init (На Windows у меня c:/Users/User/.grunt-init), и там установить шаблон, например шаблон нового npm-модуля:

Sample code
1
$ git clone https://github.com/gruntjs/grunt-init-node.git node

Создание проекта

Так как я сразу поставил утилиту инициализации нового проекта, мне не придется руками прописывать всю информацию в Gruntfile.js, я всего лишь выполню grunt-init node. После чего мне будет создан проект со следующей структурой (может отличаться):

Sample code
1
2
3
4
5
6
7
8
9
10
11
12
project
  |-  lib
  |   |-  File.js
  |- test
  |   |-  File_test.js
  |- node_modules
  |   |- папки зависимостей проекта
  |-  .gitignore
  |-  .jshintrc
  |-  Gruntfile.js
  |-  package.json
  |-  README.md

Как видим, всю работу мы проводим в File.js, тесты пишем в File_test.js, конфигурируем проект в package.json, настраиваем Grunt в Gruntfile.js и так далее.

Запуск

В папке проекта сначала нужно выполнить локальную установку Grunt:

Sample code
1
npm install grunt --save-dev

Затем уже можно выполнять grunt. Если система сообщает об отсутствии каких-то компонентов, нужно их также установить, например:

Sample code
1
npm install grunt-contrib-uglify --save-dev

Добавление задач

Так как Grunt работает в первую очередь с задачами, стоит научиться их конфигурировать и создавать. В качестве примера добавим минификацию готового проекта. Данную задачу решает grunt-contrib-uglify из примера выше. Так как командой из примера выше мы уже узнали, как ставить локально новые зависимости, мы можем перейти непосредственно к редактированию Gruntfile.js. Добавим задачу:

Sample code
1
grunt.loadNpmTasks('grunt-contrib-uglify');

Затем сконфигурируем:

Sample code
1
2
3
4
5
6
7
// Данный кусок кода находится внутри grunt.initConfig({ ... });
uglify: {
	dist: {
		src: '<%= concat.dist.dest %>',
		dest: 'dist/<%= pkg.name %>.min.js'
	}
},

Добавляем задачу в набор задач, выполняемых по умолчанию:

Sample code
1
2
// Default task.
grunt.registerTask('default', ['jshint', 'nodeunit', 'uglify']);

Если все сделано верно, при следующем запуске grunt мы получим на выходе минифицированный файл проекта.

Заключение

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

Ссылки