Шпаргалка по проекту
Шпаргалка по "швидкому" старту проекту на Node.js зі зборщиком
-
Скачуємо та встановлюємо Node.js (якщо цього ще не було зроблено) і пару корисних модулів через консоль:
npm install browser-sync --global
npm install gulp-cli --global -
Створюємо репозиторій Git, клонуємо його собі в папку проекту.
Структура нашого проекту буде приблизно такою:build/
resources/
src/
css/
fonts/ шрифти
img/ статичні зображення
partial/ стилі компонентів
vendor/ стилі плагінів
mixins.scss міксіни
styles.scss головний файл стилів
vars.scss змінні
img/ динамічні зображення
js/
lib/ бібліотеки
partial/ скрипти компонентів
plugins/ плагіни
const.js основні константи, змінні
functions.js службові функції
scripts.js головний файл скриптів
view/ html-код сторінок
partial/
index.html головна сторінка
pages.html посилання на всі сторінки проекту
.gitignore конфігурація для Git
.htaccess конфігурація для сервера
gulpfile.js конфігурація для Gulp
package.json конфігурація для пакетного менеджера npm
TODO.txt TODO-list -
Запускаємо консоль з папки проекту, створюємо Node-проект та встановлюємо gulp:
(gulp-cli встановлюється один раз, глобально для всіх проектів)npm init -y(--save-dev - зберегти інформацію про пакет в package.json)
npm install gulp --save-dev
Якщо ж ми підключилися до існуючого проекту - після клонування проекту собі і встановлення gulp-cli потрібно підтягнути модулі:
npm installЦя команда встановлює в поточний проект всі модулі, що прописані в package.json.
-
Встановлюємо необхідні модулі (вибираємо потрібні нам):
gulp-changed - запускає завдання лише для змінених файлів;
node-sass - препроцесор SASS;
gulp-sourcemaps - сорс-мапи для CSS, JS;
gulp-clean-css - мініфікатор CSS;
gulp-concat - об'єднує потоки в один (наприклад, JS);
gulp-uglify - мініфікатор JS;
gulp-rename - переіменувує потоки (наприклад, all.js --> all.min.js);
gulp-pug - препроцесор html;
gulp-rigger - зборщик html;
gulp-imagemin - стискє зображення PNG, JPEG, GIF та SVG;
gulp-webp - перетворює PNG, JPEG, GIF у WebP;
gulp-chmod - зміна прав файлів (гугли chmod);
Зборщики проектів
Навіщо нам зборщики?
Якщо вам доведеться працювати над проектом дещо більшим, ніж лендінг чи кількасторінковий сайт, то файли CSS, JS дуже швидко розростатимуться в об'ємах. Невелика правка в шапці чи підвалі сайту потребуватиме редагування десятків, сотень html-файлів.
Зборщики дозволяють краще організувати роботу в проекті:
- використати препроцесори та постпроцесори;
- порозносити HTML, CSS та JS по різних файлах і папках, згрупувавши по логічним блокам, модулям;
- під час зборки об'єднати всі потрібні шматочки до купи;
- об'єднати весь CSS та весь JS в 2 файла;
- перевіряти, валідувати код;
- стискати, мініфікувати, обфускувати код;
- оптимізувати зображення;
- створювати спрайти;
- автоматично створювати документацію;
- проводити автоматичне тестування;
- оновлювати патч-версії бібліотек і плагінів...
Ну і так далі.
Фактично зборщики є таск-ранерами, тобто, вони запускають по черзі ряд своїх плагінів (програм). Що, коли і як запускати - можна гнучко налаштовувати, підключати нові плагіни.
В один проект можна встановити декілька зборщиків і розподіляти між ними списки задач, з якими найкраще справляється той, чи інший зборщик.
Node.js
Node.js - програма, що виконує JavaScript (+ I/O + бібліотеки). Побудована на базі віртуальної машини від Google, яка вбудована в Chromium (FireFox, IE/Edge, Safari мають свої віртуальні машини для виконання JavaScript).
JavaScript доступний нам в основному в браузері. Віртуальна машина V8 дозволяє виконувати скрипти на комп'ютері незалежно від браузера, і навіть на пристроях типу пральних машинок, кавоварок, прасок, в дронах, робототехніці...
Та V8 не вміє повноцінно працювати з файлами (заради безпеки JavaScript не може записувати чи зчитувати файли з комп'ютера). Тому в Node.js добавлені програми- та бібліотеки-проксі.
Node.js має обширну базу репозиторіїв різноманітних модулів, в т.ч. не пов'язаних з веб-розробкою.
Переважна більшість популярних зборщиків використовує Node.js.
Структура проекту
/app/ - робоча версія проекту
/dist/ - продакшн-версія проекту
/resource/ - всілякі ресурси для розробки (макети, технічні завдання, таблиці...)
/app/src/ - верстка
/app/src/css/ - стилі, в т.ч. SASS, Less, Stylus
/app/src/css/images/ - статичні зображення
/app/src/css/partial/ - стилі окремих блоків, модулів
/app/src/fonts/ - шрифти
/app/src/img/ - динамічні зображення
/app/src/js/ - JavaScripts, CoffeeScript
/app/src/js/libs/ - бібліотеки
/app/src/js/plugins/ - плагіни
/app/src/view/ - html-код
/app/src/view/index.html
/app/src/view/partials/ - html-код окремих блоків, модулів
/app/src/view/includes/ - html-код окремих блоків, модулів
/app/src/index.html
/app/src/partials/ - html-код окремих блоків, модулів
/app/src/includes/ - html-код окремих блоків, модулів
(тема в процесі розробки)
.gitignore
В файл .gitignore прописуються файли і папки, які Git не буде добавляти в репозиторій.
Створіть цей файл (з крапкою на початку) в корені проекту.
Якщо ви користуєтеся IDE від JetBrains, то в першу чергу пропишіть туди папку .idea.
Модулі Node.js в репозиторій не заливаються (навіщо в репозиторії десятки-сотні мегабайт файлів, які і так є в репозиторіях тих модулів?).
Інформація про всі модулі зберігається в файлі package.json, якщо ви з репозиторія скачаєте проект собі, то відновити всі модулі (розвертання проекту) можна командою:
npm i
Таким чином, файл .gitignore буде виглядати приблизно так:
.idea
/resource/
/node_modules/
Gulp
Скрінкаст по Gulp 4 на learn.javascript.ru.
Переваги: швидкість, компактність конфігурації.
Недоліки: не у всьому найкращий.
Запустіть консоль в папці поточного місяця, наприклад, D:\work\2016-12\
Встановіть зборщик Gulp (виконується один раз):
npm install --global gulp-cli
Наступні команди дозволяють створити новий проект gulp-test, проінсталювати в нього Gulp. Пільнуйте, щоб не було помилок.
npx mkdirp gulp-test
cd gulp-test
npm init
npm install --save-dev gulp
Перегляньте вміст папки проекту. Дослідіть папку node_modules, файли JSON.
Тепер можна створювати задачі для Gulp. Створіть файл gulpfile.js - це конфігурація зборщика.
Задачі пишуться на мові JavaScript, синтаксис такий:
function defaultTask(callback) {
// дії, які потрібно виконати
callback();
}
exports.default = defaultTask;
Приклад задачі:
function defaultTask(callback) {
console.log('Hello, this is my first (default) task');
callback();
}
function myHelloTask(callback) {
console.log('Hello-hello-hello! This is my second task');
callback();
}
exports.default = defaultTask;
exports.hello = myHelloTask;
Протестуємо. Запустіть в консолі:
gulp
gulp hello
Щоб виконувати щось більш корисне - потрібно гуглити та читати документацію.
Наприклад, для того, щоб користуватися препроцесором Less, потрібно встановити відповідний плагін-вочер (watcher), це програма, яка стежить за зміною less-файлів і запускає компіляцію в потрібні моменти. Можна запускати компіляцію і вручну.
Google: gulp less або gulp less watcher
Увага!!! До версії 4 синтаксис був інакшим, в новому Gulp він вже не актуальний, викликає помилку:
gulp.task('назва_задачі', function(){
// дії, які потрібно виконати
});
Шукайте актуальну інформацію.
Корисні плагіни:
gulp-sass - компілятор SASS.
gulp-minify-css - мініфікація CSS.
gulp-uglify - мініфікація JS.
browser-sync - локальний сервер з live-reload і тунелем на наш localhost для демонстрації проекта замовнику.
gulp-imagemin - стискання картинок.
imagemin-pngquant - доповнення до попереднього плагіну для роботи з PNG.
gulp-sourcemaps - генерує css sourscemaps.
gulp-rigger - дозволяє інклудити один файл в інший простою конструкцією:
//= footer.html
Grunt
Переваги: універсальний, популярний, дуже багато плагінів, розвинене комюніті.
Недоліки: багатослівний (конфіг простого проекта в сотні строк), не дуже швидкий, сповільнюється з ростом проекту.
Broccolli
Переваги: як конкурент Gulp усуває його проблемні місця.
Недоліки: мало плагінів.
Brunch
Переваги: заточений саме під фронтенд, значно швидший за Grunt, компактна конфігурація може бути на писана як на JS, так і на CoffeeScript.
Недоліки: по швидкості не дотягує до Gulp, Broccolli, плагінів значно менше, ніж у Grung, Gulp.
Bower - пакетний менеджер
В сучасній розробці і сайтів, і додатків, і програм прогресує нездорова тенденція підключати безмежну кількість модулів. Потрібна якась маленька кнопочка, свічер, повзунок - розробник тягне з мережі модуль на десятки мегабайт і тисячі файлів.
Біда не приходить одна: модулі мають залежності: щоб та кнопочка запрацювала - потрібно скачати інший модуль, плагін, бібліотеку, а та, в свою чергу, теж може чогось потребувати...
Таким чином розробник бігає з сайту на сайт, по репозиторіям гітхаба і збирає всі необхідні пакети.
Пакетні менеджери дозволяють це все автоматизувати - підтримувати залежності, викачувати всі необхідні модулі, пакети в автоматичному режимі чи при введенні команди в консолі.
Простота використання пакетних менеджерів дозволяє створювати сайти, що з'їдають браузером 200-500 Мб оперативної пам'яті на кожну вкладку, 300-мегабайтні додатки на смартфонах з мінімальною функціональністю, комп'ютерні програми типу блокнота зі смайликами, які важать більше, ніж весь пакет програм Microsoft Office 2000...
Бажаю вам навчитися користуватися пакетними менеджерами з розумом, не тягнути в свій проект весь смітник інтернета, контролювати залежності (щоб одна пімпочка не притягнула за собою 30 тисяч файлів загальним розміром у кілька сотень мегабайт).
Вчіться писати свої модулі, плагіни, без чи з мінімальними залежностями.
Використовуйте фреймворки тільки якщо без них буде дійсно важко і довго. Контролюйте файли фреймворків, намагайтеся відмовитися від зайвого баласту (як приклад - замість всього бутстрапа використовуйте лише сітку).
Webpack
Скрінкаст по Webpack на learn.javascript.ru.
Webpack на Habr.
Babel
Babel - це модуль, що перетворює код сучасного JS (ECMA Script 6+, 2015) в код згідно специфікації ECMA Script 5 (2009).
Потрібен для максимальної підтримки браузерів починаючи з IE7, також для підтримки браузерів в старих пристроях Palm Pilot, Blackberry, Opera Mini, які досі мають деяку долю ринку.