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

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

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

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

terminalnpm install del --save-dev

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

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

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

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

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

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

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

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

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

javascriptexports.default = series(taskDel, taskCss);

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

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

exports.default = series(taskDel, taskCss);
Задание 1

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

Задание 2

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