Як встановити NodeJs, Gulp та Bower під *ubuntu (коротко)

Ця стаття скоріше необхідність, ніж детальний посібник по node, gulp, bower та npm. Справа в тому, що наступні кілька статей торкатимуться верстки. А я останнім часом все частіше використовую подібні «механізми» для спрощення та оптимізації робочого процесу.

Короткий опис:
Gulp — збирач проєктів, написаний на node.js
Bower — менеджер пакетів для фронтенду в web. Також написаний на node.js
Node.js — програмна платформа, заснована на рушії V8 (який транслює JavaScript у машинний код)
Npm — пакетний менеджер для node.js (а Gulp і Bower є його пакетами)

Отже, що нам потрібно в результаті? — встановлені та робочі Gulp і Bower. Вони дозволять підвищити продуктивність у розробці web-проєктів.

А для цього нам знадобиться встановити Node.js і Npm. Поїхали.

Встановлення

Встановлення NodeJs:

$ sudo apt-get install nodejs

Встановлення менеджера пакетів Npm:

$ sudo apt-get install npm

Не знаю, як під Windows, але під Ubuntu це робиться дуже просто :). Навіть нічого попередньо завантажувати не потрібно. Ввів команду — і вуаля, все готово.

Встановлення Gulp:

$ sudo npm install gulp -g

Це встановить gulp глобально, надаючи доступ до gulp CLI (тобто можливість працювати з ним через термінал/консоль)

Встановлення Bower:

$ sudo npm install bower -g

Використання

Ви можете використовувати gulp і bower через термінал. Тобто встановлювати, оновлювати та видаляти потрібні чи зайві пакети. Але за досвідом скажу — простіше зробити шаблонний файл і копіювати його в проєкт, видаляючи чи додаючи потрібні пакети по необхідності.

Gulp

На даний момент мій package.json для Gulp має такий вигляд:

{
"devDependencies": {
"bower": "*",

"gulp": "*",
"gulp-sass": "*",
"gulp-minify-css": "*",
"gulp-concat": "*",
"gulp-uglify": "*",

"fs": "*",
"gulp-header": "*"
}
}

Ці пакети я використовую для верстки WordPress тем.

Файл gulpfile.js має наступний код:

var fs			= require('fs');
var header		= require('gulp-header');

var gulp		= require('gulp');
var sass		        = require('gulp-sass');
var minifycss	= require('gulp-minify-css');

gulp.task('default', function() {
	gulp.watch('scss/*.scss', ['scss-index']);
});

gulp.task('scss-index', function () {
	gulp.src('scss/style.scss')
	.pipe(sass.sync().on('error', sass.logError))
	//.pipe(minifycss())
	.pipe(header(fs.readFileSync('scss/_header.txt', 'utf8')))
	.pipe(gulp.dest('../'));
});

Як цим скористатись? Створюємо два файли, що були зазначені вище, і вставляємо в них код. Далі відкриваємо командний рядок і вводимо:

$ npm install
// або
$ npm i

Це змусить npm встановити всі пакети з файлу package.json у каталог проєкту.

Після завершення встановлення пакетів запускаємо наш gulpfile.js простою командою:

$ gulp

Після чого все має запрацювати або ж відобразити помилку.

Bower

Користуватися ним не складніше. Усі доступні пакети можна знайти через пошук Bower (https://bower.io/search/). До речі, з пакетами npm та gulp ситуація аналогічна — у них є свої пошукові сторінки: http://gulpjs.com/plugins/ та https://www.npmjs.com/

Файл bower.json може мати такий вигляд:

{
"name": "wordpress-theme",
"dependencies": {
"foundation": "*",
"bootstrap": "3.3.7",

"bourbon": "*",

"bxslider-4": "*",
"fancybox": "*",
"OwlCarousel": "*",

"html5shiv": "*",
"respond": "*",

"fontawesome": "*",
"animate.css": "*"
}
}

Зірочка позначає останню доступну версію скрипта. Але з якихось причин це не завжди спрацьовує. Тому слідкуйте за повідомленнями у консолі та вносьте зміни у ваш bower.json файл.

Ви можете створити допоміжний файл для Bower — .bowerrc. У ньому я вказую лише директорію для встановлення бібліотек:

{
"directory": "../assets"
}

Встановлювати бібліотеки через Bower так само просто, як і встановлювати пакети через npm:

$ bower install
// або
$ bower i

Хочу ще раз звернути вашу увагу: встановлення пакетів і скриптів через файли package.json і bower.json значно скорочує час розробки.

Інакше вам довелося б встановлювати кожен пакет окремо.