Використання в Node npm в якості інструменту складання

340

Від автора: розробники люблять говорити «складно писати без інструменту складання». Інструменти складання дозволяють позбутися від повторюваних завдань. Якщо ви думаєте, що 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:

{
“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:

$ 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 файли в папці і допомагає в пошуку помилок і можливих проблем в PHP коді.

“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.