Node.JS

Современные возможности разработки сейчас выходят далеко за пределы одного языка. Даже если вы просто верстаете, то знание смежных языков программирования очень важно. Для верстальщиков жизненно необходимо знать основы JavaScript, так как тяжело себе представить современный сайт, который не использует возможности этого языка.

В качестве первого знакомства отличным решением станет работа с Node.JS — это локальная (установленная на компьютере) среда для выполнения кода на языке JavaScript. Как это может помочь нам в вёрстке?

Разработчики создали множество различных плагинов, которые работают с Node.JS. Среди них можно выделить:

  • Сборщики проектов. К таким относятся Gulp, Webpack, Grunt и так далее. Просто запомните эти названия. Будучи разработчиками вам обязательно предстоит с ними встретиться. Эти плагины позволяют автоматизировать процесс сборки ваших сайтов. К примеру у вас есть сотни разных файлов, среди которых CSS, картинки, JavaScript. Всё это обычно необходимо обрабатывать перед тем, как выкладывать на реальный сервер. Уменьшить вес, добавить специальные варианты для старых браузеров и так далее. Вручную это делать всё долго, и на помощь приходят такие сборщики, которые сделают всю работу за вас.

  • Обработка препроцессоров. В профессии вы изучите такой препроцессор, как SASS. Он позволяет более эффективно писать CSS и привносит в него множество полезных вещей. Что бы в конечном итоге перевести это в CSS можно использовать плагин, который работает с Node.JS

  • Плагины для автоматической перезагрузки браузера после внесения изменений в файлы. Именно такой плагин мы сегодня и поставим в качестве примера. Он позволит не перезагружать страницу вручную каждый раз, как вы изменили HTML или CSS. Плагин всё сделает за вас. Он будет отслеживать изменения в файлах и перезагружать страницу при необходимости.

Установка Node.JS

Windows

Если вы используете операционную систему Windows, то вам необходимо зайти на сайт nodejs и установить доступную версию. Всё происходит автоматически.

Linux

Для установки Node.JS на linux можно использовать встроенный пакетный менеджер, либо воспользоваться терминалом. Для системы Ubuntu установка будет выглядеть следующим образом:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

MacOS

Для установки на системы MacOS можно воспользоваться ссылкой с официального сайта nodejs, либо воспользоваться пакетным менеджером Homebrew. Как его установить указано на официальном сайте.

В этом случае установка NodeJS займёт всего одну строчку в терминале:

brew install nodejs

Проверить, корректно ли вы установили Node.JS можно с помощью доступной вам командной строки. Выполните следующую команду:

node --version

Подсказка: Для открытия терминала в Windows воспользуйтесь комбинацией клавиш Win + R и введите cmd. Это вызовет стандартный терминал Windows.


Подсказка: Если вы пользуетесь Visual Studio Code, то в него тоже встроен терминал. Открывается он с помощью комбинации Ctrl + ~.


Если вы всё установили верно, то получите сообщение с указанием номера версии установленного Node.JS. В моём случае это v14.2.0. Так же, вместе с Node.JS автоматически устанавливается пакетный менеджер npm. С помощью него мы будем устанавливать необходимые плагины (пакеты). Проверьте, что у вас он тоже установился. Это можно сделать с помощью следующей команды в терминале:

npm --version

Так же, как и с node --version терминал покажет вам версию установленного пакетного менеджера.

Установка Live Server

На начальном этапе можно не сильно пытаться понять, как это всё работает и взаимодействует. По мере получения опыта вы научитесь находить и устанавливать новые пакеты, поймёте различия в различных вариантах установок. А сейчас мы установим плагин, который будет перезагружать автоматически браузер.

Для этих целей нам подойдёт плагин с названием live-server. Он будет автоматически создавать локальный сервер и подгружать файлы нашего проекта. Чтобы установить live-server, выполните следующие шаги:

Windows

  1. Откройте терминал. Для этого вы можете использовать комбинацию клавиш Win + R. В появившемся окне наберите cmd.
  2. Выполните команду npm install -g live-server.

Всё остальное сделает за вас npm. Ваша задача — просто дождаться окончания установки.

Установка Live Server на Windows

Linux

  1. Откройте любой доступный вам терминал.
  2. Наберите команду sudo npm install -g live-server. Так как установка глобальная, то нам пригодятся права суперпользователя.

Всё остальное сделает за вас npm. Ваша задача — просто дождаться окончания установки.

Установка Live Server на Linux

Вот вы и установили свой первый пакет с помощью пакетного менеджера npm. Поздравляю :)

Настало время воспользоваться установленным пакетом live-server. Для этого выполните следующие шаги:

  • Создайте в любом удобном вам месте директорию с любым названием. Это будет основным каталогом для нашего проекта.
  • В созданной директории создайте файлы index.html и style.css. Подключите стили к файлу HTML.
  • Добавьте любую вёрстку и стили. Можете взять любые примеры с прошлых уроков.
  • Откройте терминал и перейдите в директорию с вашим проектом.
  • Введите команду live-server.

После этого у вас автоматически откроется браузер и подгрузятся все ваши файлы. Теперь live-server будет следить за всеми изменениями в ваших файлах в данной директории и перезагружать браузер при каких либо изменениях.

Попробуйте изменить стили и HTML. И вы увидите, как все ваши изменения будут автоматически отображаться в браузере после сохранения файла.

Что бы остановить работу Live Server вы должны перейти в терминал, где он запущен и воспользоваться комбинацией клавиш Ctrl + C. Это прекратит выполнение текущего процесса.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Javascript, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →