Разработка сайтов на WordPress и фреймворке Yii2

Здесь вы можете заказать полный пакет услуг по разработке сайта. Начиная от написания ТЗ до программирования на PHP, JavaScript и верстке.

Как установить NodeJs, Gulp и Bower под *ubuntu (кратко)

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

Им пользоваться не сложнее. Все доступные пакеты можно найти через поисковик бовера (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 значительно сокращает затрачиваемое время на разработку.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *