Grunt

Введение

Надоело мне как-то перепроверять все CSS-файлы при изменении дизайна. Поискав немного, я остановился на LESS. Вместо того, чтобы управлять одним огромным файлом styles.css, LESS позволяет создать множество мелких файлов, каждый из которых отвечает за свою часть общей таблицы стилей. Однако, собирать всё вручную мне было лень, поэтому я решил для своего проекта использовать Grunt. Для него есть множество модулей, которые способны сильно облегчить жизнь Web-разработчика, в частности, компилировать множество LESS файлов автоматически, собирать и сжимать JavaScript'ы и т.д.

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

Для проекта, над которым я работаю, было принято решение создать в корневом каталоге папку /less, куда поместить следующие файлы:

• bootstrap.less - объединяет в себе все остальные файлы. Изменяя содержимое этого файла легко управлять результирующей таблицей стилей.
• colors.less - содержит переменные, описывающие цвета, используемые на страницах, например, @red: #FF0000;.
• fonts.less - описывает используемые на страницах шрифты. В своём проекте я решил использовать символьный шрифт FontAwesome вместо того, чтобы рисовать иконки.

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

Установка

Целевой системой сегодня будет не Debian, а Windows 8. Установка всех средств в Debian, кроме NodeJS, производится аналогично - командами в консоли. Если хотите NodeJS в Debian Wheezy - прочитайте вот эту статью.

Скачиваем установщик с сайта проекта NodeJS и запускаем, при установке не забываем указать, что нам также понадобится менеджер пакетов (Node Package Manager - NPM).

Настройка проекта для использования Grunt

Существует два способа установки Grunt'а - глобально и локально, в проект. Я рекомендую сам Grunt установить глобально, а необходимые модули - в папку проекта. Её всегда можно добавить в исключения вашей СКВ.

Запускаем командную строку от имени администратора и вводим следующие команды:

npm install grunt -g
npm install grunt-cli -g

Первый пакет - это собственно Grunt, второй - утилиты командной строки, позволяющие работать с ним. Ключ -g означает, что установленные пакеты должны быть доступны глобально.

Перейдём в каталог нашего проекта (вместо %project_root_folder% подставьте нужное) и инициализируем его для использования Grunt'а:

cd %project_root_folder%
grunt init

Будет задано несколько вопросов, касающихся проекта, в частности, имя автора, версия, лицензия и т.д. На основе ответов будет составлен файл package.json, который при необходимости всегда можно изменить. например, в моём проекте он выглядит вот так:

{
    "name": "tester",
    "version": "0.0.0",
    "description": "Система тестирования",
    "main": "index.html",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Dunaevsky Maxim",
    "license": "MIT",
    "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-less": "^0.11.4",
    "grunt-contrib-uglify": "^0.5.1"
  }
}

Теперь нам нужно будет установить необходимые модули, я ограничусь всего тремя:

• concat - собирает несколько указанных файлов в один.
• less - компилирует LESS-файлы в каскадные таблицы стилей CSS.
• uglify - оптимизирует и сжимает JavaScript-код.

Установка производится очень просто:

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-uglify --save-dev

Ключ --save-dev означает, что пакеты должны быть также прописаны в файле package.json.

Пакеты установлены, самое время дать Grunt'у задание - скомпилировать LESS-файлы, склеить вместе все JavaScript'ы из каталога /src/ и сжать итоговый файл. Для этого нам понадобится файл Gruntfile.js. Обратите внимание, первая буква в названии файла должна быть большой. Создать его следует в корневом каталоге проекта.

Рассмотрим Gruntfile.js, которым пользуюсь я сам:

"use strict";
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            dev: {
                files: {
                    'css/styles.css': 'less/bootstrap.less'
                }
            },
            min: {
                options: {
                    ieCompat: true,
                    compress: 2,
                    optimization: true
                },
                files: {
                    'css/styles.min.css': 'less/bootstrap.less'
                }
            }
        },
        concat: {
            js: {
                src: [
                    'src/*.js'
                ],
                dest: 'js/ui.js'
            }
        },
        uglify: {
            build: {
                src: 'js/ui.js',
                dest: 'js/ui.min.js'
            }
        }
    });

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

    grunt.registerTask('default', ['less:dev', 'concat:js', 'uglify']);
};

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

Задание для сборки CSS из LESS-файлов содержит две секции - настройки для разработки (dev) и для релиза (min), когда важен маленький размер файла и оптимизация кода. В обоих заданиях указано, что нужно на основе файла bootstrap.less из каталога less собрать файл styles.css в каталоге css.

Задание для concat'а небольшое - ему нужно всего навсего взять все js-файлы в каталоге src и склеить в один - ui.js, положив его в каталог js.

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

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

Закончив редактирование файла Gruntfile.js, запустите командую строку в текущем каталоге и выполните команду grunt. В случае ошибки в конфигурации или одном из файлов проекта будет выдано соответствующее сообщение. В противном случае вывод на экран будет выглядеть примерно так:

Running "less:dev" (less) task
File css/styles.css created: 0 B → 251 B

Running "concat:js" (concat) task
File js/ui.js created.

Running "uglify:build" (uglify) task

Done, without errors.