Frontender Magazine

Руководство по использованию Grunt для начинающих: пересмотренное издание

Логотип Grunt

Ещё в марте 2013 я написал «Руководство по использованию Grunt для начинающих», и эта статья стала самой популярной на сайте. Я написал её когда только начинал знакомство с Grunt, так что это было в большей степени руководство для меня самого, чем для кого-то другого. Теперь, спустя полтора года, я чувствую необходимость пересмотреть свои подходы к использованию Grunt, потому что за это время я многому научился.

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

Глобальная установка Node и Grunt

Во-первых, вам нужно убедиться, что у вас установлен Node и Grunt CLI (command line interface).

npm install -g grunt-cli

Установка Ruby и Sass

Обновление: я недавно переключился с grunt-contrib-sass на grunt-sass, использующий экспериментальный компилятор libsass на C++, он быстрее и не требует установки Ruby и gem Sass. Однако, если у вас возникают проблемы при компиляции с помощью grunt-sass, то, возможно, вам нужно использовать grunt-contrib-sass — в этом случае вам понадобится установка Ruby и gem Sass.

Я использую Sass в качестве CSS-препроцессора. Для использования Sass в виде Grunt-задачи вам нужно установить Ruby (полная инструкция по установке здесь), а после этого gem Sass:

gem install sass

Создание структуры проекта

Для начала в наш проект нужно добавить несколько директорий, их структура отражена ниже:

grunt/
src/
src/images/
src/scripts/
src/styles/

Создание Gruntfile

Я больше не использую инструменты-генераторы (такие как grunt init или Yeoman). Я устанавливаю всё самостоятельно, а это означает, что я гораздо лучше понимаю что происходит. На самом деле всё не так сложно, если вы проделаете это несколько раз.

В корне вашего проекта создайте файл Gruntfile.js.

Добавьте в этот файл следующий код:

module.exports = function(grunt) {

  require('time-grunt')(grunt);

  require('load-grunt-config')(grunt, {
    jitGrunt: true
  });
};

Верите или нет — это всё, что с нужно сделать с Gruntfile!

time-grunt сообщает вам как много времени занимает каждая задача и общее время сборки, а jitGrunt: true указывает load-grunt-config использовать быстрый jit-grunt (Just In Time) загрузчик задач (это опционально, но нам же важна скорость?).

Создание файла пакета

Давайте пойдем дальше и создадим наш базовый файл package.json, через некоторое время он будет содержать в себе зависимости нашего проекта. Создайте файл и скопируйте в него этот код (очевидно, что нужно сменить «my project» на настоящее имя вашего проекта):

{
 "name": "my-project",
 "version": "0.0.1",
 "description": "My project"
}

Добавление зависимостей

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

npm install grunt --save-dev
npm install time-grunt --save
npm install load-grunt-config --save-dev
npm install grunt-concurrent --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-sass --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-jshint --save-dev
npm install jshint-stylish --save
npm install grunt-contrib-watch --save-dev

Если вы теперь заглянете в package.json, то увидите такое:

{
 "name": "my-project",
 "version": "0.0.1",
 "description": "My Project",
 "devDependencies": {
  "grunt": "^0.4.5",
  "grunt-concurrent": "^1.0.0",
  "grunt-contrib-clean": "^0.6.0",
  "grunt-contrib-imagemin": "^0.8.1",
  "grunt-contrib-jshint": "^0.10.0",
  "grunt-contrib-uglify": "^0.6.0",
  "grunt-contrib-watch": "^0.6.1",
  "grunt-sass": "^0.16.1",
  "load-grunt-config": "^0.13.1"
 },
 "dependencies": {
  "jshint-stylish": "^1.0.0",
  "time-grunt": "^1.0.0"
 }
}

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

  1. grunt: сам исполнитель задач.
  2. time-grunt: это не обязательное, но весьма полезное дополнение, оно сообщает, сколько времени занимает каждая задача и общее время выполнения.
  3. load-grunt-config: позволяет вам содержать ваш основной Gruntfile коротким и аккуратным, подробнее об этом чуть позже.
  4. grunt-concurrent: запускает задачи одновременно. Grunt «из-коробки» будет запускать каждую задачу по очереди, что может затянуться на некоторое время, в зависимости от количества и типа выполняемых задач, однако часто есть задания, которые не зависят друг от друга и могут быть запущены одновременно.
  5. grunt-contrib-clean: очень просто, эта задача удаляет «разные штуки» — используйте с осторожностью!
  6. grunt-contrib-imagemin: незаменимая вещь для оптимизации изображений.
  7. grunt-sass: компиляция ваших SASS/SCSS файлов в CSS. Обратите внимание: эта Sass-задача использует более быстрый компилятор libsass компилятор, но он экспериментальный. Если у вас возникнут проблемы, то лучше используйте более стабильный, но медленный grunt-contrib-sass.
  8. grunt-contrib-uglify: делает ваш Javascript красивым и ужасным.
  9. grunt-contrib-jshint: валидация файлов Javascript.
  10. jshint-stylish: полностью опционально, но эта задача преобразовывает вывод grunt-contrib-jshint в отличный вид.
  11. grunt-contrib-watch: запускает задачи при каких-либо изменениях в наблюдаемых файлах.

