Պանակի մաքրում Gulp-ում պահպանելուց առաջ

Դուք արդեն հավանաբար ուշադրություն եք դարձրել, որ ֆայլերը պանակում պահպանելիս, Gulp-ը նախորդ ֆայլերը դրանից չի հեռացնում:

Որպեսզի դա տեղի ունենա, անհրաժեշտ է տեղադրել հատուկ պլագին del:

Եկեք տեղադրենք այն՝ կատարելով հետևյալ հրամանը.

npm install del --save-dev

Այս պլագինը տարբերվում է մեր կողմից նախկինում օգտագործվածներից նրանով, որ այն օգտագործվում է pipe մեթոդների շղթայից դուրս: Ուստի այս դեպքում մենք պետք է ստեղծենք առաջադրանքների խումբ. առաջին առաջադրանքը կլինի պանակի մաքրումը, իսկ երկրորդը՝ օգտակար աշխատանք կատարելը:

Օրինակի համար որպես օգտակար աշխատանք ընտրենք CSS-ի մինիմալացումը:

Եկեք միացնենք բոլոր անհրաժեշտները.

let {src, dest, series} = require('gulp');
let cleanCSS = require('gulp-clean-css');
let del = require('del');

Ստեղծենք dist պանակի մաքրման առաջադրանք.

function taskDel(cb) {
	return del('dist/*');
}

Ստեղծենք CSS-ի մինիմալացման առաջադրանք.

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

Կատարենք առաջադրանքների սերիան.

exports.default = series(taskDel, taskCss);

Եկեք հավաքենք ամենը միասին և ստացենք հետևյալ կոդը.

function taskDel(cb) {
	return del('dist/*');
}
function taskCss(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

exports.default = series(taskDel, taskCss);

Ստեղծեք առաջադրանք JavaScript-ի մինիմալացման համար: Մաքրեք պանակը յուրաքանչյուր առաջադրանքի գործարկումից առաջ:

Ստեղծեք երեք առաջադրանքներից բաղկացած խումբ. պանակի մաքրման առաջադրանք, CSS-ի մինիմալացման առաջադրանք և JavaScript-ի մինիմալացման առաջադրանք: Որոշեք, թե որ առաջադրանքները պետք է կատարվեն հաջորդաբար, իսկ որոնք՝ զուգահեռաբար: