Gulp-এ ফাইল নিয়ে কাজ

Gulp আপনাকে ফাইলের একটি গ্রুপ নিতে, সেই গ্রুপের উপর কিছু অপারেশন করতে, এবং তারপর পরিবর্তিত ফাইলগুলি একটি নতুন ঠিকানায় রাখতে দেয়।

এর জন্য রয়েছে বিশেষ ফাংশন src এবং dest। আসুন প্রথমে আমাদের লাইব্রেরি থেকে এগুলি ইম্পোর্ট করি:

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

src ফাংশনটি নির্দিষ্ট ফাইল পেতে দেয়:

javascriptfunction task(cb) {
  return src('src/styles.css'); // cb কল করার পরিবর্তে return
}

pipe ফাংশন ব্যবহার করে এই ফাইলের সাথে তারপর বিভিন্ন অপারেশন একটি চেইন হিসাবে 수행 করা যেতে পারে। সhematicভাবে এটি দেখতে এমন:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operation1)
    .pipe(operation2)
    .pipe(operation3)
}

চেইনের শেষ pipe কলটি dest ফাংশন দিয়ে শেষ হয়, যা সম্পাদিত অপারেশনের ফলাফল যে ফোল্ডারে যাবে তা নির্ধারণ করে:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(operation1)
    .pipe(operation2)
    .pipe(operation3)
    .pipe(dest('dist')); // dist ফোল্ডারে পাঠানো হবে
}

প্রতিটি অপারেশন আমাদের ফাইলের সাথে কিছু ম্যানিপুলেশন করে। উদাহরণস্বরূপ, আপনি প্রথমে LESS কে CSS-এ রূপান্তর করতে পারেন, তারপর CSS বৈশিষ্ট্যগুলিতে প্রিফিক্স যোগ করতে পারেন, তারপর ফলাফল CSS মিনিফাই করতে পারেন ইত্যাদি।

প্রতিটি অপারেশনের জন্য Gulp-এর একটি আলাদা npm প্লাগিন রয়েছে। প্লাগিনগুলি ইনস্টল করতে হবে এবং আমাদের ফাইলে সংযুক্ত করতে হবে। বিভিন্ন প্লাগিন অধ্যয়ন আমরা পরবর্তী পাঠে করব।

এখন ওয়ার্মআপের জন্য আসুন আমাদের ফাইলটি নিই এবং এটির একটি কপি 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'));
}