Node.js. утилиты npm и npx

Начало работы

Логично начать с создания директории для нового проекта.

Я буду работать над сайтом HeiHei.ru
поэтому назову папку heihei

mkdir heihei

Перейдём в созданную директорию

cd heihei

Убедимся, что в новой папке пусто

ls

Теперь выполним важнейшую для будущей разработки команду

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (my-project)

npm предложит заполнить информацию о проекте. Появятся следующие поля:

name: (heihei)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Можно заполнить все поля, но для простоты пока просто нажмем несколько раз подряд Enter

Если предварительно привязать директорию к удалённому репозиторию
GIT
то npm при инициализации это увидит и сам заполнит пункт git repository.

Возможно, это и есть самый простой и правильный путь, если Вы планируете работать дальше с GIT.

В конце должно появиться подобное сообщение. Нажимаем Enter ещё раз.

About to write to C:\Users\ao\Desktop\Sites\heihei\package.json:
{
«name»: «heihei»,
«version»: «1.0.0»,
«description»: «»,
«main»: «index.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»
}
Is this OK? (yes)

Проверим, что появилось в нашей папке после инициализации

ls

package.json

package.json
это файл, который будет хранить в себе список установленных пакетов и их версии.

Сразу после инициализации он содержит только информацию о проекте

В мире

Python

похожие задачи решают

venv

и

freeze

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

Сначала создадим новую папку проекта, которую будем (воображаемо) называть . Откройте терминал и выполните команду внутри этой папки:

Выполнение этой команды вызывает несколько шагов для инициализации нашего проекта в командной строке, таких как добавление имени и описания. Вы можете нажать Enter, чтобы пропустить каждый из них, если вы хотите завершить их сразу — мы сможем отредактировать их позже. Затем вы увидите, что был создан файл , который должен выглядеть примерно так:

Этот файл содержит всю информацию о нашем проекте, и здесь мы можем редактировать детали, которые мы только что пропустили.

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

Advanced

• Require a node module before execution
• Behave as if invoked in this working directory Default: Environment:
• Emit output files into directory Default: Environment:
• Scope compiler to files within . Anything outside this directory is ignored. *Default: Environment:
• Directory within which compiler is limited when is enabled. Default: First of: «rootDir» if specified, directory containing , or cwd if no is loaded.Environment:
• Override the module type of certain files, ignoring the field. See for details.Default: obeys and Can only be specified via or API.
• Path to history file for REPL Default:

Публикация пакета npm

Для начала вам нужно создать пользователя в репозитории npm:

npm adduser

1	npm adduser

Если же у вас уже есть пользователь, созданный на сайте, то можете сохранить его логин и пароль:

npm login

1

npm login

Для публикации пакета используйте команду:

npm publish

1	npm publish

Имейте в виду, что опубликовано будет всё, что не добавлено в игнорируемые в «.gitignore» или «.npmignore».

Перейдите на
https://npmjs.com/package/<package>. Вы должны увидеть информацию о вашем пакете.

Для обновления версии используйте одну из команд:

npm update patch

1	npm update patch

или

npm update minor

1	npm update minor

или

npm update major

1	npm update major

А затем опубликуйте его снова:

npm publish

1	npm publish

How It Works

ts-node works by registering hooks for , , , and/or extensions.

Vanilla loads by reading code from disk and executing it. Our hook runs in the middle, transforming code from TypeScript to JavaScript and passing the result to for execution. This transformation will respect your as if you had compiled via .

Skipping

By default, TypeScript Node avoids compiling files in for three reasons:

1. Modules should always be published in a format node.js can consume
2. Transpiling the entire dependency tree will make your project slower
3. Differing behaviours between TypeScript and node.js (e.g. ES2015 modules) can result in a project that works until you decide to support a feature natively from node.js

Семантическое версионирование¶

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

В примере с express версия пакета содержала, кроме того, дополнительный символ карет: . Этот символ означает, что при установке пакета в проект с помощью команды будет устанавливаться последняя доступная версия от . Фактически это будет последняя доступная версия в промежутке от до ( и ). Более подробно про сематическое версионирование в можно посмотреть здесь.

Как открыть командную строку из текущей папки Windows 10

Зачастую нужно воспользоваться окном команд и при этом нужная папка уже открыта в Проводнике. В таком случае гораздо удобней чтобы консоль открылась сразу с этим путем, а не переходить в нужное место командой cd. Раньше для решения данной задачи можно было щелкнуть правой кнопкой мыши с нажатой клавишей Shift и выбрать в контекстном меню «Открыть окно команд».

Поскольку в Майкрософт продвигают PowerShell, то с некоторых пор в Windows 10 данный пункт меню был заменен на «Открыть окно PowerShell здесь». Как теперь открыть командную строку в текущей папке Windows 10? Есть несколько способов это сделать.

Самый простой вариант это находясь в нужной папке набрать в адресной строке Проводника cmd и нажать клавишу Enter или стрелку вправо справа от строки. В результате откроется окно командной строки в расположении текущей папки, а не папке юзера как по умолчанию.

Те пользователи компьютера, кому удобней старый вариант с контекстным меню могут вернуть привычный пункт с помощью правки реестра Windows 10. Открываем редактор реестра нажав WIN + R и вводим regedit , а затем Enter . Переходим в раздел HKEY_CLASSES_ROOTDirectoryBackgroundshellcmd

Поскольку данный раздел принадлежит TrustedInstaller, то просто так его отредактировать не получится, будет возникать ошибка. Поэтому сначала нужно назначить владельцем свою учетную запись или группу. Однако после внесения всех изменений лучше всего вернуть права в изначальное состояние для уменьшения вероятности глюков в системе.

Щелкаем правой кнопкой мыши по разделу cmd в дереве слева и выбираем пункт «Разрешения. ». Откроется окно настройки разрешений, в котором нажимаем кнопку «Дополнительно» расположенную внизу.

Появится еще одно окно «Дополнительные параметры безопасности для «cmd»» вверху которого будет надпись «Владелец: TrustedInstaller» и справа ссылка «Изменить» которую нужно нажать. В следующем окне в поле «Введите имена выбираемых объектов» вводим имя учетной записи или группы кого хотим сделать новым владельцем данного раздела реестра. Затем нажимаем кнопку проверить имена и следом OK.

Снова появится предыдущее окно, но владельцем будет значится указанный вами на предыдущем шаге. Здесь нужно поставить галочку «Заменить владельца подконтейнеров и объектов» и нажать OK.

Осталось дать себе права на редактирование. Для этого в окне «Разрешения для группы «cmd»» выбираем пользователя или группу назначенных владельцем и напротив «Полный доступ» отмечаем чекбокс «Разрешить» и нажимаем OK.

Теперь, когда мы стали владельцем этого раздела и обладаем полным доступом можно вносить в него изменения. В правой части окна щелкаем правой кнопкой мыши по параметру HideBasedOnVelocityId и переименовываем его в ShowBasedOnVelocityId .

Собственно, уже сейчас щелкнув по свободному месту в Проводнике с нажатой клавишей Shift в контекстном меню должно появиться «Открыть окно команд».

На самом деле пока мы вернули возможность открывать командную строку в папке Windows 10 не для всех ситуаций. Чтобы закрыть данный вопрос полностью, требуется повторить все вышеперечисленные действия еще для двух разделов реестра: HKEY_CLASSES_ROOTDirectoryshellcmd и HKEY_CLASSES_ROOTDriveshellcmd . Первый раздел отвечает за меню папок, а второй дисков.

Можно на этом не останавливаться и продолжить настраивать контекстное меню Проводника Windows 10 на свой вкус. Не нравится стандартное название пункта, щелкаем ПКМ по параметру «(По умолчанию)» выбираем изменить и вводите, что-нибудь свое, допустим «Запуск CMD». Если вы хотите, чтобы перед пунктом меню была соответствующая иконка, то надо создать новый строковый параметр с именем Icon и значением imageres.dll,-5323 . Сделать это можно щелкнув ПКМ по свободному месту в правой части окна и выбрав «Создать» ⇒ «Строковый параметр».

В результате меню примет вид как на изображении в начале статьи. Как уже говорилось выше, когда настройки сделаны лучше вернуть прежнего владельца раздела реестра указав в качестве имени «NT ServiceTrustedInstaller». Теперь вы знаете, как можно в случае необходимости вернуть пункт «Открыть окно команд» в контекстное меню Проводника Windows 10 и сделать настройку его внешнего вида под себя. А кто не желает лезть в настройки реестра, может пользоваться вариантом с адресной строкой Проводника. О том, как сделать, чтобы по умолчанию Проводник Windows 10 запускался в произвольной папке можно узнать здесь.

Как открыть панель управления в windows 7 через командную строку

