Gulp-те файлдармен жұмыс

Gulp файлдар тобын алып, сол топпен белгілі бір операцияны орындауға, содан кейін өзгертілген файлдарды жаңа мекенжайға орналастыруға мүмкіндік береді.

Бұл үшін арнайы src және dest функциялары арналған. Алдымен оларды кітапханамыздан импорттайық:

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

src функциясы көрсетілген файлды алуға мүмкіндік береді:

function task(cb) {
	return src('src/styles.css'); // cb шақырудың орнына return
}

Содан кейін осы файлмен pipe функциясының көмегімен тізбектей әртүрлі операцияларды орындауға болады. Бұл схема түрінде келесідей:

function task(cb) {
	return src('src/styles.css')
		.pipe(операция1)
		.pipe(операция2)
		.pipe(операция3)
}

Тізбектегі соңғы pipe шақырылымы dest функциясымен аяқталады, ол орындалған операциялардың нәтижесі жіберілетін буманы көрсетеді:

function task(cb) {
	return src('src/styles.css')
		.pipe(операция1)
		.pipe(операция2)
		.pipe(операция3)
		.pipe(dest('dist')); // dist бумасына жібереміз
}

Әрбір операция біздің файлымызмен белгілі бір манипуляцияны орындайды. Мысалы, алдымен LESS-ты CSS-ке түрлендіруге, содан кейін CSS қасиеттеріне префикстер қосуға, содан кейін алынған CSS-ті минимизациялауға және т.б. болады.

Әрбір операция үшін Gulp-тің өз npm плагині арналған. Плагиндерді орнатып, біздің файлымызға қосу керек. Әртүрлі плагиндерді зерттеуге келесі сабақтарда келеміз.

Қазір жаттығу үшін файлымызды алып, оған бірнеше операция орындағандай етіп, dist бумасына оның көшірмесін жіберейік:

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

Үш CSS файлы жасаңыз. Үш жалпыға бірдей тапсырма жасаңыз. Әр тапсырма файлдарымыздың бірінің көшірмесін көрсетілген бумада жасасын.

Файлдарға жолдар массиві

src функциясы параметр ретінде бір файлды емес, бірден бірнешеуін массив түрінде қабылдай алады:

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

Үш CSS файлы жасаңыз. Файлдарымыздың көшірмесін көрсетілген бумада жасайтын тапсырма жасаңыз.