Gulp-ում ֆայլերի հետ աշխատանք

Gulp-ը թույլ է տալիս վերցնել ֆայլերի մի խումբ, կատարել որոշակի գործողություն այդ խմբի հետ, ապա փոփոխված ֆայլերը տեղադրել նոր հասցեով:

Դրա համար նախատեսված են հատուկ ֆունկցիաներ src և dest: Եկեք սկզբից իմպորտավորենք դրանք մեր գրադարանից.

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

src ֆունկցիան թույլ է տալիս ստանալ նշված ֆայլը.

function task(cb) {
	return src('src/styles.css'); // return cb-ի կանչի փոխարեն
}

Այս ֆայլի հետ այնուհետև շղթայական կարող են կատարվել տարբեր գործողություններ pipe ֆունկցիայի միջոցով: Սխեմատիկորեն դա looks like this:

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-ը և այլն:

Յուրաքանչյուր գործողության համար նախատեսված է իր npm պլագինը Gulp-ի համար: Պլագինները պետք է տեղադրվեն և միացվեն մեր ֆայլին: Տարբեր պլագինների ուսումնասիրությամբ մենք կզբաղվենք հաջորդ դասերում:

Մինչև այդ, տաքացման համար, եկեք վերցնենք մեր ֆայլը և ուղարկենք դրա պատճենը 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 ֆայլ: Ստեղծեք առաջադրանք, որը կստեղծի մեր ֆայլերի պատճենը նշված պանակում: