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 - ketma-ket tartibda bajariladigan vazifalar
  • parallel - parallel tarzda bajariladigan vazifalar
  • watch - 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

Made with Slides.com