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

Чтобы использовать 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

Интерфейс командной строки ищет установленный 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 файл помещается в корневой директории проекта, рядом с Gruntfile и используется для запуска всех перечисленные зависимости всякий раз , когда вы запускаете команду НОЙ установки в той же папке.

Вы можете создать 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
Пользовательские задачи

Базовый файл 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, и вы можете указать количество задач в массиве.

grunt.registerTask('default', ['uglify']);