Используем Grunt для облегчения жизни фронтенд-разработчика

Современный сайт — это уже далеко не набор HTML-файлов и картинок с несколькими таблицами стилей и скриптами, которые можно просто выложить на сервер как есть. Теперь для разработки используют множество инструментов: CSS-препроцессоры, минификаторы и склейщики скриптов, оптимизаторы картинок, генераторы спрайтов и многое другое. Запускать все руками быстро надоест, да и легко забыть что-то и наделать ошибок. Поэтому было бы неплохо это все автоматизировать.

Что такое системы сборки

Наверняка ты хотя бы раз слышал слова «мейк» или «мейкфайл». Это файл (обычно он так и называется: Makefile) сценария сборки, очень похожий на shell-скрипт. Система сборки читает этот файл и автоматически выполняет рутинные действия, экономя разработчику время и нервы. Make — одна из самых известных и старых систем сборки. Ее используют суровые программисты для автоматизации компиляции программ и других повторяющихся процессов, чтобы не вводить каждый раз длинные и сложные команды в терминале. Кроме Make, существует множество других систем сборки — Rake, Cake, Ant. Все они имеют свои преимущества, но и у всех есть один общий недостаток — они не приспособлены для нужд frontend-разработчика.

Конечно, при желании ты можешь приспособить любую из этих систем сборки для минификации JS или компиляции CoffeeScript, но на выходе ты получишь громозкий и негибкий инструмент, при этом потратив много времени. Куда удобнее было бы использовать специально адаптированные тулзы для решения повседневных задач фронтендщиков. Наибольшей популярностью у девелоперов пользуется система сборки Grunt.JS (gruntjs.com), причем вполне заслуженно. У Гранта есть несколько плюсов, которые отличают его от других систем сборки.

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

Во-вторых, он написан на знакомом тебе языке — JavaScript. А значит, ты легко можешь создавать свои задачи, если найти подходящий плагин не получится.

В-третьих, благодаря использованию Node.js он легко устанавливается на всех популярных платформах: Mac, Windows и Linux.

Другие статьи в выпуске:

Хакер #174. Собираем квадрокоптер

• Содержание выпуска
• Подписка на «Хакер»-60%

Установка

Для использования Гранта тебе понадобится [установить Node.js][]. Вместе с ним установится менеджер пакетов npm, который понадобится для установки как самого Гранта, так и плагинов.

Для начала нужно установить консольную утилиту grunt, которая будет запускать Грант, установленный в папке твоего проекта.

$ npm install grunt-cli -g 

Ключ -g означает, что пакет будет установлен глобально (а не только для текущего проекта). Вероятно, понадобится запустить npm через sudo или открыть консоль под администратором.

Начало работы

Для использования в проекте Гранта нужно создать файл конфигурации — «грантфайл». Это обычный JS-файл с именем Gruntfile.js (можно использовать и CoffeeScript, тогда файл должен называться Gruntfile.coffee).

Грантфайл выглядит примерно так:

// Обязательная обертка module.exports = function(grunt) {  // Настройка задач grunt.initConfig({ // Склеиваем все JS-файлы в папке в один файл concat: { main: { src: 'js/**/*.js', dest: 'build/scripts.js' } } });  // Загрузка плагинов, установленных с помощью npm install grunt.loadNpmTasks('grunt-contrib-concat');  // Задача по умолчанию (она обязательно должна быть) grunt.registerTask('default', ['concat']); }; 

В грантфайле описываются параметры задач (у нас пока одна — concat — склеивание нескольких файлов в один), подключаются плагины (о них ниже), задаются группы задач (предпоследняя строчка).

В Гранте нет встроенных задач, для любой задачи нужно устанавливать плагин. Но сначала нужно создать еще один файл, который сильно облегчит работу с Грантом. Выполни npm init и ответь на вопросы, которые он задаст. (Можно просто нажимать — эти поля нам не понадобятся.) Теперь у нас появился файл package.json: в нем npm будет сохранять имена и версии установленных пакетов. Это позволит устанавливать все зависимости (Грант и плагины) одной командой (npm install) и быть уверенным, что проект не перестанет собираться из-за новой версии какого-то плагина.

Теперь можно установить первый плагин (и сам Грант):

$ npm install grunt grunt-contrib-concat --save-dev 

Ключ --save-dev в дополнение к установке добавляет ссылку на пакет в package.json.

Запуск

Просто набери в терминале:

$ grunt 

Грант выполнит задачу default, которая запустит задачу concat.

Во время разработки удобно запускать Грант с ключом --debug. Задачи могут использовать его по-разному. Например, grunt-contrib-stylus в отладочном режиме не сжимает CSS-код.

$ grunt --debug 

Еще два ключа, которые могут пригодиться, если что-то пойдет не так: --verbose будет выводить подробную информацию обо всем, что делает Грант в данный момент, --stack покажет stack trace, если выполнение было прервано из-за ошибки JavaScript.

Конфигурация

Задачи, подзадачи, параметры

Подробнее разберем внутренности грантфайла. Конфигурация большинства задач выглядит примерно так:

concat: { options: { separator: ';' }, libs { src: 'js/libs/**/*.js', dest: 'build/libs.js' }, main: { src: [ 'js/mylibs/*.js', 'js/main.js' ], dest: 'build/scripts.js' } } 

Concat — это задача. Обычно имя задачи совпадает с именем грант-плагина, который за нее отвечает. В нашем случае это плагин grunt-contrib-concat. В других системах сборки задачи обычно называют целями (target).

Concat:libs и concat:main — это подзадачи, они позволяют запускать одну задачу для разных исходных файлов. В options определяются общие для всех подзадач параметры.

Можно принудительно запустить любую задачу или подзадачу:

$ grunt concat  # Задача concat $ grunt concat:main  # Подзадача concat:main $ grunt concat uglify # Задачи concat и uglify 

Списки файлов

Список исходных файлов можно задать тремя способами: один файл, массив файлов и генератор. Один файл:

'js/main.js' 

Массив:

[ 'js/utils.js', 'js/main.js' ] 

Можно использовать маски (glob, * — любые символы, /**/ — папка любой вложенности). Однако с масками нужно иметь в виду, что порядок файлов может оказаться любым. Это может привести к проблемам, например при склейке CSS- или JS-файлов.

[ 'js/libs/*.js', 'js/mylibs/**/*.js' ] 

Динамическая генерация списка сложнее, но и функциональнее.

