Настройка системы сборки

Попробуем вместе сделать простую систему сборки — каждый раз при написании чего-либо в нашем CSS-файле она будет минимизировать CSS и сохранять копию в определённой папке.

Чтобы проделать всё это, вам нужно экипировать себя некоторыми инструментами: Node.js, npm (node package manager, менеджер пакетов Node) и Gulp.

Вы должны знать как пользоваться командной строкой — cmd в Windows или Terminal в Linux. Вы также должны знать, как в командной строке перемещаться из одной папки в другую и как создавать папки и файлы.

Установка Node.js

Чтобы установить Node.js отправляйтесь на официальный сайт: nodejs.org. В зависимости от операционной системы вам будет предложен правильный файл для установки, всё просто!

После установки убедитесь, что у вас есть Node. Откройте командную строку и введите node -v. Если вы видите версию nodejs, значит всё в порядке.

Установка npm

Между прочим, npm является менеджером всех пакетов, разработанных для Node.js. Поскольку вам потребуются эти пакеты, нам нужен и их менеджер.

Я не буду повторять здесь весь процесс, а хотел чтобы вы перешли сюда и установили npm в соответствии с вашей операционной системой. После того, как это будет сделано, вы можете проверить установку, набрав npm -v в командной строке. Аналогично, если вы видите версию, значит всё в порядке.

Перед установкой Gulp мы должны настроить папку проекта. У меня следующая структура:

Build
- index.html

Установка Gulp

Для начала мы должны установить Gulp глобально, чтобы наш компьютер был в курсе о его наличии. Так что для этого выполните следующую команду:

npm install --global gulp

В Linux вам может потребоваться sudo.

Поскольку Gulp является пакетом Node.js мы должны настроить пакеты Node через файл настроек с именем package.json. Этот файл говорит Node, какие пакеты требуются в нашем проекте.

Так что переходим в папку проекта и создаём файл package.json. Откройте его и введите следующее:

{

}

Вы также можете создать файл, выполнив npm init и сказав yes для всех шагов.

Теперь ваша папка должна выглядеть следующим образом:

Build
- index.html
- package.json

Для установки Gulp перейдите в папку проекта командой cd. В моем случае:

$ cd ~/
$ cd web
$ cd build

Я использую Ubuntu и моя корневая папка находится в папке web. В ней я создал папку Build для нашего проекта.

В Windows это может быть что-то вроде: cd c:\wamp\www\build

Затем запустите следующую команду, чтобы npm установил копию Gulp в текущем проекте в качестве необходимого пакета.

npm install --save-dev gulp

После этого откройте файл package.json в вашем любимом текстовом редакторе. Вы увидите нечто похожее на это:

{
"devDependencies": {
  "gulp": "^3.8.11"
  }
}

Если вы создали package.json через npm init, то должны увидеть больше информации, но она нам не интересна, так что переходим до указанной части файла.

Здесь показано что Gulp был добавлен в наш текущий проект как зависимость. Версия 3.8.11 самая последняя.

После успешного выполнения команды, новая папка (node_modules) будет добавлена в основную папку. Она теперь должна выглядеть так: