Автоматизируем рутину в работе с HTML/CSS/JS

Строим простую среду разработки

Node.JS + NVM

Для работы нам понадобится среда выполнения Node.js и менеджер версий nwp (опционально)

Node или Node.js — программная платформа, основанная на движке V8, превращающая JavaScript из узкоспециализированного языка в язык общего назначения.

Node Version Manager, чаще называемый nvm, является наиболее популярным средством установки нескольких версий Node.js

NodeJS потребуется для установки пакетов, модулей и зависимостей проекта, а NVM — для установки, удаления и переключения версий NodeJS. Переключение потребуется вам при работе с проектами, которые написаны под более новую или старую версию NodeJS.

Основные команды NVM

Список установленных версий

nvm ls

Список доступных версий

nvm list available

Установка последней версии

nvm install latest

Установка версии из списка доступных

nvm install <version>

Переключиться на другую версию

nvm use <version>

По желанию вы можете попробовать другие менеджеры версий.

nvs (Node Version Switcher) — это кроссплатформенный вариант nvm с возможностью интеграции с VS Code.

Volta — это новый диспетчер версий, созданный командой LinkedIn. Заявлено, что он отличается увеличенной скоростью и межплатформенной поддержкой.

Структура файлов и каталогов

Для начала давайте ознакомимся с имеющееся структурой каталогов.
Была разработана достаточно продуманная структура файлов и каталогов. Она позволяет удобно взаимодействовать нескольким программам.

Псевдографическое дерево структуры

├───portfolio
└───projects
    ├───in-process
    │   ├───builds
    │   │   └───aigen31.github.io
    │   ├───sources   
    │   └───tasks
    └───ready

Описание каждого из каталогов

/portfolio (опционально) — сохранение превью для портфолио, далее они идут на публикацию на freelance-площадку.

/projects/in-proggress — проекты, находящиеся в процессе разработки или вероятнее всего будут дорабатываться.

/projects/ready — разработанные проекты.

/projects/builds — папка с собранными сборщиком проектами, которые синхронизируются с удалённым хостингом проектов (в моём случаю GitHub).

/projects/sources — проекты с исходным кодом, над которыми происходит работа.

/projects/tasks — задачи автоматизации Powershell.

Gulp для решения рутинных задач

О моей сборке

Для моих проектов и этой статьи была подготовлена сборка Gulp, вдохновлённая сборкой другого разработчика WebDesign Master. Она была доработана под общие нужды и избавлена от некоторого лишнего кода, который уже был неактуальным с новыми версиями некоторых модулей.
Её полный разбор будет в другой статье.

Основные функции сборщика

1. Минифицирует CSS, JS и сжимает изображения.

2. Конвертирует шрифты в разные форматы.

3. Встраивает HTML код из одного HTML файла в другой.

Запуск проекта

1. Загрузите проект из Git, распакуйте архив и пройдите до корневого каталога.

2. В корневом каталоге зайдите в контекстное меню (через ПКМ) с зажатым Shift > "Открыть с помощью Powershell".

1. Введите команду для разрешения исполнения неподписанных скриптов
   
   set-executionpolicy remotesigned

2. Установите Gulp глобально (ключ -g)
   
   npm i gulp -g

3. Инициализируете проект, вводя ваши данные
   
   npm init

4. Установите зависимости для проекта
   
   npm i

5. Запустите проект, используя команду
   
   gulp

После этого начнётся запуск задач по умолчанию, в том числе запуск локального сервера BrowserSync, который мониторит изменения HTML/CSS/JS файлов и шрифтов с изображениями.

Сохранение актуальности Gulp

Чтобы данная сборка оставалась актуальной долгое время, пакеты с модулями нужно своевременно обновлять и при необходимости переписывать опции модулей в gulpfile.js.

Для этого нам нужно глобально установить пакет npm-check-updates.

npm-check-updates обновляет в package.json ваши зависимости, игнорируя указанные версии

Основные команды

Проверка версий пакетов

ncu

Обновление версий в packaje.json

ncu -u

После данных команд выполняем установку пакетов

npm i

Работа с Git

Git — распределённая система управления версиями. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux, первая версия выпущена 7 апреля 2005 года. На сегодняшний день его поддерживает Джунио Хамано.

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

Для установки рекомендуются базовые знания английского или переводчик, так вы можете поменять настройки под себя и отключить лишние функции. К примеру я убираю пункт с установкой Git Bash.

Git Bash — это командная строка, с помощью которой пользователи могут использовать функции Git. Он эмулирует среду bash в Windows и позволяет пользователю использовать большинство стандартных команд Unix.

Загружаем и устанавливаем Git.

Основные команды

Инициализация проекта

git init

Добавление файлов в репозиторий

git add <file_name> или точка "." (для добавления всех файлов)

Создание коммита с комментарием (ключ -m)

git commit -m "comment"

Обновить удалённую ссылку со связанными объектами. Проще говоря — синхронизировать ваш локальный Git с удалённым (к примеру GitHub)

git push -u origin master (может быть main, если вы поставили данную опцию в Git)

Создание новой ветви и переход к ней (ключ -b)

git checkout -b

Переход к другой ветви

git checkout

Слияние с веткой (вы должны находиться в ветке, в которую будут включаться изменения)

git merge

Это команды, которые помогут вам работать с простыми проектами и манипулировать ветками.

Автоматизация с Powershell

PowerShell — расширяемое средство автоматизации от Microsoft с открытым исходным кодом, состоящее из оболочки с интерфейсом командной строки и сопутствующего языка сценариев.

Push в Git при мониторинге изменений

Был разработан один из базовых сценариев Powershell, который позволяет избавиться от постоянной монотонной синхронизации с удалённым хостингом Git. Он находится в папке task и мониторит папку /builds/aigen31.github.io

Он работает на основе объекта FileSystemWatcher, который мониторит изменения в указанном каталоге и вызывает по порядку команды

git status
git add .
git commit -m 'update'
git push -u origin master

Считается, что для простых проектов не стоит описывать каждый коммит, т. к. вероятнее всего, над его вёрсткой занимаетесь только вы. В ином случае стоит отказаться от данной автоматизации и писать коммиты осмыслено

Вы можете дописывать сценарии автоматизации по своему желанию, их расположение идеально подходит для манипуляции с проектами. Можете написать в комментариях, что хотели бы предложить

Репозиторий в Git

Для того, чтобы сохранять ваши работы удалённо, рекомендую использовать GitHub в качестве хоста.

Если репозиторий является веб-страницей, то её можно будет подключить к GitHub Pages и использовать в качестве хостинга статичных сайтов.

Бесплатная синхронизация с OneDrive

Сервис OneDrive от Microsoft позволяет синхронизировать рабочие папки (рабочий стол, документы, изображения) с облаком. Для сохранности своих данных рекомендуется синхронизировать в крайнем случае рабочий стол и документы, т. к. изображения на практике могут иметь большой вес, а в бесплатном тарифе OneDrive можно хранить лишь 5гб.

Для увеличения объёма хранилища до 1тб. придётся покупать пакет Office 365 (2300 и более руб./год). Это составляет около 200 руб./месяц

Другие облачные хранилища

Если сравнить Office 365 с Яндекс 360, то при оплате второго сервиса за месяц цена будет равной. Но при полной оплате за год стоимость будет сильно отличаться — 1399 руб./год В Яндекс.Диске так же имеется возможность синхронизации рабочих папок, но она отсутствует в бесплатном тарифе.

Рекомендую для начала опробовать OneDrive для синхронизации, цена не очень разная.

В облаке для безопасности я советую хранить закодированный файл-ключ менеджера паролей KeePassXC (без него мы не сможем войти в базу), о котором будет рассказано в следующем разделе.

Локальный менеджер паролей KeePassXC

KeePassXC - бесплатный менеджер паролей с открытым исходным кодом. Все началось с сообщества KeePassX. Он построен с использованием библиотек Qt5, что делает его мультиплатформенным приложением, которое можно запускать в Linux, Windows и macOS

Хранение паролей в KeePassXC и похожих менеджерах имеет ряд плюсов:

1. Можно добавлять пароли из таблицы CSV и любых других мест (игровые аккаунты, различные браузеры и сервисы).

2. Защита с помощью закодированного файла и пароля, который имеется только у вас. Его стоит хранить в нескольких местах, чтобы точно не потерять. Иначе вы утеряете доступ к базе данных.

3. Сортировка по группам.

4. Существуют онлайн менеджеры паролей и зачастую они платные. Этот менеджер хранит всё локально и он бесплатный. От подобных онлайн платформ смысл появляется тогда, когда нужно открыть /общий доступ к паролям, в нашем случае такое не требуется.

Подключение по FTP и SSH посредством встроенных функций Windows 10

FTP

Если вам не нужны все возможности различных FTP-клиентов, то вы можете спокойно подключаться к серверу через проводник с помощью этих действий:

1. Зайдите в контекстное меню

2. Выберете пункт "Добавить новый элемент в сетевое окружение"

3. Следуете инструкциям

SSH через OpenSSH от Microsoft

OpenSSH — это средство подключения для удаленного входа, использующее протокол SSH

Проверьте наличие OpenSSH через "Параметры" > "Приложения" > "Приложения и возможности" > "Дополнительные компоненты". Вероятнее всего, он уже будет установлен, как это было у меня, в ином случае установите клиент через пункт "Добавить компонент".

Подключение происходит с помощью следующей команды в терминале
ssh username@servername

Заключение

Мы поверхностно разобрались в среде разработки для работы с HTML/CSS/JS: установили NodeJS и менеджером версий, немного изучили автоматизацию работы с помощью Gulp и Powershell (более подробный разбор будет в другой статье), узнали про применение Git для гибкого изменения проектов и их хранения на удалённом хостинге. После этой статьи некоторые разделы будут разветвляться на другие, более углублённые.

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

Надеюсь, это было полезно для вас, спасибо за чтение статьи!

Мой Github с проектами

Терминология

Зависимость — объект, который может быть использован как сервис.

Инициализация — создание, активация, подготовка к работе, определение параметров. Приведение программы или устройства в состояние готовности к использованию.

Ключ — опция, которая немного изменяет действие команды

Коммит — операция, которая отправляет последние изменения исходного кода в репозиторий, делая эти изменения частью основной ревизии репозитория

Модуль — это просто файл. Один скрипт – это один модуль

Нативный (родной) код — это код, поставляемый разработчиками технологии.

Пакет — файл или каталог, который описывается файлом.

Репозиторий — место, где хранятся и поддерживаются какие-либо данные.

Терминал — программа или устройство, используемая для взаимодействия пользователя с компьютером или компьютерной системой, локальной или удалённой

Система управления версиями — программное обеспечение для облегчения работы с изменяющейся информацией.

Среда выполнения — вычислительное окружение, необходимое для выполнения компьютерной программы и доступное во время выполнения компьютерной программы.

Источники

https://ru.wikipedia.org/wiki/Node.js
https://docs.microsoft.com/ru-ru/windows/dev-environment/javascript/nodejs-on-windows
https://github.com/aigen31/gulp
https://www.npmjs.com/package/npm-check-updates
https://ru.wikipedia.org/wiki/Git
https://ru.wikipedia.org/wiki/PowerShell
https://en.wikipedia.org/wiki/KeePassXC
https://docs.microsoft.com/ru-ru/windows-server/administration/openssh/openssh_install_firstuse