Использование в 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблоны

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

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

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

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

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

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 с полного нуля

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

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree