Добавление и запуск скриптов

Программа NPM, помимо управления пакетами, позволяет выполнить запуск скриптов, прописанных в свойстве scripts внутри файла package.json. Для этого используется следующая команда:

npm run <Название скрипта> [-- <Параметры>]

Сейчас свойство scripts в файле package.json имеет следующее значение:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

Давайте изменим скрипт test так, чтобы он запускал на выполнение файл index.js:

"scripts": {
  "test": "node index.js"
}

Запустим скрипт из командной строки:

C:\book\p1>npm run test

> p1@1.0.0 test C:\book\p1
> node index.js

Привет, мир!

В случае возникновения ошибки, ее описание выводится в консоли. Кроме того, в каталоге C:\Users\<Имя пользователя>\AppData\Roaming\npm-cache\_logs создается файл с полным описанием ошибки. Не забывайте периодически чистить этот каталог.

В предыдущих разделах мы установили пакет node-sass. Если мы сейчас попробуем вывести его версию в командной строке, то у нас ничего не получится:

C:\book\p1>node-sass --version
"node-sass" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом.

При глобальной установке пакета получить версию можно, т. к. каталог C:\Users\<Имя пользователя>\AppData\Roaming\npm добавлен в переменную окружения PATH. Выведем версию пакета sass:

C:\book\p1>sass --version
1.26.11 compiled with dart2js 2.9.3

При запуске скрипта с помощью NPM в переменную окружения PATH добавляется путь к каталогу node_modules\.bin, в котором расположены запускаемые скрипты для пакета. Поэтому с помощью скрипта можно получить версию node-sass. Добавим скрипт node-sass-version в файл package.json:

"scripts": {
  "test": "node index.js",
  "node-sass-version": "node-sass --version"
}

Теперь получим версию node-sass:

C:\book\p1>npm run node-sass-version

> p1@1.0.0 node-sass-version C:\book\p1
> node-sass --version

node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

Давайте напишем скрипты для преобразования SCSS-файлов в CSS-файлы с помощью sass и node-sass. Но вначале внутри каталога C:\book\p1 создаем каталоги scss и dist. Внутри каталога C:\book\p1\dist создаем вложенный каталог css, в который будем сохранять создаваемые CSS-файлы. В каталоге C:\book\p1\scss создаем файл main.scss (листинг 2.2), содержащий код для программы Sass. Файл должен быть сохранен в кодировке UTF-8 без BOM.

Листинг 2.2. Содержимое файла main.scss

$black: #000000;
$white: #ffffff;

body {
   color: $white;
   background-color: $black;
}

Теперь добавляем в файл package.json следующие скрипты:

"scripts": {
  "test": "node index.js",
  "node-sass-version": "node-sass --version",
  "sass-dev": "sass scss:dist/css",
  "sass-watch": "sass --watch scss:dist/css",
  "node-sass": "node-sass --output-style compressed scss/main.scss dist/css/main.min.css",
  "node-sass-dev": "node-sass --output-style expanded --source-map true -o dist/css/ scss/main.scss",
  "node-sass-watch": "node-sass --watch --output-style expanded --source-map true -o dist/css/ scss/"
}

Итак, скрипт sass-dev позволяет преобразовать все SCSS-файлы, расположенные в каталоге C:\book\p1\scss, в одноименные CSS-файлы и сохранить их в каталоге C:\book\p1\dist\css:

C:\book\p1>npm run sass-dev

> p1@1.0.0 sass-dev C:\book\p1
> sass scss:dist/css

После выполнения скрипта sass-dev в каталоге C:\book\p1\dist\css будут созданы файлы main.css и main.css.map. Содержимое файла main.css:

body {
  color: #ffffff;
  background-color: #000000;
}

/*# sourceMappingURL=main.css.map */

Скрипт sass-watch запускает отслеживание изменений SCSS-файлов внутри каталога C:\book\p1\scss:

C:\book\p1>npm run sass-watch

> p1@1.0.0 sass-watch C:\book\p1
> sass --watch scss:dist/css

Compiled scss\main.scss to dist\css\main.css.
Sass is watching for changes. Press Ctrl-C to stop.

После запуска команды, программа Sass будет выполняться в бесконечном цикле, блокируя ввод других команд. Чтобы вводить другие команды нужно запустить дополнительное окно командной строки. Сразу после сохранения SCSS-файла будет автоматически запущен процесс преобразования и в командной строке появится следующее сообщение, выделенное зеленым цветом:

Compiled scss\main.scss to dist\css\main.css.

Если в файле содержится ошибка, то будет выведено сообщение о проблеме:

Error: Undefined variable.
  
  ¦    background-color: $black2;
  ¦                      ^^^^^^^
  
  scss\main.scss 6:22  root stylesheet

Чтобы остановить отслеживание нужно нажать комбинацию клавиш <Ctrl>+<C> или закрыть окно консоли. В первом случае программа запросит подтверждение действия, путем ввода буквы y и нажатия клавиши <Enter>:

Завершить выполнение пакетного файла [Y(да)/N(нет)]? y

C:\book\p1>

Скрипт node-sass позволяет преобразовать файл main.scss в сжатый файл main.min.css, без создания дополнительного файла с расширением css.map:

C:\book\p1>npm run node-sass

> p1@1.0.0 node-sass C:\book\p1
> node-sass --output-style compressed scss/main.scss
  dist/css/main.min.css

Rendering Complete, saving .css file...
Wrote CSS to C:\book\p1\dist\css\main.min.css

Скрипт node-sass-dev позволяет преобразовать файл main.scss в файл main.css без сжатия, с дополнительным созданием файла с расширением css.map:

C:\book\p1>npm run node-sass-dev

> p1@1.0.0 node-sass-dev C:\book\p1
> node-sass --output-style expanded --source-map true -o dist/css/
  scss/main.scss

Rendering Complete, saving .css file...
Wrote CSS to C:\book\p1\dist\css\main.css
Wrote Source Map to C:\book\p1\dist\css\main.css.map

Скрипт node-sass-watch запускает отслеживание изменений SCSS-файлов внутри каталога C:\book\p1\scss:

C:\book\p1>npm run node-sass-watch

> p1@1.0.0 node-sass-watch C:\book\p1
> node-sass --watch --output-style expanded --source-map true 
  -o dist/css/ scss/

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

=> changed: C:\book\p1\scss\main.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\book\p1\dist\css\main.css
Wrote Source Map to C:\book\p1\dist\css\main.css.map

Если в файле содержится ошибка, то будет выведено сообщение о проблеме.

Чтобы остановить отслеживание нужно нажать комбинацию клавиш <Ctrl>+<C> или закрыть окно консоли. В первом случае программа запросит подтверждение действия, путем ввода буквы y и нажатия клавиши <Enter>:

Завершить выполнение пакетного файла [Y(да)/N(нет)]? y

C:\book\p1>

Запустить скрипты на выполнение можно не только в командной строке, но и в редакторе VS Code. Для этого используются два основных способа:

• в файле package.json наводим указатель мыши на название скрипта. Отобразится всплывающее окно с двумя пунктами: Запуск сценария и Отладка сценария. Выбираем пункт Запуск сценария в этом окне или одноименный пункт в контекстном меню. Результат выполнения скрипта отобразится на вкладке Терминал;
• на панели Проводник в секции Сценарии NPM (рис. 2.11) наводим указатель мыши на название скрипта. Справа отобразятся два значка: Запуск и Отладка. Щелкаем левой кнопкой мыши на значке Запуск или выбираем одноименный пункт в контекстном меню. Результат выполнения скрипта отобразится на вкладке Терминал.

Рис. 2.11. Секция Сценарии NPM на панели Проводник и запуск скрипта в терминале

Можно также в меню Терминал выбрать пункт Запуск задачи, найти скрипт в списке, предварительно щелкнув на ссылке Все задачи. Справа от названия скрипта отобразится значок в виде шестеренки с подсказкой Настроить задачу. Щелкаем левой кнопкой мыши на этом значке. В результате будет создан файл tasks.json в каталоге C:\book\p1\.vscode. Аналогичным образом настраиваем все скрипты.

Скрипты могут принадлежать к одной из двух групп: test (тестирование) и build (сборка). Принадлежность к группе описывается свойством group внутри файла tasks.json:

"group": "build"

Все настроенные задачи можно запустить, выбрав в меню Терминал пункт Запуск задачи. После выбора пункта в списке, задача будет запущена и результат выполнения скрипта отобразится на вкладке Терминал. Задачи, принадлежащие к группе build, доступны также при выборе пункта Запустить задачу сборки в меню Терминал.

Если очень хочется запускать программу двойным щелчком левой кнопкой мыши, то можно создать вспомогательный файл с расширением bat и внутри него запускать программу. После инструкции запуска программы вставляем команду pause, которая выведет строку Для продолжения нажмите любую клавишу и будет ожидать нажатия клавиши. Давайте в каталоге C:\book\p1 создадим файл script.bat со следующим кодом:

@echo off
title Запуск программы index.js
echo Результат:
@echo.
node index.js
@echo.
@echo.
pause

Обратите внимание: кодировка файла script.bat должна быть windows-866, а не UTF-8. После запуска скрипта откроется окно, изображенное на рис. 2.12, с результатом выполнения программы index.js. Для закрытия окна достаточно нажать любую клавишу.

Существуют и другие способы запуска программы. Например, с помощью Web-браузера. Однако тут возможны проблемы, так как мы будет изучать все последние нововведения в языке JavaScript, которые Web-браузеры еще не поддерживают. Поэтому запуск программ в Web-браузере мы рассмотрим отдельно.

Рис. 2.12. Результат запуска программы с помощью файла script.bat

Учебник по JavaScript (Node.js) в формате PDF