Gulp sozlamasi.

Assalom aleykum, hamkasb. Ushbu qo'llanmada o'zimiz uchun gulp bundle asosida verstka qilish uchun "servercha" yig'amiz.

Zaruriy dasturlar:

• Nodejs (https://nodejs.org/en/)
• VS Code (https://code.visualstudio.com/)

Nodejs ni o'rnatib bo'lib, CMD(Windows), Terminal(Linux) larda node --v orqali nodejs ning versiyasini tekshirib ko'ring. Bu orqali nodejs o'rnatilganligini bilishimiz mumkin.

!!! agarda nodejs yoki boshqa paketlarni o'rnatilganda xatolik holati bo'lsa bu holat windows foydalanuvchilarida bo'ladi. ctrl + x bosib windows powershell ning adminstrator darajasidagiga kirib. set-executionpolicy remotesigned buyrugini kiriting, buyruqdan keyin sizdan ma'lum bir savol beradi Да (для всех) digan punktni ya'ni A ni yozib enter bosing. Bu orqali yangi o'rnatilayotgan paketlarga ruxsatnoma beriladi. !!!

Endi siz bilan gulp (https://gulpjs.com/) bundle o'rnatishni boshlaymiz.

Birinchi navbatda terminalda(operatsion tizimingiz undagi terminallar turlari o'zingizga bogliq qaysini birini tanlash, bu yogiga faqat terminal terminini ishlataman :) )

npm install --global gulp-cli

buyrugini ishga tushiring. Bu yerda npm - paketlar menedjeri bizga zarur paketlarni o'rnatishda ishlatamiz. install o'rnatish buyrugi, uni qisqa i orqali yozish ham mumkin. --global yoki -g bu yerda paketni operatsion tizimingizda o'rnatish nazarda tutilyapdi. !! linux operatsion tizim kapyushon kiygan yoki starbucks ishqibozlari yangi paketlarni o'rnatishda xatolik bo'ladi uni sudo buyrugi orqali o'rnatishingiz zarur bo'ladi.

O'rnatib bo'lganingiz keyin, zarur papka(o'zbekchada JILD)ga o'tishingiz uchun cd, buyruqi orqali amalga oshirishingiz mumkin bo'ladi.

Loyiha papkaga o'tib birinchi navbatda package.json faylni shakllantirishimiz kerak. buning uchun npm init -y buyrugini terminalga yozing. bu fayl bizga build ichiga o'rnatiladigan paketlar ni boshqarish hamda gulp ni ishga tushirish scriptlarni saqlaydi.

Demak, endi gulp build uchun zarur paketlarni o'rnatamiz. paketlarni loyiha papkasi ichida ochilgan terminal orqali amalga oshiramiz.

1. GULP. Asosiy buildimiz boshqaruvchisi.

npm i --save-dev gulp - bu yerda --save-dev razrabotka vaqtimizda ishtirok etish uchun nazarda tutilgan.

2. gulp-autoprefixer - yozayotgan css stillarimizni krossbrovzerligini ta'minlaydi, ya'ni zarur holda o'zi -webkit- -o- -moz- prefikslarini joylab ketadi.

npm i --save-dev gulp-autoprefixer

3. gulp-cssbeautify - yozilgan css stillarni formatlab beradi. manga o'xshagan qo'li qiyshiqlarga katta yordam beradi.

npm i --save-dev gulp-cssbeautify

4. gulp-rename - fayl nomlarini o'zgartirish uchun. Misol uchun. Style.css va style.min.css 

npm i --save-dev gulp-rename

5. gulp-sass & node-sass - sass preprosessor jarayonini gulpdagi boshqaruvi
npm i --save-dev gulp-sass node-sass

6. gulp-cssnano - css fayllarni minify qilish uchun

npm i --save-dev gulp-cssnano

7. gulp-rigger - js fayllarni ulash uchun

npm i --save-dev gulp-rigger

8. gulp-uglify - js kodlarni minify qilish

npm i --save-dev gulp-uglify

9. gulp-plumber - dasturlash paytida xatolik tufayli tasklar ish jarayoni to'xtab qolmasligi uchun

npm i --save-dev gulp-plumber

10. gulp-imagemin - rasmlarni o'lchamini kichiklashtirib beradi.

npm install --save-dev gulp-imagemin@7.1.0

11. gulp-clean - natijaviy dist papkani tozalash uchun

npm i --save-dev gulp-clean

12. pug - pug shablonizator

npm i --save-dev gulp-pug

13. browser-sync - lokal server

npm i --save-dev browser-sync

loyiha strukturasini shunday holatda olib boramiz.

zaruriy pluginlarni o’rnatib bo’lganimizdan keyin gulpfile.js faylga har bir plugin uchun o'zgaruvchi yaratishimiz zarur. bu orqali pluginlar boshqaruvini amalga oshirishimiz mumkin bo'ladi

const gulp = require('gulp')

const {src, dest} = require('gulp')

const browsersync = require('browser-sync')

const gulpclean = require('gulp-clean')

const autoprefixer = require('gulp-autoprefixer')

const cssbeautify = require('gulp-cssbeautify')

const cssnano = require('gulp-cssnano')

const imagemin = require('gulp-imagemin')

const plumber = require('gulp-plumber')

const gulppug = require('gulp-pug')

const rename = require('gulp-rename')

const rigger = require('gulp-rigger')

const sass = require('gulp-sass')(require("node-sass"))

const uglify = require('gulp-uglify')

fayllar strukturasi manzillarini shakllantirish uchun:

let path = {

build: {

html: "dist/",

js: "dist/assets/js/",

css: "dist/assets/css/",

font: "dist/assets/fonts/",

images: "dist/assets/img/"

},

src: {

font: "src/assets/fonts/*",

pug: "src/pug/pages/**/*.pug",

js: "src/assets/js/*.js",

css: "src/assets/sass/style.scss",

images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}"

},

watch: {

font: "src/assets/fonts/*",

pug: "src/pug/**/*.pug",

js: "src/assets/js/**/*.js",

css: "src/assets/sass/**/*.scss",

images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}"

},

clean: "./dist"

}

Gulpda zaruriy topshiriqlarni(tasklar) shakllantirishni boshlasak. har bir tasklarni funksiya holatida yozib chiqamiz.

Birinchi navbatda gulp da ishlashda server kerak bo'ladi

function browserSync(done){

browsersync.init({

server: {

baseDir: "./dist/"

},

port: 3000

});

}

bu yerda loyihamizda hosil bo'ladigan dist papkasi asosida 3000 portlik server hosil bo'ladi. shu orqali localhost:3000 manzil brovzerda foydalanishimiz mumkin bo'ladi.

css bilan bog'liq bo'lgan holatni boshqarish funksiyasini yozsak

async function css(){

return src(path.src.css, {base: 'src/assets/sass/'})

.pipe(plumber())

.pipe(sass())

.pipe(autoprefixer())

.pipe(cssbeautify())

.pipe(dest(path.build.css))

.pipe(cssnano())

.pipe(rename({ suffix: ".min", extname: ".css"

}))

.pipe(dest(path.build.css))

.pipe(browsersync.stream());

}

e'tibor qilgan bo'lsangiz .pipe metodi mavjud. bu gulpning tasklarni ishga tushirishga yordam beruvchi hokimBuvo buyruqidir. ketma-ket bajarilib src/assets/sass/ ichidagi fayllarni o'qib ketma-ket pipe orqali ishga tushiriladi.

!!! async orqali funksiyamizning bajarilishini asinxron bo'lishi ta'minlandi ya'ni navbatma-navbat.

endi js kodlarimiz bo'yicha tasklar funksiyasi

async function js() {

return src(path.src.js, {base: './src/assets/js/'})

.pipe(plumber())

.pipe(rigger())

.pipe(dest(path.build.js))

.pipe(uglify())

.pipe(rename({suffix: ".min", extname: ".js"}))

.pipe(dest(path.build.js))

.pipe(browsersync.stream());

}

eng ohiridagi browsersync.stream() orqali har bir yozilgan koddan keyin server brovzerni auto holatda refresh qiladi.

endi rasmlar bilan bogliq bo'lgan tasklar funksiyasi

async function images() {

return src(path.src.images)

.pipe(imagemin())

.pipe(dest(path.build.images));

}

natijaviy dist papkasini har safar tozalash uchun esa

async function clean() {

return gulpclean(path.clean);

}

loyihada pug shablonizatori orqali ishlaymiz. pugdagi kodlarimizni jonajon html ga o'tkazish uchun

async function pug() {

return src(path.src.pug, { base: './src/pug/pages/'})

.pipe(gulppug({pretty: true}))

.pipe(dest(path.build.html)) .pipe(browsersync.stream())

}

bu yerda fontlarni shunchaki copy-paste funksiyasi. har ehtimolga qarshi balkim fonts.google.com dan emas "o'zimni" shriftingizni ishlatishni xoxlab qolarsiz.

async function font(){

return src(path.src.font, { base: 'src/assets/fonts/'

})

.pipe(dest(path.build.font))

.pipe(browsersync.stream())

}

ana endi har bir loyihamizda o'zgarishlarni eshitib turuvchi qoravulBobo ni tuzamiz

async function watchFiles() {

gulp.watch([path.watch.pug], pug)

gulp.watch([path.watch.font], font)

gulp.watch([path.watch.css], css)

gulp.watch([path.watch.js], js)

}

barcha jarayonni ishga tushirishdagi ssenariyasi

const build = gulp.series(clean, css, font, js, pug, images)

const watch = gulp.series(build, watchFiles, browserSync)

gulp.series ketma-ket amalga oshiriladigan funksiyalar ro'yhati

barcha funksiyalar ni exports qilib serverga tanishtirsak

exports.css = css

exports.js = js

exports.images = images

exports.clean = clean

exports.pug = pug

exports.font = font

exports.build = build

exports.watch = watch

exports.default = watch;

bo'ldi. agarda to'g'ri ketma-ketlikda qilgan bo'lsangiz loyiha papkada ochilgan terminalda gulp buyrugi bilan loyihani ishga tushirasiz.

ushbu sozlamani video holatida ham ko'rsatish niyatidamiz. faqat kommentda na gaap hamkasb dib yozib, kuch bersangizlar :) rahmat hamkasb