Что такое Node.JS

Node.JS– это программная платформа, которая увеличивает возможности jаvascript. После того, как вы установите Node.JS, jаvascript будет выполняется на сервере, причём сервер может располагаться как на десктопе, ноутбуке, так и на различных мобильных устройствах.

Node.JS разработал Райан Дал в 2009 году на виртуальной машине V8 – движок от Google для браузера Chrome который умеет выполнять jаvascript, но не просто умеет, а делает это очень хорошо. V8 работает быстрее аналогов, поддерживает современный jаvascript и экономно работает с точки зрения виртуальной памяти.

Но данная виртуальная машина – это jаvascript, которая не умеет работать с сетью, читать файлы и многое другое. Поэтому Райан, при помощи специальных библиотек и своего кода добавил возможности по работе: с файлами, сетью, взаимодействует с устройствами ввода и вывода, а также масса других полезных функций. Простым языком: Node.JS позволяет делать из jаvascript – сервер.

Основные преимущества Node.JS –

1. Использование языка jаvascript
2. Много соединений и задач одновременно (в отличие от PHP)
3. Общий код как на клиенте, так и на сервере
4. Легко сделать рабочий прототип
5. Решает основные задачи для WEB
6. Удобный менеджер пакетов, где много всего
7. Большое и активное сообщество

Что такое Gulp

GULP простым языком – это сборщик проектов. Данный сборщик предназначен для упрощения в web-разработке. Условно говоря – оптимизировать картинки, скрипты и стили вашего проекта, а также позволяет решать массу повседневных задач. По сути это jаvascript или набор скриптов, которые работают на сервере Node.JS. Это не означает что нужно знать Node.JS, но всё же базовый пакеты такие как NPM понадобятся в работе.

Пакет NPM – это менеджер пакетов, который входит в состав Node.JS. Данный менеджер позволяет при помощи простых команд загружать и устанавливать различные пакеты и скрипты с облачного сервера NPM. Расшифровывается как Node package manager (Пакет менеджеров Node.JS).

Как установить Gulp

Для начала следует установить Node.JS. Достаточно зайти на официальный сайт и скачать установщик и установить, как стандартную программу для Windows. После установки можно установить Gulp, делается это при помощи NPM. Создайте папку с проектом (можно просто создать папку на рабочем столе), заходите в неё и нажимаете на SHIFT+правую кнопку мыши: Открыть окно команд:

npm i gulp -g

-g – говорит о том, что данный пакет устанавливается глобально, т.е. во всю систему, а не в папку проекта.

После того как вы установили gulp, командная строка покажет, что установка выполнена успешно. После этого, нужно выполнить инициализацию проекта, следующей командой.

npm init

Далее будет пару вопрос, где нужно дать имя проекта, например: gulp-project, далее всё оставляем по умолчанию нажимая кнопку Enter. После инициализации в папке нашего проекта появится файл package, данный файл хранит в себе настройки нашего проекта в формате Json.

После инициализации, нужно установить в наш проект сам Gulp. Делается это следующей командой:

npm i gulp --save-dev

Далее вы увидите, как происходит установка Gulp непосредственно в вашу папку. В нашей папке создаться новая папка под название node_modules. После в нашей папке нужно создать файл “gulpfile.js”. Открываем файл gulpfile.js в текстовом редакторе и подключаем сам Gulp:

var gulp = require('gulp');
gulp.task('mytask', function() {
    console.log('Hello world!');
});

Чтобы проверить, работает ли у вас Gulp введите в командной строке следующую команду:

gulp mytask

Вы увидите сообщение: Hello world!

Возможности Gulp с CSS

Рассмотрим несколько плагинов, которые часто использую в своём проекте современный верстальщик, которые вы можете найти на сайте npmjs.com

1. Concat – допустим у вас есть 2 файла, к примеру библиотека Bootstrap или Normalize и основной CSS файл и вам нужно поместить их в один файл. Находим на сайте npmjs.com наш плагин, а называется он gulp-concat-css, выбираете из списка и переходите. На странице плагина вы можете узнать название команды, который нужно ввести в командной строке вашего проекта.
2. Minify – очень часто нужно сжать css-код, т.е. убрать пробелы переводы строк и прочее. Типичный пример, нужно уменьшить вес сайта, на который ругается сервис Google Speed. В этом нам поможет плагин gulp-clean-css.
3. UnCss – к примеру при разработке вы написали огромное количество CSS кода и вам нужно найти CSS-код, который совсем не используется. Данный плагин удаляет не используемый CSS-код, что также позволяет ускорить процесс загрузки вашего сайта. На сайте npmjs.com плагин называется: gulp-uncss.
4. Autoprefixer – помогает не заботиться о написаниях префиксов к каждому свойству, например border-radius, для отображения во всех браузерах корректно нужно дописать ещё: -moz-border-radius, -webkit-border-radius, -khtml-border-radius. Данный плагин поправляет всё за вас.

Возможности Gulp с JаvaScript

1. На сайте npmjs.com вы можете найти Concat, Minify и другие похожие плагины для jаvascript. Достаточно изучить документацию по установке.
2. Gulp-jscs – интересный инструмент со множеством конфигураций для проверки вашего кода в соответствием с существующими стайл-гайдами от Google, Yandex, JQuery и многие другие известные компании.
3. JShint – если вы работаете с jаvascript ежедневно, то данный плагин будет показывать все ваши ошибки.

Работа Gulp с картинками

Плагинов для работы с графикой не так много как с CSS и Js, но мы рассмотрим самые основные плагины, которые будут полезны при разработке ваших проектов.

1. Сжатие изображений на Gulp – на сайте npmjs.com он называется: gulp-imagemin. Данный плагин сжимает все изображения примерно на 30-40%. Это может быть очень полезно для ваших пользователей.
2. Gulp-image-resize – помогает изменить размер большого количества изображений. Достаточно указать нужные размеры и плагин сделает многочасовую работу за пару минут.
3. Gulp-img-retina – способен поменять пути ко всем файлам с изображениям за несколько секунд, что в реальности заняло бы намного больше времени.

Плагины для компиляторов в Gulp

Gulp может освободить вас не только от рутинных задач, но и ускорить разработку при помощи препроцессоров и шаблонизаторов при помощи компиляции в привычный код. Плагинов в Gulp для компиляторов – множество. Например, препроцессоры SASS и LESS – некое подобие языка программирования на основе CSS, при помощи которых вы можете упростить написание CSS-кода.

Установка локального сервера на Gulp

Типичная проблема, когда постоянно нужно обновлять браузер при сохранении html и css кода. В Gulp вы можете установить локальный сервер, который при помощи jаvascript будет обновлять страницу при каждом изменение в файле. Это помогает ускорить разработку и забыть про кнопку на клавиатуре F5. Название плагина: gulp-server-livereloader