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

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

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

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

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

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

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

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(գործողություն1)
    .pipe(գործողություն2)
    .pipe(գործողություն3)
}

Շղթայում pipe-ի վերջին կանչն ավարտվում է dest ֆունկցիայով, որը սահմանում է այն պանակը, որտեղ կուղարկվի կատարված գործողությունների արդյունքը.

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(գործողություն1)
    .pipe(գործողություն2)
    .pipe(գործողություն3)
    .pipe(dest('dist')); // ուղարկել dist պանակ
}

Յուրաքանչյուր գործողություն կատարում է որոշակի մանիպուլյացիա մեր ֆայլի հետ: Օրինակ, կարելի է նախ փոխակերպել LESS-ը CSS-ի, ապա ավելացնել նախածանցներ CSS հատկություններին, ապա մինիմալացնել ստացված CSS-ը և այլն:

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

Մինչև այդ, տաքացման համար, եկեք վերցնենք մեր ֆայլը և ուղարկենք դրա պատճենը dist պանակ, ասես դրա վրա կատարելով որոշ գործողություններ.

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

Ֆայլերի ուղիների զանգված

src ֆունկցիան պարամետրով կարող է ընդունել ոչ թե մեկ ֆայլ, այլ միանգամից մի քանիսը զանգվածի տեսքով.

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}