Grunt

Запуск нескольких задач одновременно

После того как мы увидели как работают наши задачи, давайте сделаем нечто более эффективное и выполним всё сразу с помощью только одной задачи. Это гораздо лучше, чем отдельное выполнение grunt uglify, grunt jshint и т. д.

Компиляция Less в CSS

Для этого примера мы воспользуемся Less. Чтобы сделать то же самое для Sass вы можете использовать пакет grunt-contrib-compass. Вот наши настройки для компиляции Less-файлов. Как и в примере с минимизацией JavaScrip в параметрах определяются исходные и выходные файлы.

Минимизация CSS-файлов

Подобно минимизации JS-файлов настройки для такой задачи довольно простые. Мы уже это проходили, так что создайте такую конфигурацию.

// Gruntfile.js
grunt.initConfig({

  ...
  // параметры cssmin для минимизации CSS-файлов
  cssmin: {
    options: {
      banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
    },
    build: {
      files: {
        'dist/css/style.min.css': 'src/css/style.css'
      }
    }
  }

});

Минимизация JavaScript-файлов

Будем использовать тот же формат. Вызовем пакет uglify, настроим его и укажем, какие файлы задействовать и создать.

Почему Gulp?

Как уже упоминалось, Gulp является одним из немногих инструментов сборки, доступных на JavaScript. Также есть и другие инструменты сборки, написанные не на JavaScript, тот же Rake. Почему вы должны выбрать Gulp?

Приступая к работе с Grunt

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

Различные задачи для разных условий

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

Следим за изменениями и запускаем задачи

Задача watch будет выполняться каждый раз при изменении и сохранении файла. Всё, что нам надо сделать, это следить за определёнными файлами и сказать что делать, когда эти файлы изменятся. Давайте отойдём от базовой конфигурации build, которую мы использовали ранее и сделаем разделение на стили и скрипты. Мы делаем так потому, что хотим задать разные задачи для каждого типа файлов.

Установка и настройка Grunt

Grunt является рабочей лошадкой в мире Node. Если вам нужно выполнять задачи, включите Grunt в работу. Если вы из мира Rails, Grunt похож на Rake. Существует масса документации о Grunt, но в этом руководстве я остановлюсь на основах, которые помогут вам в работе с приложением.

Установка и настройка Grunt

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