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 හැකිතාක් කුඩා කරන්න සහ යනාදිය.

සෑම මෙහෙයුමක් සඳහාම එහිම 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 ගොනු තුනක් සාදන්න. කාර්යයක් සාදන්න, එය අපගේ ගොනු වල පිටපත් සඳහන් කළ ෆෝල්ඩරයක නිර්මාණය කරයි.