Gulp-da fayllar bilan ishlash

Gulp fayllar guruhini olish, ushbu guruh bilan ma'lum bir amalni bajarish va keyin o'zgartirilgan fayllarni yangi manzilga joylashtirish imkoniyatini beradi.

Buning uchun maxsus funksiyalar src va dest mo'ljallangan. Keling, boshlash uchun ularni kutubxonamizdan import qilaylik:

let {src, dest} = require('gulp');

src funksiyasi ko'rsatilgan faylni olish imkoniyatini beradi:

function task(cb) {
	return src('src/styles.css'); // cb ni chaqirish o'rniga return
}

Ushbu fayl bilan keyin zanjir bo'yicha turli amallarni pipe funksiyasi yordamida bajarish mumkin. Bu sxematik ravishda quyidagicha ko'rinadi:

function task(cb) {
	return src('src/styles.css')
		.pipe(amal1)
		.pipe(amal2)
		.pipe(amal3)
}

Zanjirdagi oxirgi pipe chaqiruvi dest funksiyasi bilan tugaydi, bu bajarilgan amallar natijasining joylashtiriladigan papkasini belgilaydi:

function task(cb) {
	return src('src/styles.css')
		.pipe(amal1)
		.pipe(amal2)
		.pipe(amal3)
		.pipe(dest('dist')); // dist papkasiga jo'natamiz
}

Har bir amal bizning faylimiz bilan ma'lum bir manipulyatsiyani amalga oshiradi. Masalan, avval LESS ni CSS ga o'zgartirish, keyin CSS xususiyatlariga prefikslar qo'shish, keyin olingan CSS ni minimallashtirish va hokazo.

Har bir amal uchun Gulp uchun alohida npm plagini mo'ljallangan. Pluginlarni o'rnatish va faylimizga ulash kerak. Turli pluginlarni o'rganish bilan keyingi darslarda shug'ullanamiz.

Hozilcha isinish uchun keling, faylimizni olaylik va uning nusxasini dist papkasiga jo'nataylik, xuddi uning ustida ba'zi amallarni bajarilgandek:

function task(cb) {
	return src('src/styles.css')
		.pipe(dest('dist'));
}

Uchta CSS fayli yarating. Uchta ochiq vazifa yarating. Har bir vazifa fayllarimizdan birining nusxasini belgilangan papkada yaratilsin.

Fayllarga yo'l massivi

src funksiyasi parametr sifatida bitta faylni emas, balki darhol bir nechtasini massiv shaklida qabul qilishi mumkin:

function task(cb) {
	let files = [
		'src/styles1.css',
		'src/styles2.css'
	];
	
	return src(files)
		.pipe(dest('dist'));
}

Uchta CSS fayli yarating. Fayllarimizning nusxasini ko'rsatilgan papkada yaratadigan vazifa yarating.