Делаем жизнь проще, GruntJS (для новичков)

Что такое GruntJS

Большинство JS разработчиков уже используют какие-то инструменты компоновки для своих разработок, даже если не знают или не используют этот термин. Они объединяют файлы при разработке, уменьшают код JavaScript-а, чтобы ускорить загрузку страниц и конвертировать Sass, или уменьшают количество файлов в CSS для браузера, и много чего другого. Чаще всего это разные инструменты, что есть не очень удобно.

Grunt помогает управлять всеми этими шагами в одном месте и организовать сторонние компоненты.

И зачем нам это счастье?

Все ранее существующие инструменты имели свои основы в различных областях программирования. Поскольку они не были построены в первую очередь для JS разработчиков, у них были свои плюсы и минусы. Некоторые требуют знание других языков или использовать отдельные диалекты XML, которые нужно сначала изучить, а потом их не так уж и легко настроить.
Так почему бы не иметь инструмент, который специально для этого разработан, который написан на языке, который JS разработчики используют ежедневно, что делает его использование простым для них? Grunt полностью написан на JavaScript и работает на Node.js, он может быть использован на различных платформах.

Надеюсь поставить nodejs, не составит большого труда. Одна ремарка по этому поводу для пользователей windows: что бы использовать командную строку в полной мере для управления nodejs и его пакетами, советую поставить https://code.google.com/p/msysgit/ ^[1].

Grunt еще молод, но уже претерпел некоторые существенные изменения в недавно выпущенной версии 0.4. Теперь он состоит только из небольшого клиента командной строки и показа основной задачи. Все дополнительные функции основаны на плагинах, так что вы можете настроить его для особенных потребностей вашего проекта без каких-либо наворотов. Grunt и все подключаемые модули добавляются в директорию вашего проекта, чтобы убедиться, что все, что нужно, чтобы построить и поддерживать ваш проект, всегда остается на месте. Эти модули можно либо загружать вместе с проектом, или же если платформы для разработки будут отличаться, то лучше все используемые модули хранить в файле, грунт файле (об это чуть дальше).

Несмотря на то, что Grunt все еще довольно на ранней стадии развития, уже есть много плагинов, для (почти) всех ваших потребностей в области разработки:

Уменьшение JavaScript и CSS, интеграция предварительных процессоров для CSS и JavaScript таких, как Sass/Compass, Less and Stylus, CoffeeScript или LiveScript Сасс / Compass, оптимизация размера файлов изображения PNG и JPEG и автоматическое встраивание изображений, и многое другое.

Если вы планируете писать большие веб-приложения, Grunt также интегрирует оптимизации для Require.js и Google Closure Compiler и позволяет предварительной компиляции шаблонов Handlebars, Jade, Underscore, Mustache, Eco или Hogan. Также уже есть плагины для наиболее распространенных каркасов для тестирования таких, как Jasmine, Mocha, QUnit и Cucumber.
На все доступные плагины есть ссылки на сайте Grunt (и если кто-то публикует новый модуль Node.js с ключевым словом «gruntplugin», он автоматически добавляется в список).
Как вы видите, Grunt не только поможет вам создать свой проект, но и выступает в качестве центрального узла настройки для внешних инструментов.

Установка и подготовка к работе

Теперь у вас есть первое впечатление, что такое Grunt, и пришло время, чтобы начать. Прежде всего, убедитесь, что Node.js установлен на вашем компьютере. Существуют инсталляторы доступные для различных платформ, которые позволяют вам начать прямо сейчас. Откройте терминал и напечатайте

npm install grunt-cli -g

чтобы установить инструмент командной строки Grunt.

Старые версии Grunt шли с набором предопределенных основных задач. Для того, чтобы он стал более гибким и настраиваемым, они были удалены в недавнем релизе 0.4 и могут быть установлены в качестве отдельных плагинов задач, которые упростят вам начало работы с ним.

Во-первых, создайте файл в корневой папке проекта под названием package.json. Если вы знакомы с Node.js, вы возможно уже знакомы с этим файлом, мы начнем с самого основного для нашего проекта.

