Введение в Grunt

1. Установка, создание проекта под jquery-плагин;
2. Добавление плагинов для компиляции haml , coffee и scss файлов;
3. Запуск веб-сервера;
4. Добавление библиотеки jasmine для тестирования.

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

Например, при написании jquery-плагина, всякий раз, когда я вношу изменение в javascript-код, я хочу чтобы он проверялся на ошибки с помощью JSHint, а также запускались отдельно написанные тесты для плагина.
А при запуске другой команды в терминале, создавалась отдельная минифицированная версия jquery-плагина.

Для работы с grunt должна быть установленна node.js и пакетный менеджер npm

Для того чтобы установить grunt необходимо выполнить в терминале

npm install grunt-cli -g

Возможно, потребуется запустить с коммандой sudo

Также установим grunt-init Он потребуется для автоматической генерации файлов проекта

npm install grunt-init -g

Я использую grunt для написания jquery-плагинов, так как он позволяет настоить автоматический запуск javascript-тестов.
При изменении кода лог будет отображаться в терминале.

В grunt-init по-умолчанию встроена комманда для создания jquery-плагина. Запустим в терминале:

grunt-init jquery

Будет предложено ответить на несколько вопросов, после чего будут сгенерированы дефолтные файлы.
Gruntfile.js- это основной конфигурационный файл проекта. В файле package.json - зафиксированны необходимые плагин и их версии.

В файле package.json перечислены все зависимости необходимые для работы. Их все нужно установить с помощью команды npm install

В файле Gruntfile.js, все таски по-умолчанию, перечисленны в строке

grunt.registerTask('default', ... )

Команда grunt в терминале запускает их все. Если при ее запуске не появляется никаких ошибок, то все ок, проект готов к работе.

Компиляция coffeescript-файлов

В файл Gruntfile.js добавим

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

Также создадим новый таск в grunt.initConfig:

coffee: {
    compile: {
      files: {
        'src/myScript.js': 'src/myScript.coffee'
      }
    }
  }

Чтобы установить плагин, в терминале нужно выполнить:

npm install grunt-contrib-coffee --save-dev

подобную команду надо запускать для всех последующих плагинов

Флаг --save-dev добавит информацию от устанавливаеммом плагине в файл package.json

Теперь в консоли можно запустить этот таск командой:

grunt coffee

Добавим его в дефолтные задачи

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

Добавим файлы в слежение, чтобы каждый раз при изменении исходного coffescript файла компиляция происходила автоматически, для этого в Gruntfile.js в watch вставим следующий блок.

coffee: {
    files: 'src/myScript.coffee',
    tasks: ['coffee']
  }

Теперь, если запущена команда

grunt watch

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

Аналогично coffeescript таску создадим такой же для haml-файлов.

Плагин

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

Таск

haml: {
    dist: {
      files: {
        'index.html': 'index.haml'
      }
    }
  }

Проверим работу, выполнив в консоли grunt haml

И так же добавим в слежение, добавив в watch блок:

haml: {
    files: 'index.haml',
    tasks: ['haml']
  }

CSS-препроцессор

Плагин:

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

Таск:

sass: {
    options: {
      compass: true
    },
    dev: {
      files: {
        'src/myScript.css': 'src/myScript.scss'
      }
    },
    dist: {
      options: {
        style: 'compressed'
      },
      files: {
        'src/myScript.min.css': 'src/myScript.scss'
      }
    }
  }

Будет создаваться две версии css-стилей: обычная и пожатая
compass: true - добавит поддержку scss-фрейморка compass

Веб-сервер

Плагин:

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

добавим таск

connect: {
    server: {
      options: {
        port: 8000,
        base: '.'
      }
    }
  }

запуск сервера

grunt connect watch

Тестирование с помощью Jasmine

Плагин:

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

Создадим отдельную папку "spec" под тесты
Добавим библиотеку jasmine-jquery.js, которая расширяет методы jasmine специально для тестирования кода, написанного на jquery
Добавим новый таск

jasmine: {
    src: 'src/myScript.js',
    options: {
      specs: 'spec/javascripts/*_Spec.js',
      styles: 'src/myScript.css',
      helpers: ['./spec/jasmine-jquery.js', './libs/jquery/jquery.js'],
      keepRunner: true
    }
  }

Для того, чтобы тесты можно было также открыть из браузера по ссылке _SpecRunner.html добавим в конфиг

keepRunner: true

Плюсы

1. Очень высокий уровень кастомизации и гибкости
2. Кастомные "Watcher'ы" с выводом информации в терминал
3. Системы активно развивается
4. Большое количество плагинов
5. Быстрая скорось работы, по крайне мере, на маленький проектах

Минусы

1. Сложные, запутанные конфигурационные файлы, с большим количеством вложенностей и ненужных элементов
2. Отсутствует работа "из коробки", придется сначала покапаться в конфигах, прежде чем запустить в первый раз