Панель управления – часто незаменимый инструмент при работе с PC. Вызывается Панель через кнопку Win и находится в папке «Служебные».
Можно открыть Панель управления и без использования Win. Для этого нужно вызвать командную строку и ввести команду: control. Компьютер вызовет Панель управления.

Гипертерминал и диспетчер устройств

Программа HyperTerminal, входящая в состав стандартной сборки Windows XP, предназначается для координирования устройствами, подключенными через COM-порт.

Вызвать ее можно как через:

«Пуск» – «Стандартные» – «Связь» – «HyperTerminal», так и из командной строки. Для этого нужно набрать команду с клавиатуры: hypertrm.
Диспетчер устройств может пригодиться, когда происходит установка новых или отладка уже имеющихся на компьютере устройств. Чтоб вызвать Диспетчер, нужно подать команду с клавиатуры: mmc devmgmt.msc.

Как открыть 80 порт Windows 7 через командную строку

Установка нового оборудования или программы может потребовать принудительного открытия порта. Зная, как в Виндовс 7 открыть командную строку, можно открыть и порт 80. Изначально Виндовс резервирует его для HTTP-сервера, но открыть его все-таки можно.

Для этого потребуется:
— вызвать командную строку от имени Администратора; — с клавиатуры набрать команду: netsh firewall add portopening protocol = TCP port = 80 name = Apache mode = ENABLE scope = SUBNET.
Это пример для Apache-HTTP-сервера, в качестве области указан параметр Подсеть, в протокол открытия порта — TCP. Таким образом можно открыть порт с любым номером.

npm install module_name -S -D -g

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>style=»clear:both;»>

В чем разница между зависимостями и devDependencies?

Плагин в devDependencies используется только в среде разработки, а не в производственной среде

зависимости должны быть опубликованы в производственной среде

Это немного сложно понять, не бойся, просто приведи пример:

Вы разрабатываете интерфейсный проект. В этом проекте вам нужно использовать gulp для построения среды разработки и локального запуска. В настоящее время вы должны поместить его в зависимости. gulp — это инструмент, который вам нужен для сжатия кода, пакета и т. д. Программу запускать не нужно, поэтому ее можно поместить в dev.

Вы должны использовать element-ui для написания программ. Вы должны использовать element-ui при запуске проектов в производственной среде. Затем element-ui должен быть установлен в зависимости.

Интеллектуальная рекомендация

19.03.21 Я загрузил комплексные обучающие видеоуроки Photoshop CC 2015 и обучающие видеоуроки по новым функциям PS CC 2015. Я просмотрел несколько видео, но мне кажется, что они в основном объясняют н…

…

проверка данных весеннего mvc Два способа проверки данных Spring MVC: 1.JSR303 2.Hibernate Validator Второй метод является дополнением к первому методу Шаги для проверки данных с использованием Hibern…

Существует два способа вызова между сервисами Springcloud: RestTemplate и Feign. Здесь мы представляем сервисы вызова RestTemplate. 1. Что такое RestTemplate RestTemplate — это структура веб-запросов …

1. Понимать предварительный, средний, последующий порядок и иерархическую последовательность бинарных деревьев; Свяжите язык C со структурой данных двоичного дерева; Освойте с…

Вам также может понравиться

Последнее обучение, как использовать Kaldi, чтобы проснуться без использования WSTF, поэтому вам нужно глубоко пойти в Kaldi для обучения. Временное состояние обучения. Три изображения представляют со…

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

Расширенные статьи серии Zookeeper 1. NIO, ZAB соглашение, 2PC представления концепции 2. Лидер выборов 3. Рукописный распределенный замок, центр настройки ==================================== 1. NIO,…

Посмотрите на конечный эффект первым DemoPreview.gif SETP1 эффект капли воды Первая реакция на эффект капли воды — нарисовать замкнутую кривую. С помощью события MotionEvent измените радиус во время п…

…

Как выполнить команду через соединение Windows 10

Теперь, когда у нас есть основы, давайте узнаем, как создать ссылку CMD с помощью встроенной команды. Если вы хотите создать новую ссылку, повторите вышеуказанные шаги; однако, если вы хотите изменить ранее созданную команду, просто щелкните правой кнопкой мыши, выберите Свойства , затем добавьте новую команду в T arget .

Теперь давайте запустим команду по нашей ссылке. Для этого введите и команду.

Например, в командной строке будет отображать «hello world».

Вы можете заметить странный «/ k» в середине команды. Это заставляет командную строку делать то, что мы набираем после нее, а затем оставаться открытым, чтобы мы могли увидеть результат.

Если вы предпочитаете, чтобы командная строка закрывалась сразу после ее завершения, замените это / k на / c.

Как открыть командную строку через ярлык Windows 10

Для начала давайте рассмотрим, как открыть командную строку с помощью ярлыка Windows 10. Это ничего не даст сразу; вам все равно придется вручную вводить команду, которую вы хотите сделать. Однако то, что мы рассмотрим здесь, послужит основой для других команд, которые мы рассмотрим в этой статье.

Во-первых, нам нужно создать ссылку CMD. Для этого щелкните правой кнопкой мыши пустое место в проводнике или на рабочем столе. Затем перейдите в New> Link.

Когда вы нажмете на это, Windows 10 немедленно покажет всплывающее окно с запросом местоположения. В этом окне введите нажмите « Далее» .

Это говорит Windows для доступа к системным файлам и запуска исполняемого файла командной строки. Если установка Windows 10 выполняется на другом диске, замените «C:» на диск, используемый для операционной системы.

Нажав Далее , вы можете присвоить памятному имени ссылку. Дайте ему имя типа «Открыть командную строку» и нажмите « Готово» .

Теперь, когда вы дважды щелкнете по новой ссылке, появится командная строка.

Understanding Errors

It is important to differentiate between errors from ts-node, errors from the TypeScript compiler, and errors from . It is also important to understand when errors are caused by a type error in your code, a bug in your code, or a flaw in your configuration.

Type errors from the compiler are thrown as a . These are the same as errors you get from .

Any error that is not a is from node.js (e.g. ), and cannot be fixed by TypeScript or ts-node. These are bugs in your code or configuration.

Unsupported JavaScript syntax

For example, 12 does not understand the optional chaining operator. If you use , then the following TypeScript syntax:

const bar: string | undefined = foo?.bar;

will compile into this JavaScript:

const a = foo?.bar;

When you try to run this code, node 12 will throw a . To fix this, you must switch to or lower so TypeScript transforms into something can understand.

These tricks will make ts-node faster.

Выбор инструментов

Я не тот человек, который любит проводить время, устанавливая и настривая сложные инструменты. Я хочу, чтобы установка инструментов требовала от меня как можно меньше времени, чтобы я мог сконцентрироваться на том, что я люблю делать! Хотя я использовал Gulp в прошлом, сейчас это кажется не такой необходимой частью инструментария: практически все зависимости можно установить через NPM и настроить их с помощью скриптов NPM не сложнее, чем настроить их с помощью Gulp. Поэтому использвание таск-менеджера кажется немного избыточным и только добавляет дополнительную зависимость к проекту.

Инструменты, которые я выбрал здесь, являются личными предпочтениями и подходят для тех проектов, которые я люблю создавать. Они не обязательно являются каким-то стандартом, и существует множество различных способов и других инструментов, для разработки фронтенда. Но я надеюсь, что это руководство поможет вам лучше познакомиться с некоторыми инструментами, которые стали популярными среди разработчиков, чтобы вы могли сделать свой собственный выбор.

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

Комбинирование скриптов

Теперь нам нужно запустить две команды параллельно: Команду для запуска нашего сервера и команду для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор :

Однако вариант с последовательным запуском нам не подходит, поскольку скрипт будет ждать до тех пор, пока скрипт не завершит работу, прежде чем он начнет выполнять скрипт . Если мы добавим этот скрипт, а затем запустим его в терминале (), то не будет запущен, пока мы не остановим сервер.

Чтобы мы могли запускать команды параллельно, нам нужно установить другой пакет. NPM имеет несколько вариантов на выбор. Тот, который выбрал я :

Основными опциями этого пакета (или, по крайней мере, те, которые нас волнуют) являются и . Первая предназначена для последовательной работы, вторая — для параллельной работы со скриптами. Как только мы установим этот пакет, мы сможем использовать его для написания скрипта, который будет запускать одновременно наши скрипты и . Мы назовем этот скрипт .

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

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

Это стартовый проект может отлично подойти для небольших проектов, но чем больше задач мы хотим выполнить, тем больше скриптов нам понадобится написать, и тем сложнее будет ими управлять. Итак, в следующей статье мы рассмотрим, как Parcel, упаковщик модулей, поможет автоматизировать многие из этих задач с минимальной конфигурацией, и предоставить инструменты, необходимые для построения больших проектов.

Параметры командной строки Chrome

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

• –Disable-sync
• –Ash-enable-night-light
• –Allow-outdated-plugins
• -инкогнито
• –Disable-background-mode
• –Disable-translate
• –Кнопка-очистка-память
• –Start-maximized
• –Disable-gpu
• –Disable-plugins
• –Dns-prefetch-disable

1]Временно отключить синхронизацию: –disable-sync

Если вы не хотите синхронизировать все с подключенной учетной записью Google, запустите Chrome с этим флагом. Он отключает синхронизацию данных браузера с учетной записью Google.

2]Включить ночник: –ash-enable-night-light

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

3]Разрешить запуск устаревших плагинов: –allow-outdated-plugins

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

4]Запустите Chrome в безопасном режиме или режиме инкогнито: –incognito

Чтобы запустить Chrome без каких-либо расширений, надстроек, тем и учетной записи, вы можете использовать этот переключатель. Это также гарантирует, что никто не отслеживает ваш профиль. Полезно, если вы хотите что-то протестировать без привязки к вашей учетной записи.

5]Отключить фоновые приложения: –disable-background-mode

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

6]Отключить Google Translate: –disable-translate

Каждый раз, когда вы посещаете веб-сайт на другом языке, Chrome запрашивает перевод на язык по умолчанию. Возможно, вы знаете язык и вам не нужен перевод. Используя этот флаг, вы можете отключить функцию Google Translate.

7]Чтобы Chrome не перегружал ОЗУ: –purge-memory-button

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

8]Запуск Chrome развернут — развернут

Если вы всегда хотите, чтобы Chrome запускался в максимальном размере, обязательно добавьте это в свой ярлык. Обычно Chrome запоминает последнюю позицию на рабочем столе и размер окна.

9]Отключить ускорение графического процессора –disable-gpu

Иногда, когда в Chrome возникают проблемы с воспроизведением видео, вам нужно отключить аппаратное ускорение. Используйте этот флаг при запуске Chrome.

10]Начать с отключенными плагинами –disable-plugins

Хотя вы можете использовать режим инкогнито, чтобы работать с Chrome без какого-либо плагина, но если вы хотите использовать только без плагина, тогда вам пригодится флаг.

11]Отключить предварительную выборку DNS –dns-prefetch-disable

Когда веб-сайт загружается в Chrome, IP-адрес сохраняется. Поэтому в следующий раз, когда вы повторно посетите веб-сайт, преобразование доменного имени в IP-адрес не произойдет. Chrome будет использовать уже доступный IP-адрес для загрузки веб-сайта.

Однако IP-адреса могут меняться, и веб-сайт может предлагать больше IP-адресов серверов, которые вам ближе.

12]Восстановить последний сеанс при запуске: –restore-last-session

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

Как запустить Chrome с флагами?

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

• Далее создайте ярлык на рабочем столе.
• Затем щелкните его правой кнопкой мыши и выберите свойства.
• В конце строки «Target:» добавьте флаги командной строки. Перед флагом нужно добавить двойной тире.
• Теперь, когда вы запустите Chrome, это будет выглядеть так:
• Когда вы запускаете Chrome, он запускает Chrome с этим флагом.

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

Вы можете найти больше переключателей командной строки Chromium здесь.

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

Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:

• Загрузите последнюю версию с веб-сайта и следуйте инструкциям по установке.
• Используйте менеджер пакетов, подобный Homebrew для Mac, который позволяет нам обновлять нашу версию узла простой командой: .
• Использование NVM (Менеджер версий Node).

NVM — это мой предпочтительный вариант, так как он позволяет нам легко обновить версию узла, посмотреть, какую версию мы используем, перечислить другие установленные версии или переключиться на другую версию с помощью одной команды. Но описание установки NPM состоит из множества шагов, что выходит за рамки этой конкретной статьи.

После установки Node (любым удобным для вас способом) вы можете проверить текущую установленную версию, запустив . Если вы используете NVM, вы можете (опционально) создать конфигурационный файл , чтобы убедиться, что вы всегда запускаете правильную версию Node для вашего проекта.

Автоматическая перезагрузка страниц

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

Сначала давайте напишем скрипт, запускающий сервер, который мы будем называть :

В опции мы перечисляем файлы, которые Browsersync должен отслеживать. Он перезагрузит страницу при любом из изменений сделанных в этих файлах. Если мы запустим этот скрипт сейчас (), он запустит локальный сервер, и мы сможем предварительно просмотреть нашу веб-страницу, перейдя на http://localhost:3000 в браузере.