Налаштування системи складання

Спробуймо разом зробити просту систему складання — щоразу при написанні чогось у нашому CSS-файлі вона мінімізуватиме CSS і зберігатиме копію в певній папці.

Щоб зробити все це, вам потрібно екіпірувати себе деякими інструментами: Node.js, npm (node package manager, менеджер пакетів Node) і Gulp. Ви повинні знати як користуватися командним рядком — cmd у Windows або Terminal в Linux. Ви також повинні знати, як в командному рядку переміщатися з однієї папки в іншу і як створювати папки та файли. nodejs.org. Залежно від операційної системи вам буде запропоновано правильний файл для інсталяції, все просто!

Після встановлення переконайтеся, що у вас є Node. Відкрийте командний рядок та введіть node-v. Якщо ви бачите версію nodejs, це все гаразд.

Установка npm

Між іншим, npm є менеджером усіх пакетів, розроблених для Node.js. Оскільки вам потрібні ці пакети, нам потрібен і їх менеджер.

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

Перед установкою Gulp ми повинні налаштувати папку проекту. У мене є наступна структура:

• Build
  • index.html

Установка Gulp

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

<code>npm install--global gulp

У Linux вам може знадобитися sudo.

Оскільки Gulp є пакетом Node.js, ми повинні налаштувати пакети Node через файл налаштувань з ім'ям package.json. Цей файл каже Node, які пакети потрібні в нашому проекті.

Так що переходимо до папки проекту та створюємо файл package.json. Відкрийте його та введіть наступне:

<code>{ }

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

Тепер ваша папка повинна виглядати так:

• Build
  • index.html
  • package.json

Для встановлення Gulp перейдіть до папки проекту командою cd. У моєму випадку:

<code>$ cd ~/$ cd web $ cd build

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

У Windows це може бути щось на зразок: cd c:\wamp\www\build

Потім запустіть наступну команду, щоб npm встановив копію Gulp у поточному проекті як потрібний пакет.

<code>npm install--save-dev gulp

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

<code>{ "devDependencies": { "gulp": "^3.8.11" } 
}

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

Тут показано що Gulp був доданий до нашого поточного проекту як залежність. Версія 3.8.11 остання.

Після успішного виконання команди, нова папка (node_modules) буде додана в основну папку. Вона має виглядати так:

• Build/
  • index.html
  • package.json
  • gulpfile.js
  • node_modules/
    • gulp/
    • ...