Настройка VSCode для web-разработки

Для начала нам нужно скачать и установить редактор кода Visual Studio Code (VSCode) https://code.visualstudio.com, если у вас он ещё не установлен.

Начнем с того, что нам нужно создать где-нибудь (обычно это папка где вы храните все ваши проекты) папку проекта и назвать например 'web', открыть VSCode и перетащить эту папку в Explorer (Проводник в боковой панеле программы).

Далее создать там все необходимые папки и файлы для программирования сайта, например как на изображение выше.

Папка src это папка где будет проходить вся основная работа над сайтом, в ней будут храниться все исходные файлы. Папка dist это папка куда мы впоследствии будем в автоматическом режиме (с помощью Gulp — набор инструментов для автоматизации) копировать/компилировать только файлы, которые нужны для работы сайта и ничего лишнего.

Теперь нам нужно скачать и установить Node.js® (кроссплатформенная среда выполнения JavaScript) https://nodejs.org/en/. Теперь мы имеем npm — менеджер пакетов, входящий в состав Node.js

Для начала мы убедимся/проверим установку node, npm и npx, для этого в терминале в VSCode вводим такие команды

node --version

npm --version

npx --version

После создаем файл с настройками пакетов, вводим следующую команду

npm init

Мы получаем сообщение, см. изображение ниже

Здесь у нас запрашивается информация о проекте.

В строке package name: (web) нужно указать имя проекта и т.д.. Мы же просто жмём Enter на всех запросах, так как эту информацию можно внести/изменить позже и отвечаем y на вопрос Is this OK? (yes). См. изображение ниже

И так у нас создался новый файл package.json, см. изображение ниже

Здесь как мы видим находится инфа которая у нас запрашивалась, и здесь можно изменять/добавлять информацию о проекте. Но сейчас в этом файле мы будем указывать какие пакеты (packages) мы будем использовать для работы над нашим сайтом.

Далее установим утилиту командной строки Gulp, в терминале введите строки указанные ниже, после ввода терминал у вас запросит пароль пользователя, вводим его для подтверждения, флажок -g говорит о глобальной установке, если вы ранее уже вводили эту команду, то сейчас уже не надо, переходите далее к локальной установке

sudo npm install gulp-cli -g

теперь устанавливаем Gulp пакет непосредственно в наш проект, локально, об этом говорит нам флажок --save-dev

sudo npm install gulp-cli --save-dev

sudo npm install gulp --save-dev

У нас добавились папки/файлы node_modules и package-lock.json, а в файле package.json добавились строки, см. изображение ниже

Теперь проверим установленную версию

gulp --version

Итак Gulp пакет мы успешно установили, а теперь перейдем на сайт-ресурс с множеством плагинов для разных нужд https://www.npmjs.com/package/packages

В строке поиска можно находить то что вам нужно, а конкретно сейчас Gulp Sass https://www.npmjs.com/package/gulp-sass, перейдя по ссылке, на странице плагина подробно всё написано как установить, как использовать, примеры кода и т.д., вводим команду ниже, не забывайте добавлять --save-dev

npm i sass gulp-sass --save-dev

Теперь в devDependencies должна появиться строка "gulp-sass": "^5.1.0"

Вот список плагинов которые обычно устанавливаются для работы в VSCode над сайтом

• browsersync https://www.npmjs.com/package/browser-sync
  документация https://browsersync.io/docs/gulp
  команда установки плагина npm i browser-sync --save-dev
• gulp-sass https://www.npmjs.com/package/gulp-sass
  команда установки плагина npm i sass gulp-sass --save-dev
• gulp-autoprefixer https://www.npmjs.com/package/gulp-autoprefixer
  команда установки плагина npm i gulp-autoprefixer --save-dev
• gulp-clean-css https://www.npmjs.com/package/gulp-clean-css
  команда установки плагина npm i gulp-clean-css --save-dev
• gulp-rename https://www.npmjs.com/package/gulp-rename
  команда установки плагина npm i gulp-rename --save-dev
• gulp-imagemin https://www.npmjs.com/package/gulp-imagemin
  команда установки плагина npm i gulp-imagemin@7.1.0 --save-dev
• gulp-htmlmin https://www.npmjs.com/package/gulp-htmlmin
  команда установки плагина npm i gulp-htmlmin --save-dev

Переходим к настройке Gulp. Создаем файл gulpfile.js .

Открываем его и начинаем писать javascript код. Начнем с главного, а это browsersync https://browsersync.io/docs/gulp, ну и все остальные плагины. См. изображение ниже, какой код должен у вас получиться, получился не маленький)

Настройки каждого плагина можно найти на его странице на сайте https://www.npmjs.com/package/plugins или же просто переписать js код который показан выше.

Если вы всё сделали правильно, то в терминале запускаем Gulp командой gulp + enter, у вас должна открыться страница сайта по пути ../dist/index.html с адресом http://localhost:3000, теперь каждое изменение в файлах таких как scss, js, html и т.д. будет отслеживаться и страница сайта в браузере будет обновляться автоматически.

Чтобы остановить Gulp, в терминале жмем комбинацию клавиш Control + C.

Ну в принципе почти всё! Удачи с кодингом.