{
	"author"	: "authorName",
	"name"		: "FrontEnd-Project",
	"version"	: "0.0.1",

	"devDependencies" : {
		"grunt"					: ">= 0.4",
		"grunt-cli"				: ">= 0.1.6",
		"grunt-contrib-watch"	: "~0.3.1",
		"grunt-contrib-cssmin"	: ">=0.5.0",
		"grunt-contrib-uglify"	: ">=0.2.0",
		"grunt-contrib-concat"	: ">=0.1.3"
	}
}

(package.json — файл с настройками для nodejs. Ложем файл в корень папки с проектом, открываем консоль, заходим в папку и выполняем npm install, все пакеты и зависимости описанные в файле будут установлены в папку вашего проекта. Подробней http://package.json.nodejitsu.com/ ^[2]).

Запускаем Grunt

После того, как Grunt и все зависимости, необходимые для нашего проекта установлены, пришло время, чтобы начать с самой настройкой Grunt-а. Таким образом, мы добавляем файл с именем Gruntfile.js в корень нашего проекта рядом с ранее созданным файлом package.json. Это основной файл для конфигурации Grunt, который содержит список загружаемых задач, и описание их работы.

Основной файл настройки может выглядеть следующим образом:

//Стандартный экспорт модуля в nodejs
module.exports = function(grunt) {
  // Инициализация конфига GruntJS
  grunt.initConfig({

    //Настройки различных модулей GruntJS, их нужно предварительно установить через менеджер пакетов npm, или добавить в файл package.json перед запуском npm install

    //Например проверка кода javascript с помощью утилиты jshint
    jshint: {},

    //Склеивание файлов
    concat: {}

    //И так далее
  });

  //Загрузка модулей, которые предварительно установлены
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');

  //Эти задания будут выполнятся сразу же когда вы в консоли напечатание grunt, и нажмете Enter
  grunt.registerTask('default', ['jshint', 'concat']);
};

Итак, вы видите, что все нужные конфигурации написаны на JavaScript. В принципе, вам нужны три различных метода для работы с Grunt:

grunt.initConfig
grunt.loadNpmTasks
grunt.registerTask

Каждая задача может быть вызвана отдельно из командной строки, передав его имя в качестве параметра командной строки: Например, grunt jshint будет выполнять только задачи, направленные на контроль стиля программирования на соответствие стандартам вашего проекта. С grunt.registerTask вы определяете задачу по умолчанию для запуска, когда Grunt вызывается без параметров. Он выполняет перечисленные задачи в заданном порядке, в нашем случае jshint, concat and uglify.

Описывать каждый плагин, это отдельная тема для разговора. Часто используемые можно найти здесь https://github.com/gruntjs/grunt-contrib ^[3]. Там можно найти полное описание и последней версии для часто используемых GruntJS плагинов.

Ну и наконец!

Чтобы начать использовать Grunt проделаем такие шаги:

1. Нужно поставить nodejs, найти инсталяшку под свою систему можно тут http://nodejs.org/ ^[4]
2. Если у вас windows, рекомендую поставить https://code.google.com/p/msysgit/ ^[1] для удобства.
3. Создаем в папке с проектом два файла package.json и Grunfile.js, настраиваем их, как это сделать читаем выше.
4. Создаем папку под проект, или заходим в уже существующую с помощью консоли, и выполняем команду npm install, для того что бы установить Grunt, и все нужные пакеты (которые описываем предварительно в package.json).
5. Ну и что бы запустить Grunt, выполняем команду grunt, в консоли.

С Grunt-ом, JS разработчики имеют очень гибкий инструмент под рукой, который помогает при автоматизации повторяющихся задач. После настройки, вы можете настроить задачи по времени, сделать это волшебство в фоновом режиме, или интегрировать Grunt в ваш IDE или редактор для кодирования как внешнюю команду разработки (которая прекрасно работает в Sublime Text, например).

Код проверки и тестирования повышает общее качество и поможет вам поддерживать постоянный стандарт кодирования, что делает Grunt также идеальным инструментом для команд, работающих на крупномасштабных проектах.

Официальный сайт http://gruntjs.com/ ^[5]

Спасибо за внимание, до скорых встреч.

Автор: jsr

Источник ^[6]