Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по локальной сети. Поднимать ради этого Vite или Nginx — избыточно: первый рассчитан на полный цикл разработки, второй требует своего конфига.

http-server запускается через npx http-server и работает сразу — раздаёт текущую папку на порту 8080. Другой порт, CORS-заголовки, автооткрытие браузера, отключение кеша на время разработки — всё это флаги. Никакого конфигурационного файла или установки в проект ему не нужно.

Бонус: сервер доступен и по локальному IP — удобно открывать страницу со смартфона для проверки адаптива. #npm #tools

🎲 Читать статью

Поставили инструмент глобально через npm install -g, попользовались — и забыли удалить. За пару лет таких пакетов набираются десятки, разных версий, и они начинают конфликтовать.

npx запускает пакет прямо из реестра npm, ничего не устанавливая глобально. Создать проект на Vite — npx create-vite my-app. Та же история со статическим сервером (npx serve .) или прогоном Prettier по всему проекту (npx prettier --write .): запустили и работаете, в npm -g ничего не осело.

Внутри npx идёт по трём адресам: сначала node_modules/.bin в проекте, потом временный кеш, и только затем реестр. Нашёл локально или в кеше — оттуда и запустит, лишнего не качает. Версию можно зафиксировать через @, например npx prettier@2 — пригодится, когда надо воспроизвести чужую ошибку или проверить старый релиз. #npm #tools

В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит.

🔄 Читать статью

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

Автоматизация передаёт эти задачи компьютеру. Минификация HTML, CSS и JavaScript, сжатие изображений, генерация WebP, сборка sprite.svg — всё это делается один раз в конфигурации, а дальше запускается одной командой.

Основа цепочки — Node.js и npm. Npm устанавливает нужные пакеты из внешних библиотек и запускает задачи через консоль. Список зависимостей хранится в package.json: достаточно положить файл в папку проекта и выполнить npm install — все инструменты скачаются автоматически. Сами задачи прописываются в gulpfile.js, который Gulp выполняет по команде.

В статье разбор каждого звена цепочки с примерами package.json и объяснением, что такое зависимости и зависимости для разработчиков. #npm

☝️ Читать статью