Конфигурация задач

Один из лучших модулей, который я встречал — load-grunt-config. Он позволяет нам задавать конфигурацию для каждой задачи в отдельных файлах — это удобнее, чем просто складывать всё в один длинный Gruntfile.

В директории grunt создайте следующие файлы:

grunt/aliases.yaml
grunt/concurrent.js
grunt/clean.js
grunt/imagemin.js
grunt/jshint.js
grunt/sass.js
grunt/uglify.js
grunt/watch.js

Обратите внимание: имена этих файлов должны соответствовать названиям задач.

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

aliases.yaml

default:
 description: 'Сборка по умолчанию (продакшн)'
 tasks:
  - prod
dev:
 description: 'Сборка для разработки'
 tasks:
  - 'concurrent:devFirst'
  - 'concurrent:devSecond'
img:
 description: 'Работа с изображениями'
 tasks:
  - 'concurrent:imgFirst'
devimg:
 description: 'Сборка для разработки и работа с изображениями'
 tasks:
  - dev
  - img
prod:
 description: 'Сборка продакшна'
 tasks:
  - 'concurrent:prodFirst'
  - 'concurrent:prodSecond'
  - img

Здесь мы задаём псевдонимы для наших задач:

Здесь более подробная информация по настройке алиасов для load-grunt-config.

concurrent.js

module.exports = {

  // Настройки задач
  options: {
    limit: 3
  },

  // Задачи для разработки
  devFirst: [
    'clean',
    'jshint'
  ],
  devSecond: [
    'sass:dev',
    'uglify'
  ],

  // Задачи для продакшна
  prodFirst: [
    'clean',
    'jshint'
  ],
  prodSecond: [
    'sass:prod',
    'uglify'
  ],

  // Image tasks
  imgFirst: [
    'imagemin'
  ]
};

Если, например, взять dev-задачи, вы увидите, что сначала должен запуститься clean, а затем sass:dev и uglify одновременно — для перегенерации CSS и Javascript.

Здесь более подробная информация по управлению grunt-concurrent.

clean.js

module.exports = {
  all: [
    "dist/"
  ]
};

Управлять grunt-contrib-clean совсем несложно: здесь я просто говорю, что нужно удалить содержимое директории dist/. Используйте эту задачу с осторожностью — она будет удалять без разбора всё, что вы ей скажете — без всяких оповещений, поэтому убедитесь, что всё настроили правильно.

Здесь более подробная информация по конфигурированию grunt-contrib-clean.

imagemin.js

module.exports = {
  all: {
    files: [{
      expand: true,
      cwd: 'src/',
      src: ['images/*.{png,jpg,gif}'],
      dest: 'dist/'
    }]
  }
};

Эта задача просто оптимизирует все изображения из src/images/ и сохраняет их в dist/images/.

Здесь более подробная информация по управлению grunt-contrib-imagemin.

sass.js

module.exports = {
  // Настройки для разработки
  dev: {
    options: {
      outputStyle: 'nested',
      sourceMap: true
    },
    files: [{
      expand: true,
      cwd: 'src/styles',
      src: ['*.scss'],
      dest: 'dist/styles',
      ext: '.css'
    }]
  },
  // Настройки для продакшна
  prod: {
    options: {
      outputStyle: 'compressed',
      sourceMap: false
    },
    files: [{
      expand: true,
      cwd: 'src/styles',
      src: ['*.scss'],
      dest: 'dist/styles',
      ext: '.css'
    }]
  }
};

Я разделил Sass-задачу на процессы для разработки (dev) и для выкладки на действующий сайт (prod). Конфигурации очень схожи, но для разработки я установил стиль вывода nested и включил карты кода.

Здесь более подробная информация по конфигурации grunt-sass.

jshint.js

module.exports = {

  options: {
    reporter: require('jshint-stylish')
  },

  main: [
    'src/scripts/*.js'
  ]
};

Задача jshint проверяет Javascript и сообщает, всё ли в порядке.

Здесь более подробная информациия по конфигурированию grunt-contrib-jshint.

uglify.js

module.exports = {
  all: {
    files: [{
      expand: true,
      cwd: 'src/scripts',
      src: '**/*.js',
      dest: 'dist/scripts',
      ext: '.min.js'
    }]
  }
};

