Gulp හි ගොනු ඒකාබද්ධ කිරීම

CSS කේතය ලියන විට, එය ගොනු කිහිපයකට වෙන් කිරීම පහසුය. කෙසේ වෙතත්, ගොනු තිබේ තරම්, වෙබ් පිටුව පූරණය වීම නැවතී යයි. එබැවින්, කේතය ලියන විට ගොනු කිහිපයක වැඩ කිරීම පහසුය, නමුත් HTML වෙත සම්බන්ධ කිරීමේදී මෙම ගොනු එකකට ඒකාබද්ධ කළ යුතුය.

මේ සඳහා විශේෂ ප්ලගිනයක් වන gulp-concat අපට උපකාරී වේ. අපි එය අපගේ ව්‍යාපෘතියට ස්ථාපනය කරමු: අපගේ ව්‍යාපෘතියට:

npm install gulp-concat --save-dev

ඊට පසු, ස්ථාපනය කරන ලද ප්ලගිනය ආයාත කරමු:

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

අපි එය භාවිතා කරමු CSS ගොනු කිහිපයක් එක ගොනුවකට එකතු කිරීමට:

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

JavaScript ගොනු කිහිපයක් එක ගොනුවකට ඒකාබද්ධ කරන්න.

ඒකාබද්ධ කරන ලද ගොනුව සමඟ මෙහෙයුම්

ඒකාබද්ධ කිරීමෙන් පසු, දාමය දිගේ තවදුරටත් එක් ඒකාබද්ධ කරන ලද ගොනුවක් ගමන් කරනු ඇති අතර එය මත විවිධ මෙහෙයුම් සිදු කළ හැකිය.

උදාහරණයක් ලෙස, CSS අවම කිරීමක් කරමු:

function task(cb) {
	return src('src/*.css')
		.pipe(concat('bundle.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

LESS ගොනු කිහිපයක් එක ගොනුවකට ඒකාබද්ධ කරන්න, ඉන්පසු මෙම ගොනුව CSS බවට පරිවර්තනය කරන්න, ඉන්පසු ලැබෙන CSS හි අවම කිරීම සිදු කරන්න.