Немного о Grunt. Создание спрайтов с помощью Grunt

Grunt - это инструмент для сборки приложений на JS, который позволяет автоматизировать множество различных задач. Команды Grunt выполняются в консоли. В процессе написания статьи я пользовался консолью git-bush.

Устанавливаем Grunt

• Запускаем консоль от имени Администратора (в Windows)
• Устанавливаем (Grunt Comand Line Interface): $ npm install grunt-cli -g
• Переходим в папку проекта и устанавливаем Grunt: $ cmd
  C:\> cd path\to\project
  C:\path\to\project> npm install grunt Для работы Grunt нужны 2 файла - package.json и Gruntfile.js
  • package.json можно создать вручную или с помощью команды: C:\path\to\project> npm init
  • Gruntfile.js создаем в текстовом редакторе (например, в Notepad++). Можно это сделать на основе примера с официального сайта Grunt.

Устанавливаем плагины

Устанавливаем необходимые плагины для Grunt (находясь при этом в папке проекта). Зависит от поставленных задач. Существует множество плагином для Grunt. Также можно писать свои плагины.

Например, плагины для компиляции CoffeeScript:

C:\path\to\project> npm install grunt-contrib-coffee grunt-contrib-watch grunt-contrib-uglify grunt-contrib-concat --save-dev

• Ключ --save-dev сохраняет эти пакеты в файл package.json как модули для разработки
• Ключ --save сохраняет эти пакеты в файл package.json как обычные модули

Работаем с Grunt

Как было сказано ранее: все задачи Grunt, а точнее их параметры, хранятся в файле Gruntfile.js. Его примерное содержание можно посмотреть на странице: http://gruntjs.com/sample-gruntfile.

Чтобы Grunt выполнил вашу задачу, ее параметры передаются в функцию grunt.initConfig(). Параметры передаются в виде JS-объекта.

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

• Сжатие CSS-кода и объединение нескольких CSS-файлов в один (contrib-cssmin)
  Посмотреть пример

  JavaScript

  		cssmin: {
  			build: {
  				files: {
  					 'css/application.css': [ 'css/**/*.css' ]
  				}
  			}
  		}
  		

• Компиляция coffeeScript в JS (contrib-coffee)
  Посмотреть пример

  JavaScript

  		coffee: {
  			build:{
  				expand: true,
  				cwd: 'coffee',
  				src: ['**/*.coffee'],
  				dest: 'script',
  				ext: '.js' 
  			},
  		}
  		

• Компиляция кода CSS-препроцессоров: LESS и SASS (contrib-less, contrib-sass)
• Наблюдение за изменением файлов и компиляция их при изменении (contrib-watch и contrib-newer)
• Объединение нескольких JS-файлов в один и сжатие кода(contrib-concat и contrib-uglify)
• Оптимизация размера изображений (contrib-imagemin)

Создаем изображения-спрайты с помощью Grunt

Особое внимание хотелось бы обратить на такую полезную возможность Grunt, как создание спрайтов из нескольких графических файлов. Делается это с помощью плагина spritesmith

Порядок действий:

• Создаем картинки в отдельных графических файлах
• Добавляем в Gruntfile.js минимальный код, который требуется для создания спрайтов:

  JavaScript

  	sprite:{
  	  all:{
  		src: 'path/to/img/*.png',
  		dest: 'path/to/sprite-file.png',
  		destCss: 'path/to/sprite-file.css'
  	   }
  	}
  

• Запускаем команду 'grunt sprite' и после того, как она выполнится мы получаем спрайт изображений и CSS-файл с правилами, сформированный на основе настроек:
  • src - путь к папке с файлами
  • dest - путь к папке, куда сохраняется файл со спрайтами
  • destCss - путь к папке, куда будет сохраняться CSS-файл

Имена классов в CSS-файле формируются на основе имен графических файлов. Например, я назвал один из файлов se1.png. В результате в CSS-файле появился класс с именем .icon-se1. Кроме обычных CSS-классов, можно работать с псевдоэлементами (например, :before или :after). Правда для этого придется создавать свой шаблон CSS-кода и вызывать его в настройках (cssTemplate).

У плагина grunt-spritesmith существует множество настроек, с которыми вы сможете ознакомиться на официальной странице плагина на GitHub.

Например, в настройках можно указывать различные варианты расположения картинок внутри спрайта. Для этого нужно выбрать одно из возможных значений параметра algorithm: top-down, left-right, diagonal, alt-diagonal, binary-tree.

Также существует возможность создавать спрайты для устройств с Retina-дисплеями. Замечу, что размеры изображений (ширина и высота) для дисплеев с высоким разрешением должны быть в 2 раза больше. Обычно в именах этих файлов добавляются символы "-2x". Например, se1-2x.png. Чтобы создать спрайт для Retina-дисплеев, нужно добавить пару параметров:

JavaScript

	retinaSrcFilter: ['path/to/img/*-2x.png'],
	retinaDest: 'path/to/sprite-file.retina-2x.png',

В результате запуска команды grunt sprite после добавления в файл Gruntfile.js указанных параметров, мы получим 2 варианта спрайтов: для обычных и Retina-дисплеев, а также CSS-файл с описанием классов для применения этих спрайтов в качестве фона элементов веб-страницы. Правила для Retina дисплеев в CSS-файле помещаются отдельно от обычных правил при помощи медиа-запросов (media-queries).

Обычно, чтобы решить какую-нибудь задачу требуется ввести несколько команд по очереди. Бывает, что это нужно делать по несколько раз через определенные промежутки времени (в зависимости от изменения файлов).

Чтобы каждый раз не вводить все команды, можно объединить их с помощью grunt.registerTask().

Пример: grunt.registerTask('mytask', ['coffee', 'concat', 'uglify', 'watch']);

Существует возможность писать свои функции, которые будут выполнены вместе с другими командами или отдельно. Например:

JavaScript

	grunt.registerTask('custom', function(){console.log('===Mission complete!===');})

После создания функции ее можно добавить с список для выполнения:

JavaScript

	grunt.registerTask('mytask', ['coffee', 'concat', 'uglify', 'custom']);

Если назвать задачу не mytask, а default, то она будет выполняться при вызове в консоли команды grunt без параметров.

В заключении статьи хотелось бы упомянуть, что Grunt не единственный инструмент для автоматизации различных задач. Просто он один из самых популярных. Существует еще один известный альтернативный инструмент, который называет Gulp. Он ничем не уступает Гранту и даже по мнению некоторых веб-разработчиков выигрывает в плане быстродействия.

Вы можете скачать файлы с настройками для Grunt, которые я использовал при написании этой статьи:
Gruntfile.js (задачи: coffee, concat, uglify, watch)
Gruntfile.js (спрайты)