Учебники

Grunt — Начало работы

Декабрь 12, 2018

Чтобы использовать Grunt, вам необходимо установить Node.js. Установка Node.js была объяснена в предыдущей главе . Вы можете установить плагины Grunt и Grunt с помощью диспетчера пакетов Node.js.

Перед настройкой Grunt в системе вы можете обновить менеджер пакетов Node с помощью следующей команды: 

npm update -g npm

Если вы используете Mac или Linux, вам нужно использовать слово sudo в начале командной строки, чтобы предоставить администратору доступ, как показано ниже — 

sudo npm update -g npm

Установка CLI

CLI обозначает интерфейс командной строки, который запускает установленную версию Grunt. Чтобы начать работу с Grunt, вам нужно установить интерфейс командной строки (CLI) Grunt глобально, как показано ниже — 

npm install -g grunt-cli

Выполнение вышеуказанной команды поместит команду grunt в системный путь, что позволяет запускать ее из любого каталога. Вы не можете установить Grunt Task Runner, установив grunt-cli . Это позволяет машине устанавливать несколько версий Grunt одновременно.

Работа CLI

CLI ищет установленный Grunt в вашей системе, используя систему require () при каждом запуске Grunt. Используя grunt-cli , вы можете запускать Grunt из любой директории вашего проекта. Если вы используете локально установленный Grunt, то grunt-cli использует локально установленную библиотеку Grunt и применяет конфигурацию из файла Grunt.

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

Если вы работаете с уже настроенным проектом, который включает package.json и Gruntfile , выполните простые шаги, как указано ниже:

  • Найдите путь к корневому каталогу проекта.
  • Вы можете установить зависимости с помощью команды npm install .
  • Запустите Grunt с помощью команды grunt .

Если вы создаете новый проект, включите два файла package.json и Gruntfile в свой проект.

  • package.json — файл package.json находится в корневом каталоге проекта и используется для запуска каждой из перечисленных зависимостей при каждом запуске команды npm install в той же папке.

  • Gruntfile.js — файл Gruntfile.js используется для записи параметров конфигурации проекта.

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

Gruntfile.js — файл Gruntfile.js используется для записи параметров конфигурации проекта.

package.json

Файл package.json находится в корневом каталоге проекта рядом с Gruntfile и используется для запуска каждой из перечисленных зависимостей при каждом запуске команды npm install в той же папке.

Вы можете создать package.json различными способами, как указано ниже —

  • Вы можете grunt-init создать файл package.json.
  • Вы также можете создать файл package.json с помощью команды npm-init .

Вы можете написать спецификацию, как показано ниже — 

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

Вы можете добавить Grunt и gruntplugins в существующий файл pacakge.json, используя следующую команду: 

npm install <module> --save-dev

Здесь <module> представляет модуль для локальной установки. Приведенная выше команда установит указанный модуль и автоматически добавит его в раздел devDependencies .

Например, следующая команда установит последнюю версию Grunt и добавит ее в ваши devDependencies — 

npm install grunt --save-dev

Gruntfile

Файл Gruntfile.js — это место по умолчанию, в котором ваши настройки будут сохранены для Grunt. Файл Grunt включает в себя следующие части —

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

Основной файл Gruntfile.js показан ниже: 

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

   // Load the plugin that provides the "uglify" task
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s)
   grunt.registerTask('default', ['uglify']);
};

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

В приведенном выше коде module.exports является функцией-оболочкой, в которой вся конфигурация находится внутри этой функции. Это способ отображения конфигурации для остальной части приложения. 

module.exports = function(grunt) {
   //do grunt-related things here
}

Конфигурация проекта и задачи

Вы можете настроить задачи Grunt, как только ваша конфигурация Grunt будет готова. Конфигурация проекта может быть записана в разделе grunt.initConfig () . Внутри функции grunt.initConfig () возьмите информацию о конфигурации из файла package.json и сохраните ее в pkg . Вы можете назвать имя своего проекта, используя pkg.name, а версию с pkg.version .

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

Загрузите задачи из указанного плагина с помощью метода grunt.loadNpmTasks . Вы можете установить плагин локально, используя npm, и он должен быть относительно Gruntfile. Вы можете загрузить плагин с помощью простой команды, как показано ниже — 

grunt.task.loadNpmTasks(pluginName)

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

Когда вы запускаете Grunt через командную строку, Grunt будет искать задание по умолчанию . В приведенном выше коде мы используем задачу uglify, которую можно запустить с помощью команды grunt . Это то же самое, что и явное выполнение команды grunt uglify, и вы можете указать количество задач в массиве.

46
Share: