Введение в Grunt, настройка проекта и запуск задач

GRUNT - это система автоматизации (например, минимизация и конкатенация файлов, проверка ошибок, удаление логов, отслеживание изменений проекта, компиляция SASS, LESS и т.д.).

Официальная страница gruntjs.com

Зачем использовать Grunt?

Экосистема Grunt огромна и растет с каждым днем. Сотня плагинов на выбор; вы можете использовать Grunt, чтобы автоматизировать практически все что угодно и с минимальными усилиями. При желании Вы можете написать и опубликовать свой плагин для Grunt. Быстрый старт (http://gruntjs.com/getting-started).

Зачем использовать task runner (таск-менеджер)?

Одно слово – автоматизация. Ваша работа уменьшится при выполнении таких задач как минификация, компиляция, тестирование и т.д. Вам будет легче делать свою работу. После того как вы настроите его через Gruntfile (http://gruntjs.com/sample-gruntfile) все вышеописанные задачи будут сделаны без каких-либо усилий с вашей стороны.

Доступные плагины GRUNT

Доступные плагины GRUNT, на которые стоит обратить внимание:

• Плагин grunt-contrib-jshint(jshint) - проверяет js-код.
• Плагин grunt-contrib-concat(concat) - это плагин, который соединяет файлы одного типа (css,js) в один.
• Плагин grunt-contrib-uglify (uglify) - минификатор, используется для минимизации js-файлов.
• Плагин grunt-contrib-cssmin (cssmin) - минификатор CSS.
• Плагин grunt-contrib-sass (sass) - преобразуем SASS в CSS.
• Плагин grunt-contrib-watch (watch) - отслеживание изменений в файлах.
• Плагин grunt-contrib-imagemin (imagemin) - оптимизация изображений.
• Плагин grunt-autoprefixer (autoprefixer) - парсит CSS и добавляет вендорные префиксы, используя данные с Can I Use.
• grunt-express используем для Livereload
https://github.com/gruntjs/grunt-contrib-cssmin

Grunt и его плагины устанавливаются и управляются посредством npm (менеджера пакетов Node.js). Для справки (освежить в памяти): Gruntfile пример - sample-gruntfile, настраиваем задачи - configuring-tasks.

Устанавливаем grunt:
npm install -g grunt-cli

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

Работаем с существующим проектом

• 1. Перейдите в корневой каталог проекта
• 2. Установите зависимости проекта с помощью npm install
• 3. Запустить Grunt с grunt

Использование, опции, возможные задачи для Grunt можно узнать через команду
grunt –help.

Подготовка проекта

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

Gruntfile: Этот файл называется Gruntfile.js и используется, чтобы настроить или определить задачи и загрузить Grunt плагины. Когда в документации упоминается Gruntfile, речь идет о Gruntfile.js или Gruntfile.coffee.

package.json

Создать package.json можно:

• 1. Командой npm init
• 2. Начните с примером ниже и расширьте его, следуя спецификации

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

В файле package.json имеется свойство scripts, в котором можно определить скрипты. Эти скрипты помогут автоматизировать некоторые процессы. Названием свойства в объекте scripts будет название скрипта, в качестве значение укажем команду, которую мы вводили в терминале. В нашем случае транспилируем код помощи babel: "babel es2015.js -o es5.js". Далее в терминале достаточно будет ввести команду:
npm run build
для выполнение команды babel es2015.js -o es5.js.

"scripts": {
    "build": "babel es2015.js -o es5.js"
}

Установка Grunt и gruntplugins (плагинов/зависимостей)

Самый простой способ добавить Grunt и gruntplugins к существующему package.json:
npm install <module> --save-dev.

Например, это позволит установить последнюю версию Grunt в ваш проект с добавлением его в devDependencies:
npm install grunt --save-dev

Устанавливаем модуль JSHint:
npm install grunt-contrib-jshint --save-dev

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

Gruntfile

Gruntfile состоит из следующих частей:

• Функция-обертка
• Проект и настройка задач
• Загрузка плагинов и задач
• Пользовательские задачи

Пример Gruntfile

module.exports = function(grunt) {

  // Настройки проекта
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Загрузка плагина, который обеспечивает задачу "uglify"
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Задача(и) по умолчанию
  grunt.registerTask('default', ['uglify']);

};

Функция-обертка

Каждый Gruntfile использует этот базовый формат; весь ваш код должен быть определен внутри этой функции:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

Проект и настройка задачи

Большинство Grunt задач полагаются на данные, которые передаются как объект методу grunt.initConfig (grunt.initconfig). Пример настройки задачи uglify, настройки этой задачи задаются в одноименном свойстве.

// Настройки проекта
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

Обратите внимание на использование данных из JSON-файла.

Загрузка плагинов и задач

Большинство задач (минификация, компиляция, тестирование, анализ кода) доступны как плагины grunt. После того как плагин указан в package.json как зависимость и установлен через npm install, его нужно подключить внутри вашего Gruntfile простой командой:

// Загрузка плагина, который обеспечивает задачу "uglify"
grunt.loadNpmTasks('grunt-contrib-uglify');

Пользовательские задачи

Вы можете настроить Grunt, чтобы запускать одну или несколько задач по умолчанию, определив задачу default. В следующем примере команда grunt запустит задачу uglify (что также равнозначно командам grunt uglify и grunt default). Любое количество задач можно указать в массиве:

// // Задача(и) по умолчанию
grunt.registerTask('default', ['uglify']);

Если вашему проекту требуются задачи не предусмотренные плагином Grunt, вы можете определить свою задачу прямо внутри Gruntfile.

Полезные ссылки:
Статья - Grunt 0.4: система сборки для фронтенд-разработчиков
Статья - Grunt для тех, кто считает штуки вроде него странными и сложными
На youtube - Grunt.js - Автоматизация для самых ленивых
Статья - Getting started with Grunt