Настройка окружения для работы над web-проектом (часть 2)

В прошлой части мы разобрались с установкой платформы node, работой с менеджером пакетов npm и узнали как при помощи всего этого организовать проверку js-кода. Но процесс проверки в том виде, в котором мы его оставили, представляет собой ручной запуск команды для каждого файла по отдельности - это утомительно и с этом нужно что-то делать. Займемся автоматизацией - установим и настроим Grunt - иснструмент командной строки для сборки javascript-проектов, позволяющий автоматизировать выполнение определенных задач.

Установка Grunt

Работа с grunt в самом простом случае представляет собой запуск определенных команд из командной строки, поэтому первое, что нам потребуется установить, это grunt-cli. По-скольку чаще всего grunt используется для всех проектов, то установка утилиты командной строки выполняется глобально, от имени суперпользователя:

$ sudo npm install -g grunt-cli

Предполагается, что мы находимся в корне нашего проекта и файл packages.json уже существует. Подробнее про этот файл можно прочитать в предыдущей части статьи. Наши дальнейшие действия - установка grunt (наконец-то!) и сразу же, плагина для работы с jshint - мы ведь изначально решил упростить процесс проверки javascript. Приступим:

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

Ключ --save-dev позволяет сохранить информацию об установленных пакетах в файл packages.json в раздел "devDependecies":

{
  "name": "demo-app",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^2.4.1",
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "^0.11.1"
  },
}

Основное отличие от обычного --save и раздела "dependencies" в том, что пакеты сохраненные в "devDependencies" не устанавливаются при стандартной установке пакета через npm install. То есть, если опубликовать наше приложение как npm-пакет и запустить npm install demo-app, то считается, что lodash необходим для корректной работы приложения, и он будет установлен, а вот grunt и grunt-contrib-jshint нужны только в процессе разработки-тестирования и устанавливаться не будут.

Настройка

Для настройки выполняемых задач grunt используется файл gruntfile.js, который должен находиться в корне проекта, в том же каталоге, что и packages.json. Ниже приводится пример самого простого файла gruntfile.js, позволяющего нам запускать задачу проверки javascript на ошибки и потенциальные проблемы.

module.exports = function(grunt) {
 
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
      files: ['gruntfile.js', 'static/js/*.js', 'some_app/static/**/*.js']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
 
};

Рассмотрим по частям содержимое файла. Сначала идет функция-обертка, которая включает в себя всю конфигурацию для grunt:

module.exports = function(grunt) {
}

Внутри этой функции мы инициализируем объект настроек:

grunt.initConfig({
});

Следующим шагом мы читаем настройки проекта из packages.json в переменную pkg. Это позволяет нам ссылаться на настройки, использованные ранее в packages.json.

pkg: grunt.file.readJSON('package.json')

После этого идут разделы с индивидуальными настройками для каждой отдельной задачи. В нашем случае в файле содержится только один раздел, для запуска jshint. JSHint в качестве настроек принимает массив файлов (files: ['gruntfile.js', 'static/js/*.js', 'some_app/static/**/*.js']), которые необходимо проверять, и, опционально, объект настроек (options: {}). В нашем случае options отсутствует - мы используем настройки по-умолчанию.

Последний пункт - указываем grunt-у загрузить необходимые нам плагины:

grunt.loadNpmTasks('grunt-contrib-jshint');

После этого мы можем запускать проверку javascript из консоли командой

$ grunt jshint

Больше информации можно найти по ссылкам на официальный сайе grunt: