Учебники

Grunt — Установка

Декабрь 12, 2018

В этой главе приведена пошаговая процедура установки Grunt в вашей системе.

Системные требования для Grunt

  • Операционная система — кроссплатформенная

  • Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Операционная система — кроссплатформенная

Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

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

Шаг 1 — Нам нужны NodeJ для запуска Grunt. Чтобы скачать NodeJs, откройте ссылку https://nodejs.org/en/ , вы увидите экран, как показано ниже —

Grunt Установка

Загрузите последнюю версию версии zip-файла.

Шаг 2 — Затем запустите программу установки, чтобы установить NodeJ на ваш компьютер.

Шаг 3 — Далее вам нужно установить переменные окружения .

Путь пользователя переменная

  • Щелкните правой кнопкой мыши на Мой компьютер .
  • Выберите Свойства .
  • Далее выберите вкладку « Дополнительно » и нажмите « Переменные среды» .

Grunt Установка

  • В окне « Переменные среды» дважды щелкните ПУТЬ, как показано на экране.

В окне « Переменные среды» дважды щелкните ПУТЬ, как показано на экране.

Grunt Установка

  • Вы получите окно редактирования пользовательской переменной, как показано на рисунке. Добавьте путь к папке NodeJs в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm . Если путь уже задан для других файлов, вам нужно поставить точку с запятой (;) после этого и добавить путь NodeJs, как показано ниже —

Вы получите окно редактирования пользовательской переменной, как показано на рисунке. Добавьте путь к папке NodeJs в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm . Если путь уже задан для других файлов, вам нужно поставить точку с запятой (;) после этого и добавить путь NodeJs, как показано ниже —

Grunt Установка

В конце нажмите кнопку ОК .

Системная переменная

  • В разделе « Системные переменные» дважды щелкните « Путь», как показано на следующем экране.

В разделе « Системные переменные» дважды щелкните « Путь», как показано на следующем экране.

Grunt Установка

  • Вы получите окно редактирования системной переменной, как показано на рисунке. Добавьте путь к папке NodeJs в поле « Значение переменной» как C: \ Program Files \ nodejs \ и нажмите кнопку « ОК», как показано ниже —

Вы получите окно редактирования системной переменной, как показано на рисунке. Добавьте путь к папке NodeJs в поле « Значение переменной» как C: \ Program Files \ nodejs \ и нажмите кнопку « ОК», как показано ниже —

Grunt Установка

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

npm install -g grunt-cli

Выполнение вышеуказанной команды поместит команду grunt в системный путь, что позволяет запускать ее из любого каталога.

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

Шаг 5 — Теперь мы создадим файлы конфигурации для запуска Grunt.

package.json

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

Базовый package.json можно создать, введя в командной строке следующую команду: 

npm init

Базовый файл package.json будет таким, как показано ниже — 

{
   "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> представляет модуль, устанавливаемый локально. Приведенная выше команда также автоматически добавит <module> в devDependencies .

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

npm install grunt --save-dev

Gruntfile.js

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

44
Share: