Использование в Node npm в качестве инструмента сборки

Использование в Node npm в качестве инструмента сборки

От автора: разработчики любят говорить «сложно писать ПО без инструмента сборки». Инструменты сборки позволяют избавиться от повторяющихся задач. Если вы думаете, что Gulp убил Grunt, то вы можете смотреть в сторону другого инструмента, ведь npm превзошел обоих. «Сейчас Node позволяет реализовывать процесс сборки только с помощью npm.»

Представьте, если бы использование билд инструментов делало вас страшнее. Именно это я чувствовал, когда использовал Grunt и Gulp. Сейчас я использую в Node npm для этих целей, и мне с ним удобно. В этой статье я расскажу, как вам сделать то же самое.

В конце статьи мы сделаем свой шаблон.

Минусы использования других инструментов:

В Grunt и Gulp пакеты, как правило, оборачиваются в главный пакет. Например, gulp-sass на самом деле представляет собой Gulp оболочку для node-sass. Мы можем обратиться напрямую к источнику и просто использовать node-sass в npm!

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Недостатки Grunt/Gulp пакетов.

Необходимо следить за версиями всех используемых подмодулей. Если какой-то из них обновился или был удален, нам нужно найти все другие и сделать то же самое. Но в npm такой проблемы нет.

Добавление новых задач в билд инструмент увеличит зависимости. Однако в npm можно использовать обычный команды типа && для комбинирования задач.

Для задач нужны кастомные скрипты Gruntfile.js. Здесь же нужен только файл package.json.

Не поддерживаются команды командной строки. Здесь же можно использовать все команды в файле package.json.

Типы npm скриптов

Скрипты по умолчанию

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

Начинаем

Приступим к билд командам!

Создайте пустую папку и инициализируйте ее как npm с помощью npm init. Вас попросят создать файл package.json. Если вам лень жать на enter много раз, как мне, можете запустить сокращенный скрипт npm init –yes.

Откройте папку, в ней создался файл package.json:

{
  "name": "your_directory_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
 

По умолчанию внутри объекта скрипта создается тестовый скрипт. Внутри объекта скрипта мы будем настраивать наши задачи.

Запустите задачу по умолчанию с помощью сокращения npm test для npm run test

Использование в Node npm в качестве инструмента сборки

В ошибке говорится, что отсутствует node_modules. Необходимо добавить зависимости.

Сначала установим dev-dependencies:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
$ npm i -D jshint lite-server mocha concurrently node-sass uglify-js

Приступим к созданию скрипта:

"scripts": {
  ...
  "dev": "lite-server"
}

npm run dev – я использовал команду как сервер разработки. Я буду следить за живой перезагрузкой и Browser-sync (это подмодуль lite-server, ставить его отдельно не нужно). Не нужно настраивать слежку за всеми файлами (HTML, CSS, JS).

Browser-sync поможет с кроссбраузерной проверкой. Документация по lite-server.

  "scripts": {
 ...
 "db": "json-server --watch db.json --port 3005"
  } 
"scripts": {
 ...
 "start": "concurrently -k \"npm run dev\" \"npm run db\""
  } 

Сокращение npm start для npm run start. Его можно использовать для выполнения двух задач одновременно. Задачи также можно комбинировать через оператор &&. Более подробно в документации.

"scripts": {
 ...
 "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js"
  } 

npm run uglify – минифицирует ваши файлы JS и перемещает в необходимую папку. Папка будет создана только, если ее ранее не было (флаг –p).

"scripts": {
 ...
 "lint": "jshint src/**.js"
  } 

npm run lint – ищет все JS файлы в папке и помогает в поиске ошибок и возможных проблем в JS коде.

"scripts": {
  ...
  "sass": "node-sass --include-path scss scss/main.scss assets/main.css"
}

npm run sass – позволяет быстро компилировать файлы .scss в CSS автоматически.

"scripts": {
  ...
  "test": "mocha test"
}

Сокращение npm test для npm run test. Mocha – JS фреймворк для тестирования, с его помощью можно писать тест кейсы.

"scripts": {
  ...
  "bash": "Location of the Bash/Shell script file"
}

npm run bash – если команд в объекте скрипта слишком много, их можно вынести в Bash/Shell скрипты и подключить в package.json, как сделано выше.

Шаблоны

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

"scripts": {

  "start": "concurrently -k \"npm run dev\" \"npm run watch-css\"",

  "dev": "lite-server",
  "db": "json-server --watch db.json --port 3005",

  "build-js": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js",

  "lint": "lint jshint src/**/**.js",

  "build-css": "node-sass --include-path scss scss/main.scss assets/main.css",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",

  "test": "mocha test",
  "pretest": "npm run lint",
  "posttest": "echo the test has been run!",

  "bash": "Location of the bash/shell script file"
}

Шаблон позаботится обо всем необходимом в фазе разработке:

npm run dev – запускает приложение, открывает его в браузере, перезагружает браузер при изменении исходников.

build-js – минифицирует все JS файлы, что понадобится при развертывании на продакшн.

watch-css – Nodemon – утилита, которая следит за изменениями в исходниках и автоматически перезапускает сервер. Я использовал ее для мониторинга изменений в файле .scss. Если изменения были, будет перезапущен сервер и пересоберется CSS.

"scripts": {
  "test": "echo I am test",
  "pretest": "echo I run before test",
  "posttest": "echo I run after test"
}

npm test – обертка для трех команд сверху «pretest test posttest» и выполняет их в перечисленном порядке. Если запустить npm test, будет искаться команда pretest. Если она есть, она выполнится первой. Далее выполнятся test и posttest. Если pretest не найден, будет выполнен test.

Оставшиеся команды я разобрал в предыдущем разделе. Шаблон также можно настроить под свои требования.

Заключение

Надеюсь, статья сэкономила вам время при подготовке билд инструмента. Мы подготовили свой шаблон для npm в качестве билд инструмента. Надеюсь, теперь вы согласитесь, что npm убил Grunt и Gulp. Используйте шаблон, можете его улучшить. Также можете посмотреть официальные скрипты npm.

Автор: Madhankumar

Источник: https://scotch.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree