Что такое Грунт?

Grunt.js — это средство запуска задач, которое автоматизирует повторяющиеся задачи, такие как:

  • Префикс правил CSS
  • Компиляция файлов SASS в CSS
  • Минификация файлов JS/CSS
  • Объединение файлов
  • И многое другое…

А как насчет глотка?

Gulp также является средством запуска задач и, по сути, делает то же самое, что и Grunt. В настоящее время моя команда использует Grunt.

В этой статье мы объединим файлы JS/CSS.

Установка Гранта

  1. Установите Node.js и npm: https://www.npmjs.com/get-npm
  2. Установите grunt-cli глобально:
$ npm install grunt-cli -g

3. Создайте файл package.json:

$ npm init

4. Установите grunt локально:

$ npm install grunt --save-dev

5. Создайте Gruntfile.js

$ touch Gruntfile.js

Что делает этот Gruntfile.js?

It:

  1. Настраивает наши задачи и сообщает плагинам, где найти определенные файлы;
  2. Загрузить плагины в файл (например, uglify);
  3. Зарегистрируйте задачи, которые необходимо выполнить.

Добавьте следующий код в свой Grunfile.js:

При запуске grunt этот файл будет прочитан в следующем порядке:

  • Конфигурация: с помощью grunt.InitConfig() вы можете ставить задачи и настраивать их отдельно;
  • Загрузка: с помощью grunt.loadNpmTasks() вы можете загрузить плагины;
  • Регистрация задач: с помощью grunt.registerTask() вы можете вызывать задачи, заданные в initConfig(), блоками или по отдельности.

Введите в терминале:

$ grunt run
$ grunt sleep
$ grunt all

Он вернет то, что установлено в соответствующем grunt.registerTask().

Установка плагинов

Репозиторий плагинов Grunt находится здесь: www.gruntjs.com/plugin.

Ставим вот этот: https://github.com/gruntjs/grunt-contrib-concat. Этот плагин объединяет файлы. Например: все файлы JS в папке будут объединены в один файл JS.

Для установки введите команду:

$ npm install grunt-contrib-concat --save-dev

Объединение файлов JS

Добавьте папку /js и три файла: one.js, two.js и three.js. Поместите в них любой JS-код.

/js/
/js/one.js
/js/two.js
/js/three.js

Введите следующий код в Gruntfile.js

  • initConfig(): параметр concat и его дочерняя конфигурация определяются подключаемым модулем.
  • loadNpmTasks(): это загрузит плагин в папку /node_modules.

Теперь запустите:

$ grunt concat

Он обработает параметр .initConfig({concat}). Другими словами, будет создана папка /build, а код файла scripts.js будет содержаться во всех файлах /js/*.js. Он объединил все файлы в один.

Объединение файлов CSS

Теперь давайте сделаем то же самое с файлами CSS. Создайте папку /css и три файла: one.css, two.css и three.css. Поместите в них любой код CSS.

/css/
/css/one.js
/css/two.js
/css/three.js

Обновите Gruntfile.js:

Бегать:

$ grunt concat // It'll run concat:js and concat:css
$ grunt concat:js // It'll run concat:js
$ grunt concat:css // It'll run concat:css

Регистрация и запуск задач

Отлично, теперь пришло время понять, как работают задачи. Зарегистрируйте его, добавив следующий код ниже // Регистрация задач:

Бегать:

$ grunt concat-js // It'll run concat:js
$ grunt concat-css // It'll run concat:css
$ grunt concat-js-css // It'll run concat:js and concat:css
$ grunt concat-all // It'll run concat:js and concat:css

Если вы попытаетесь запустить просто $ grunt, вы увидите следующую ошибку: Предупреждение: Задача «по умолчанию» не найдена. Итак, давайте определимся. Обычно задача по умолчанию запускает все, что настроено в Gruntfile.js:

Бегать:

$ grunt

И теперь это работает!

Вот и все! Каждый плагин будет иметь свои конфигурации, и очень важно читать и следовать их документации.