{ expand: true, // Включение динамической генерации cwd: 'lib/',  // Родительская папка исходных файлов src: ['**/*.js'], // Маска исходных файлов (относительно cwd) dest: 'build/', // Папка для результирующих файлов // Необязательные параметры ext: '.min.js', // Расширение результирующих файлов flatten: true,  // Складывать все файлы в одну папку (без подпапок) rename: function(name) { return name.replace('big', 'small'); } } 

Шаблоны

Внутри параметров конфига можно использовать шаблоны. Грант использует шаблонизатор из библиотеки [Lo-Dash][].

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

concat: { main: { src: 'js/*.js', dest: 'build/scripts.js' } }, uglify: { main: { files: { // «Копируем» другой параметр конфига. Добавляем текущую дату в имя файла build.<%= grunt.template.today("m-d-yyyy") %>.js': '<%= concat.main.dest %> } } } 

А вот так можно использовать данные из JSON-файла:

pkg: grunt.file.readJSON('package.json'), banner: '/* <%= pkg.name %> v<%= pkg.version %> */' uglify: { main: { files: { '<%= pkg.name %>.min.js': '<%= pkg.name %>.js' } } } 

Grunt.template.today и grunt.file.readJSON — функции из API Гранта. Там довольно много удобных функций, которые можно использовать при написании собственных задач (об этом мы поговорим чуть позже).

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 

$ npm install matchdep --save-dev 

Решение повседневных задач

Склеивание JS-файлов

Для склеивания любых файлов используется плагин contrib-concat. В простейшем случае его конфигурация выглядит так:

concat: { main: { src: ['js/jquery.js', 'js/utils.js', 'js/main.js'], dest: 'build/scripts.js' } } 

Не забудь добавить в грантфайл плагин grunt-contrib-concat:

grunt.loadNpmTasks('grunt-contrib-concat'); 

Добавь задачу в default, чтобы она запускалась при запуске Гранта без параметров:

grunt.registerTask('default', ['concat']); 

И установи соответствующий пакет из npm:

$ npm install grunt-contrib-concat --save-dev 

Минификация JS-файлов

Плагин contrib-uglify сжимает JavaScript с помощью UglifyJS.

uglify: { main: { files: { 'build/scripts.min.js': '<%= concat.main.dest %>' } } } 

Вместо <%= concat.main.dest %> будет подставлен путь результирующего файла задачи concat (предыдущий раздел).

Часто нужно добавить в начало сжатого файла комментарий с копирайтом. Это можно сделать с помощью свойства banner.

uglify: { options: { banner: '/* Author: John Smith, <%= grunt.template.today("yyyy") %> */' }, main: { files: { … } } } 

Запуск CSS-препроцессоров

Для Гранта есть плагины для всех популярных препроцессоров: SASS, LESS и Stylus (contrib-sass, contrib-less и contrib-stylus). Я использую Stylus, поэтому и покажу на примере этого препроцессора.

stylus: { main: { files: { 'build/styles.css': 'styles/index.styl' } } } 

JSHINT

Для проверки JavaScript на ошибки есть плагин contrib-jshint.

jshint: { options: { browser: true, white: false, smarttabs: true, eqeqeq: true, immed: true, latedef: false, newcap: true, undef: true, trailing: true, jquery: true }, files: 'js/**/*.js' } 

Удобнее хранить параметры JSHint в отдельном JSON-файле — jshintrc.

jshint: { options: { jshintrc: '.jshintrc' }, files: 'js/**/*.js' } 

Этот файл может быть использован не только Грантом, но и, например, консольным JSHint или плагином SublimeLinter для Sublime Text.

Отслеживание изменений

Плагин contrib-watch запускает задачи при каждом изменении указанных файлов. Например, можно запускать CSS-препроцессор при каждом изменении исходных файлов:

stylus: { main: { 'build/styles.css': 'styles/index.styl' } } watch: { stylus: { files: 'styles/**/*.styl', tasks: 'stylus' } } 

Недавно в contrib-watch появилась возможность использовать LiveReload (раньше для этого нужен был отдельный плагин):

watch: { stylus: { files: 'styles/**/*.styl', tasks: 'stylus', options: { livereload: true }, } } 

Теперь, если установить плагин LiveReload для браузера, страничка сама будет перезагружаться при изменении и перекомпиляции исходных файлов.

А еще можно запускать сразу несколько задач при изменении файлов:

watch: { stylus: { files: 'styles/**/*.styl', tasks: ['stylus', 'autoprefixer', 'csso'] } } 

Веб-сервер

Простейший веб-сервер для статических сайтов — плагин contrib-connect. У него есть одна особенность, о которой нужно помнить: сервер будет работать, пока выполняются какие-то другие задачи. Чтобы сервер не закрывался сразу после запуска, нужно использовать параметр keepalive:

connect: { test: { options: { port: 8000, base: '.', keepalive: true } } } 

или запускать задачу connect одновременно с какой-то длительной задачей, например watch:

connect: { test: { options: { port: 8000, base: '.' } } }, watch: { ... } 

В обоих вариантах твой сайт доступен по адресу http://localhost:8000/.

Как написать свою задачу

Свои задачи делать довольно просто. Для примера сделаем задачу, которая будет запускать из Гранта консольный оптимизатор веб-графики [imgo][]. Стоит рассматривать эту задачу только как пример. Для реальной работы лучше использовать [grunt-imgo][] или [grunt-contrib-imagemi][].

Конфиг

Задача будет принимать список изображений и запускать imgo для каждого файла. Для этого нам понадобится всего лишь один параметр:

imgo: { images: { src: 'images/**' } } 

Код задачи

Добавить задачу можно двумя функциями:

• grunt.registerMultiTask — задача с подзадачами, как concat, uglify и как описано в подразделе «Задачи, подзадачи, параметры» выше. Нам нужна именно такая;
• grunt.registerTask — используется для задач-ссылок (как default выше) или задач, где несколько наборов входных данных не имеют смысла.

Вот, как это выглядит:

// Добавляем задачу imgo  grunt.registerMultiTask('imgo', 'Optimize images using imgo', function () { // Говорит о том, что вся задача асинхронная var done = this.async(); // Обрабатываем каждый файл (тоже асинхронно, потому что spawn() асинхронный) // В this.filesSrc находится список файлов текущей подзадачи с уже развернутыми масками. // (Другие параметры были бы в this.data.) grunt.util.async.forEach(this.filesSrc, function (file, next) { // Создаем процесс imgo, передаем ему имя текущего файла grunt.util.spawn({ cmd: 'imgo', args: [file] }, next); }, done); }); 

Задача должна быть асинхронной, потому что мы будем вызывать внешнюю программу, а в Node.js это асинхронная операция. Вызов this.async() говорит Гранту, что наша задача асинхронная, и возвращает функцию, которую необходимо вызвать, когда все файлы будут обработаны.

Сам цикл по исходным файлам тоже асинхронный. Для этого используется метод forEach из модуля async.

Хранение и использование

Задачи можно класть прямо в грантфайл, а можно в отдельные файлы или публиковать в npm (если твоя задача может быть полезна и другим людям).

Первый способ самый простой. Для этого надо разместить код задачи где-нибудь перед grunt.registerTask(‘default’, …).

Во втором случае нужно создать для задач отдельную папку и поместить код задачи в такую же обертку, как и у грантфайла:

module.exports = function(grunt) { grunt.registerMultiTask('imgo', 'Optimize images using imgo', function() { /* ... */ }); }; 

А в грантфайле написать:

grunt.loadTasks('tasks');  // Загружает все задачи из папки tasks 

Альтернативы гранта

Грант — далеко не единственный инструмент для автоматизации работы разработчика. Хотя, на мой вкус, он наиболее удобен для фронтенд-разработчика.

Условно такие инструменты можно разделить на три группы.

Классические системы сборки: Make, Ant и множество других

К недостаткам можно отнести неприспособленность к задачам фронтенд-разработчика (придется много делать самому то, что в Гранте уже есть готовое) и необходимость изучать новый язык написания скриптов (вместо привычного яваскрипта). Также тебе придется отдельно устанавливать все утилиты, которые будут использоваться для сборки: uglify, coffee и другие. Но если ты уже использовал такие инструменты в другой среде, то использование их для фронтенда может быть оправданным.

Консольные системы сборки для фронтенд-разработчиков

Из наиболее популярных стоит отметить Brunch и Yeoman.

• Brunch гораздо проще в использовании, но менее гибкий, и для него существует всего лишь десятка три плагинов (для Гранта уже несколько сотен). В Бранче есть встроенный генератор проектов (есть разные «скелеты»: Backbone-приложения, Angular-приложения и другие), веб-сервер, вотчер и плагины для компиляторов, препроцессоров, минификаторов и тому подобного. Бранч позволяет двумя командами в терминале развернуть веб-приложение, запустить веб-сервер и начать с ним работать. При этом после каждого изменения оно будет автоматически пересобираться, а страничка в браузере — перезагружаться.
• Yeoman с трудом можно назвать альтернативой Гранта, потому что это скорее продолжение Гранта. Йомен состоит из трех частей (все они могут использоваться как отдельные инструменты): Yo — генератор приложений (более продвинутый аналог grunt-init), Grunt и Bower — менеджер пакетов для фронтенда (как npm, но для браузера). Раньше для вызова всех трех инструментов использовалась команда yeoman, но сейчас yo, grunt и bower используются сами по себе, а Йомен теперь скорее субъективное воркфлоу, основанное на этих инструментах.

Системы сборки для фронтенд-разработчиков с графическим интерфейсом

Очевидный плюс — графический интерфейс и простота установки и использования. Минусы: сложность (а то и невозможность) расширения и настройки; невозможность хранить конфигурацию сборки в самом проекте; ограниченная поддержка операционных систем и платность большинства (если не всех) программ.

• CodeKit (Mac, 25 долларов). Очень прост в использовании: достаточно перетащить папку проекта в программу, и он сам определит все используемые в проекте языки, сам настроит и запустит все компиляторы, будет следить за изменениями исходных файлов и перезагружать браузер.
• Hammer (Mac, 24 долларов). Основное предназначение — упростить разработку простых статических сайтов. Кроме препроцессоров, минификаторов и прочего, тут есть встроенный HTML-препроцессор и шаблоны новых проектов.
• LiveReload (Mac, 10 долларов). Сборщиком его можно назвать с натяжкой. Основное предназначение — отслеживать изменения в файлах и перезагружать страницу в браузере. Однако он может и компилировать код CSS-препроцессоров или CoffeeScript.

concat: { main: { src: 'js/*.js', dest: 'build/scripts.js' } }, uglify: { main: { files: { '<%= concat.main.dest %>': '<%= concat.main.dest %>' } } } ... grunt.registerTask('default', ['concat', 'uglify']); grunt.registerTask('debug', ['concat']); 

uglify: { options: { compress: { global_defs: { DEBUG: debug  // Та самая переменная } } }, main: { files: { '<%= concat.main.dest %>': '<%= concat.main.dest %>' } } } 

if (typeof DEBUG === 'undefined') DEBUG = true; if (DEBUG) { alert('Это сообщение появится только в отладочном режиме'); } 

stylus: { production: { files: { 'build/styles.css': 'styles/index.styl' } }, debug: { options: { define: { DEBUG: debug } }, files: { 'build/styles.css': 'styles/index.styl' } } } 

css DEBUG ?= true  div outline: 1px solid #c0ffee if DEBUG 

Заключение

Не удивлюсь, если после прочтения этой статьи Грант показался тебе слишком сложным. Действительно, довольно трудно сразу во всем разобраться, а в разделе «Альтернативы» есть инструменты, пользоваться которыми гораздо проще. Но, на мой взгляд в Гранте наилучшим образом сочетаются умеренная простота использования, почти безграничные возможности настройки и расширения и огромное количество уже готовых плагинов на все случаи жизни.

* webfont — конвертер SVG-файлов в веб-шрифт; * autoprefixer — добавление вендорных префиксов по данным caniuse.com; * imgo и imgmin — оптимизация веб-графики; * remove-logging — удаляет из JS вызовы console.log(); * string-replace — замена строк в файлах; * csso — оптимизация CSS; * exec — запуск исполняемых файлов; * preprocess — препроцессор: условия, подстановка переменных и тому подобное. 

grunt-init node 

$ tree . ├── Gruntfile.js ├── LICENSE-MIT ├── README.md ├── lib │ └── MyCoolProject.js ├── package.json └── test └── MyCoolProject_test.js