Как установить 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:

[sourcecode]
$ sudo apt-get install nodejs
[/sourcecode]

Устанавливаем менеджер пакетов Npm:

[sourcecode]
$ sudo apt-get install npm
[/sourcecode]

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

Установка Gulp:

[sourcecode]
$ sudo npm install gulp -g
[/sourcecode]

это установит gulp глобально, давая доступ к gulp CLI (т. е. те работать с ним через терминал/консоль)

Установка Bower:

[sourcecode]
$ sudo npm install bower -g
[/sourcecode]

Использование

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

Gulp

На данный момент, package.json для моего Gulp файла имеет следующий вид:

[sourcecode]
{
"devDependencies": {
"bower": "*",

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

"fs": "*",
"gulp-header": "*"
}
}
[/sourcecode]

Данные пакеты используются мной для верстки 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('../'));
});

Как этим всем воспользоваться? Создаем два выше указанных файла, и вставляем в них код выше. Далее, переходим в командную строку и вводим:

[sourcecode]
$ npm install
// или
$ npm i
[/sourcecode]

Это заставит npm установить все пакеты из файла package.json в каталог проекта.

Подождав финиша установки пакетов, запускаем наш gulpfile.js не сложной командой:

[sourcecode]
$ gulp
[/sourcecode]

после чего, все должно заработать и отобразить ошибку.

Bower

Им пользоваться не сложнее. Все доступные пакеты можно найти через поисковик бовера (https://bower.io/search/). Кстати, с пакетами npm и gulp такая же ситуация, у них есть свои поисковые страницы - http://gulpjs.com/plugins/ и https://www.npmjs.com/

Файл bower.json может иметь следующий вид:

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

"bourbon": "*",

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

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

"fontawesome": "*",
"animate.css": "*"
}
}
[/sourcecode]

Звездочка обозначает последнюю версию доступного скрипта. Но по какой-то причине, это не всегда срабатывает. Поэтому отслеживайте вашу консоль и вносите соответствующие директивы в ваш bower.json файл.

Вы можете создать вспомогательный файл для Bower «.bowerrc». В нем, я указываю лишь директорию куда должны быть установлены скаченные библиотеки:

[sourcecode]
{
"directory": "../assets"
}
[/sourcecode]

Устанавливать библиотеки через Bower так же просто как и устанавливать пакеты npm:

[sourcecode]
$ bower install
// или
$ bower i
[/sourcecode]

Хочу еще раз обратить ваше внимание на то, что установка пакетов и скриптов через файлы package.json и bower.json значительно сокращает затрачиваемое время на разработку.

Т.к. в противном случае, вам бы пришлось устанавливать каждый пакет по отдельности.