Задача uglify берёт Javascript-файлы и минифицирует их — всё просто!

Здесь более подробная информация по конфигурированию grunt-contrib-uglify.

watch.js

module.exports = {

  options: {
    spawn: false,
    livereload: true
  },

  scripts: {
    files: [
      'src/scripts/*.js'
    ],
    tasks: [
      'jshint',
      'uglify'
    ]
  },

  styles: {
    files: [
      'src/styles/*.scss'
    ],
    tasks: [
      'sass:dev'
    ]
  },
};

watch запускает заданные задач при изменении в наблюдаемых файлах — при добавлении, редактировании или удалении.

Обратите внимание: наиболее простой способ заставить работать Livereload — это установить расширение для браузера.

Здесь более подробная информация по конфигурированию grunt-contrib-watch и Livereload.

Запуск задач

Если вы уже закончили создавать свой проект по инструкции выше, вы сможете запустить выполнение задач. Как уже говорилось, есть различные псевдонимы для задач, которые вы можете запускать. Сейчас просто запустите grunt в командной строке из корня вашего проекта.

Если всё в порядке, вы должны увидеть ползущий по экрану текст и финальное сообщение, примерно такое:

Вывод продакшн-сборки Grunt

Мне нравится небольшой отчет, который выводит time-grunt. Я могу увидеть сколько времени выполняются задачи, запускаемые одновременно, и сколько занимает весь процесс — круто!

В зависимости от ваших требований вы также можете выбрать для запуска команды grunt dev, grunt devimg или grunt img.

Ещё вы можете запустить grunt watch, если вам нужно следить за изменениями в ваших .scss и .js файлах и автоматически запускать выполнение sass или jshint и uglify.

Выводы

Ну вот, пожалуй, и всё. Если вы поэкспериментируете с примерами, описанными выше, то скоро набьёте руку, начнёте добавлять новые задачи и подстраивать рабочий процесс под свои нужды.

Повторюсь, код из этой статьи можно найти на Github.

Оставляйте любые вопросы в комментариях ниже или задавайте их на github.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Matt Bailey
Автор:
Matt Bailey
Сaйт:
http://mattbailey.io/
GitHub:
matt-bailey
Twitter:
@_mattbailey
Виктор Матушевский
Переводчик:
Виктор Матушевский
Сaйт:
MODX Revolution
GitHub:
Viktorminator
Twitter:
@viktorminator

Комментарии (7 комментариев, если быть точным)

Автар пользователя
akotlyachkov

Мне не понятно, как сделать, если я хочу чтобы в dev режиме js добавлялся в виде отдельных файлов (с сохранением дерева), а в prod режиме минифицировался и клеился в 1 файл? Про css вопрос аналогичный, но в примере вроде сказано, что для dev надо указать настройку "sourceMap: true"

Автар пользователя
nicothin

хочется понять: зачем создавать отдельные файлы настроек для каждой задачи, если можно все написать в Gruntfile.js и иметь все настройки в едином месте? не вижу каких-либо преимуществ...

Автар пользователя
edstarck

Здравствуйте!!! Очень нравиться как Вы Назар пишите. А не могли бы Вы осветить такой вопрос или вопросы, как использование grunt, gulp, git, bem, jade, less sass stylus. я о чем: в нете много инфы, но она вся либо начальная либо в основном не понятно как ее на проекте использовать. Если Вы можите не могли бы Вы взять макет желательно средний-сложный и по урокам описать все технологии на одном проекте. Чтоб в конце были использованы все технологии и версии production and developer. Мне кажется это было бы очень круто и полезно многим. Спасибо за Ваш труд.

Автар пользователя
kinderock

Плохо, что рассматривая подобные мануалы редко когда затрагиваются grunt-contrib-connect и grunt-spritesmith (+ аналоги)... А еще вместо Sass можно спокойно использовать Stylus, и нет необходимости ставить Ruby

Автар пользователя
a-wart

а я думал, в «Пересмотренном издании» по использованию Grunt для начинающих будет что-то типа «прекратите использовать Grunt. Используйте Gulp — и тогда всё у вас будет хорошо». Ан нет. Хм.

Автар пользователя
MonX94

Verifying property concurrent.prodFirst exists in config...ERROR

Unable to process task. Warning: Required config property "concurrent.prodFirst" missing. Use --force to continue.

Aborted due to warnings.

И что делать?

Автар пользователя
EdenDA

"Aborted due to warnings.

И что делать?"

Я написал grunt --force и всё запустилось норм, кроме sass) пишет надо Ruby установить. Ток я походу сейчас снесу всё ибо подгорает уже. Done, without errors что дальше вообще хз.