От автора: разработчики любят говорить «сложно писать ПО без инструмента сборки». Инструменты сборки позволяют избавиться от повторяющихся задач. Если вы думаете, что Gulp убил Grunt, то вы можете смотреть в сторону другого инструмента, ведь npm превзошел обоих. «Сейчас Node позволяет реализовывать процесс сборки только с помощью npm.»
Представьте, если бы использование билд инструментов делало вас страшнее. Именно это я чувствовал, когда использовал Grunt и Gulp. Сейчас я использую в Node npm для этих целей, и мне с ним удобно. В этой статье я расскажу, как вам сделать то же самое.
В конце статьи мы сделаем свой шаблон.
Минусы использования других инструментов:
В Grunt и Gulp пакеты, как правило, оборачиваются в главный пакет. Например, gulp-sass на самом деле представляет собой Gulp оболочку для node-sass. Мы можем обратиться напрямую к источнику и просто использовать node-sass в npm!
Недостатки Grunt/Gulp пакетов.
Необходимо следить за версиями всех используемых подмодулей. Если какой-то из них обновился или был удален, нам нужно найти все другие и сделать то же самое. Но в npm такой проблемы нет.
Добавление новых задач в билд инструмент увеличит зависимости. Однако в npm можно использовать обычный команды типа && для комбинирования задач.
Для задач нужны кастомные скрипты Gruntfile.js. Здесь же нужен только файл package.json.
Не поддерживаются команды командной строки. Здесь же можно использовать все команды в файле package.json.
Типы npm скриптов
Скрипты по умолчанию
Кастомные скрипты
Начинаем
Приступим к билд командам!
Создайте пустую папку и инициализируйте ее как npm с помощью npm init. Вас попросят создать файл package.json. Если вам лень жать на enter много раз, как мне, можете запустить сокращенный скрипт npm init –yes.
Откройте папку, в ней создался файл package.json:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "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_modules. Необходимо добавить зависимости.
Сначала установим dev-dependencies:
|
1 |
$ npm i -D jshint lite-server mocha concurrently node-sass uglify-js |
Приступим к созданию скрипта:
|
1 2 3 4 |
"scripts": { ... "dev": "lite-server" } |
npm run dev – я использовал команду как сервер разработки. Я буду следить за живой перезагрузкой и Browser-sync (это подмодуль lite-server, ставить его отдельно не нужно). Не нужно настраивать слежку за всеми файлами (HTML, CSS, JS).
Browser-sync поможет с кроссбраузерной проверкой. Документация по lite-server.
|
1 2 3 4 |
"scripts": { ... "db": "json-server --watch db.json --port 3005" } |
|
1 2 3 4 |
"scripts": { ... "start": "concurrently -k \"npm run dev\" \"npm run db\"" } |
Сокращение npm start для npm run start. Его можно использовать для выполнения двух задач одновременно. Задачи также можно комбинировать через оператор &&. Более подробно в документации.
|
1 2 3 4 |
"scripts": { ... "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js" } |
npm run uglify – минифицирует ваши файлы JS и перемещает в необходимую папку. Папка будет создана только, если ее ранее не было (флаг –p).
|
1 2 3 4 |
"scripts": { ... "lint": "jshint src/**.js" } |
npm run lint – ищет все JS файлы в папке и помогает в поиске ошибок и возможных проблем в JS коде.
|
1 2 3 4 |
"scripts": { ... "sass": "node-sass --include-path scss scss/main.scss assets/main.css" } |
npm run sass – позволяет быстро компилировать файлы .scss в CSS автоматически.
|
1 2 3 4 |
"scripts": { ... "test": "mocha test" } |
Сокращение npm test для npm run test. Mocha – JS фреймворк для тестирования, с его помощью можно писать тест кейсы.
|
1 2 3 4 |
"scripts": { ... "bash": "Location of the Bash/Shell script file" } |
npm run bash – если команд в объекте скрипта слишком много, их можно вынести в Bash/Shell скрипты и подключить в package.json, как сделано выше.
Шаблоны
Мы изучили основные команды npm, и что они делают. Подготовим свой шаблон. Шаблон сэкономит вам время при подготовке билд инструмента. Уделяйте больше времени самому приложению.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"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.
|
1 2 3 4 5 |
"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
Источник: //scotch.io/
Редакция: Команда webformyself.
Комментарии (1)