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 – сервер.
GULP простым языком – это сборщик проектов. Данный сборщик предназначен для упрощения в web-разработке. Условно говоря – оптимизировать картинки, скрипты и стили вашего проекта, а также позволяет решать массу повседневных задач. По сути это jаvascript или набор скриптов, которые работают на сервере Node.JS. Это не означает что нужно знать Node.JS, но всё же базовый пакеты такие как NPM понадобятся в работе.
Пакет NPM – это менеджер пакетов, который входит в состав Node.JS. Данный менеджер позволяет при помощи простых команд загружать и устанавливать различные пакеты и скрипты с облачного сервера NPM. Расшифровывается как Node package manager (Пакет менеджеров Node.JS).
Для начала следует установить 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!
Рассмотрим несколько плагинов, которые часто использую в своём проекте современный верстальщик, которые вы можете найти на сайте npmjs.com
Плагинов для работы с графикой не так много как с CSS и Js, но мы рассмотрим самые основные плагины, которые будут полезны при разработке ваших проектов.
Gulp может освободить вас не только от рутинных задач, но и ускорить разработку при помощи препроцессоров и шаблонизаторов при помощи компиляции в привычный код. Плагинов в Gulp для компиляторов – множество. Например, препроцессоры SASS и LESS – некое подобие языка программирования на основе CSS, при помощи которых вы можете упростить написание CSS-кода.
Типичная проблема, когда постоянно нужно обновлять браузер при сохранении html и css кода. В Gulp вы можете установить локальный сервер, который при помощи jаvascript будет обновлять страницу при каждом изменение в файле. Это помогает ускорить разработку и забыть про кнопку на клавиатуре F5. Название плагина: gulp-server-livereloader
5 видео
9 видео
11 видео
19 видео
8 видео
10 видео
9 видео
9 видео
11 видео
16 видео
6 видео
8 видео