ფაილებთან მუშაობა Gulp-ში

Gulp საშუალებას გაძლევს აიღო ფაილების ჯგუფი, შეასრულო რაიმე ოპერაცია ამ ჯგუფზე და შემდეგ შეცვლილი ფაილები მოათავსო ახალ მისამართზე.

ამისთვის განკუთვნილია სპეციალური ფუნქციები src და dest. მოდი დასაწყისისთვის იმპორტი გავაკეთოთ ჩვენი ბიბლიოთეკიდან:

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

src ფუნქცია საშუალებას გაძლევს მიიღო მითითებული ფაილი:

javascriptfunction task(cb) {
  return src('src/styles.css'); // return-ის გამოყენება cb-ის გამოძახების ნაცვლად
}

ამ ფაილთან შემდეგ შესაძლებელია სხვადასხვა ოპერაციების შესრულება ჯაჭვურად pipe ფუნქციის დახმარებით. სქემატურად ეს ასე გამოიყურება:

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'));
}