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

У всх web-ориентированных проектов, вне зависимости от того, на каком языке и с использованием какого фреймворка они написаны, есть общие черты: использование JavaScript, CSS, HTML. Ниже рассмотрен процесс создания универсального окружения, с помощью которого можно совершать основные процедуры над общей для всех web-проектов частью: проверка и минификация JS, CSS и автоматизация этих процессов.

Установка nodejs и npm

Большинство используемых в последнее время в веб-разработке утилит написаны в виде пакетов npm к node.js, соответственно в первую очередь необходимо установить сам node и установщик npm-пакетов. Подробно про установку node.js можно прочитать на странице wiki проекта: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager. Для Ubuntu 14.04 в репозитории имеется собранный пакет, соответственно, в таком случае, установка сводится к выполнению в консоли следующих команд:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Установленный из репозиториев пакет в системе может быть зарегистрирован на исполнение под названием nodejs, в то время как все npm-утилиты ожидают получить исполняемый файл node, и при запуске любой из таких утилит в консоли будет отображена ошибка:

/usr/bin/env: node: No such file or directory

Чтобы исправить ситуацию, создаим символьную ссылку:

sudo ln -s /usr/bin/nodejs /usr/bin/node

Установка пакетов

Установленный node.js представляет собой кросспалтформенное окружение для разработки серверных приложений на javascript, а npm - установщик пакетов для этого окружения, аналогично apt-get в ubuntu. Устанавливать пакеты можно глобально, на уровне системы, а можно и локально, в папку текущего проекта. По-умолчанию запускается локальная установка, для глобальной необходимо добавить флаг -g:

sudo npm install <packet_name> -g

После выполнения глобальной установки пакета, соответствующая программа доступна для вызова из консоли в любой директории. Локальная установка (без флага -g) выполняется в текущую директорию (подразумевается, что это будет корневая директория проекта), в папку node_modules/<packet_name>. Если у пакета есть свои зависимости, то (при условии их отсутствия в системе) они так же устанавливаются в директорию node_modules, но уже внутри директории с файлами пакета. Получается такое дерево каталогов: project_source/node_modules/<package_name/node_modules/<dependency_package_name>.

Альтернативный способ управления локальными пакетам - создание файла package.json. Если такой файл имеется в каталоге и, из этого же каталога, вы запустите команду npm install, то npm загрузит и установит зависимости, указанные в этом файле. Такой способ управления установленными пакетами позволяет воссоздавать окружение для работы и делиться им с другими разработчиками. Создать файл package.json можно или вручную, или при помощи команды npm init, в ходе выполнения которой вам будет предложено в консоли ответить на несколько вопросов, и будет сформирован файл с данными, на основании ваших ответов. В самом просто вариант package.json имеет такое содержимое:

{
    "name": "demo-app",
    "version": "1.0.0"
}

После создания packages.json в нужном нам каталоге, добавлять пакеты в него можно двумя способами: вручную, заполняя зависимости в соответствующем разделе файла:

{
    "name": "demo-app",
    "version": "1.0.0",
    "dependencies": {
        "lodash": "^2.4.1",
    }
}

или при помощи флага --save:

npm install lodash --save

Для обновления локально установленных пакетов используется команда npm update, запускать которую следует находясь в том же каталоге, что и файл packages.json. Проверить наличие устаревших версий пакетов можно командой npm outdated. В случае обновления глобальных пакетов, во избежание нежеланных последствий, лучше всего использовать ту же команду, что и для установки. Если запустить npm update -g, то будет выполнено обновление не только глобальных пакетов, но и их зависимостей, что чаще всего нежелательно. То есть, чтобы обновить, скажем, jshint, необходимо в консоли выполнить

npm install -g jshint

Сама утилита npm является npm - пакетом, поэтому обновление происходит по описанной выше схеме.

Установка и использование jshint

JSHint - программа, которая сообщает о неверных/подозрительных участках кода на JavaScript. Как говорит буржуйская википедия, jshint - статический анализатор кода, используемый для проверки JavaScript на успешную компиляуию в соответствии с правилами кода. Нас интересует версия программы, работающая из командной строки и распространяемая в виде модуля Node (npm). Для установки (имеет смысл устанавливать глобально и использовать для всех проектов одинаково) необходимо выполнить следующую команду:

$ sudo npm install jshint -g

После установки jshint глобально, команда доступна для запуска в консоли в любом каталоге любого проекта. Синитаксис прост: jshint <file_to_check.js>. Для проверки создадим простой файл jshint_test.js со следующим содержимым:

function sum(a, b) {
  var c = a + b;
  console.log(c);
}

и выполним команду

$ jshint jshint_test.js

Что мы видим? Ничего? Верно. Не совсем очевидно, но если файл не содержит ошибок или замечаний, то jshint ничего не возвращает. Чтобы убедиться, что все действиельно работает, как надо, добавим несколько явных ошибок в наш файл:

function sum(a, b) {
  var c = a + b
  console.log(c);

и снова запустим проверку:

$ jshint jshint_test.js 
jshint_test.js: line 2, col 16, Missing semicolon.
jshint_test.js: line 1, col 20, Unmatched '{'.

2 errors

В этот раз мы получили сообщения об ошибках: отсутствующие закрывающая фигурная скобка и точка с запятой. Изначально jshint запускается с набором предупреждений "по умолчанию", который можно расширять-дорабатывать по собственному усмотрению. Подробнее - в докуменации к проекту: http://jshint.com/docs/