frontend dasturlashdagi ishlarni avtomatlashtirish
- Sass/LESSni CSSga o'tkazish
- CSS kodni prefikslash
- CSS media so'rovlarni jamlash va takrorlanuvchi kodlarni chiqarib tashlash
- rasmlarni optimallashtirish
- rasmlarni WebPga o'tkazish
- rasmning turli o'lchamdagi nusxalarini yaratish (retina uchun)
- JS fayllarni transpilyatsiya qilish va bitta faylga jamlash
Gulp nimalar qila oladi?
- Gulp - verstka
- Webpack - JSga asoslangan loyihalar
Webpack bilan Gulpning farqi
- NodeJSni o'rnatish
- npm bilan qisqa tanishuv
- Gulpni kompyuterga o'rnatish
Gulpni ishlatishga tayyorgarlik
- Semantic versioning
- MAJOR - katta
- MINOR - kichik
- PATCH - tuzatishlar
Misollar:
- Bootstrap - 4.5.3
- jQuery - 3.5.1
- Laravel - 8.9.0
Dasturlar talqinlari haqida
- backward compatibility - oldingi talqinlariga mos tushish
- LTS - long-time support
Dasturlar talqinlari haqida (davomi)
- GUI - graphical user interface
- CLI - command line interface
Interfeys turlari
- source/src - manba - hamma kod shu papkada yoziladi
- build/dist - tayyor natija - loyiha tugatilgandan keyin avtomatik tarzda generatsiya qilinadi
Loyiha tuzilmasi
- npm - prorab, brigadir
- paketlarni o'rnatish, yangilash, o'chirib tashlash, loyiha buyruqlarini berish
- loyihaga kerak bo'lgan muhim ma'lumotlarni saqlash
- Ishga tushirish - npm init
- package.json - loyiha ma'lumotlari jamlangan fayl
- npm init -y
npm bilan yaqindan tanishuv
- npm install = npm i
- npm install gulp --save-dev
- nechta paket o'rnatildi?
Gulpni loyiha uchun o'rnatish
- devDependency - development - qurilish, tuzish payti kerak bo'lgan narsalar
- dependency - doimiy, loyiha qurib bitirilgandan keyin ham kerak bo'lgan narsalar
- paketlarni o'chirib tashlash
dependency VS devDependency
- hamma kerakli paketlar joylashtiriladigan joy
- hajmi tezda kattalashib ketadi
- Git bilan ishlashdagi muhim nuqta
- loyihani zip qilish, sheriklarga ulashish
- npm install yordamida barcha kerakli narsalarni o'rnatish
node_modules papkasi haqida
- konveyer, quvur, truba
- A -> B
- A -> 1 -> B
- A -> 1 -> 2 -> B
Gulp o'zi qanday ishlaydi?
- gulpfile.js fayli
- Gulp 3 va Gulp 4
Gulp qanday sozlanadi?
- task - vazifa
- src - source - manba
- dest - destination - borar joy
- pipe - quvur, amallarni bir-biriga ulash
- series -
- parallel -
- - kuzatish
- default - standart bajariladigan vazifa
Gulpga oid atamalar
- "task" yaratish
- Gulp plaginlari (ingliz tilida yozilishi - "plugin")
- gulp-sass
Sassni CSSga o'girish
- dasturning sozlamalari
- parollar, muhit sozlamalari joylangan fayllar
- dizayn fayllari
- loglar
Git yana qaysi fayllarni kuzatmasin?
- AutoPrefixer
- gulp-autoprefixer
- qaysi brauzerlarga moslash ro'yxati joylashuvi
CSSni prefikslash
- kichikroq hajmdagi fayl
- cssminifier.com
- gulp-csso
CSSni minifikatsiya qilish
- minifikatsiya qilingan fayl suffiksi - .min.
- gulp-rename
Fayl nomini o'zgartirish
- loyihani BEMga ko'ra tartiblash
- sourcemap nega kerak?
- gulp-sourcemaps
Sourcemap?
- watch - kuzatish
- Sass fayllar o'zgarganda CSSga kompilyatsiyani avtomatik ishga tushirish
Gulpda fayllarni kuzatish
- browser-sync
- HTML va CSS o'zgarganda sahifani yangilash
- brauzerlararo sinxronizatsiya
Serverni sozlash, avtomatik yangilash
- xato ketganini payqamay qolish
- gulp-notify
Sass kompilyatsiyada xatolik
A -> B
A -> B -> C
GCMQ
A -> B
A -> B -> C
Rasmlar
! wildcard
JS
Gulp
By Muhammadjavohir Suratov
