নতুনদের জন্য অতি সহজ গুলপ টিউটোরিয়াল

আজকাল, একটি বিল্ড টুল ব্যবহার করা আপনার ওয়েব ডেভেলপমেন্ট কর্মপ্রবাহের একটি অপরিহার্য অংশ৷

Gulp আজকাল সবচেয়ে জনপ্রিয় বিল্ড টুলগুলির মধ্যে একটি (ওয়েবপ্যাকের সাথে)।

কিন্তু গুলপ শেখার জন্য একটি নির্দিষ্ট শেখার বক্রতা আছে।

সবচেয়ে বড় বাধাগুলির মধ্যে একটি হল আপাতদৃষ্টিতে শত শত বিভিন্ন অংশ খুঁজে বের করা যা এতে যায়।

এবং সর্বোপরি, আপনাকে কমান্ড লাইনে সবকিছু করতে হবে, যা আপনি এটির সাথে বেশি কাজ না করলে অবিশ্বাস্যভাবে ভীতিজনক হতে পারে।

এই টিউটোরিয়ালটি আপনাকে npm (নোড প্যাকেজ ম্যানেজার) এর প্রাথমিক বিষয়গুলি এবং আপনার সামনের দিকের প্রকল্পগুলির জন্য Gulp সেট আপ করবে৷

একবার আপনি হয়ে গেলে, আপনি আপনার ওয়ার্কফ্লো সেট আপ করতে এবং কমান্ড লাইন ব্যবহার করে আরও বেশি আত্মবিশ্বাসী বোধ করবেন!

তাহলে গুলপের সাথে বড় ব্যাপার কি?

গুলপ একটি বিশাল সময় সাশ্রয়কারী। Gulp ব্যবহার করে, আপনি আপনার কম্পিউটারকে ক্লান্তিকর কাজগুলি পরিচালনা করতে দিতে পারেন, যেমন:

• সিএসএস-এ Sass ফাইল কম্পাইল করা,
• একাধিক জাভাস্ক্রিপ্ট ফাইল একত্রিত করা (একত্রিত করা),
• আপনার CSS এবং JS ফাইলগুলিকে ছোট করা (কম্প্রেস করা),
• এবং একটি ফাইল পরিবর্তন শনাক্ত হলে উপরের কাজগুলি স্বয়ংক্রিয়ভাবে চালানো হয়।

গুলপ আমি উপরে উল্লিখিত কাজগুলির চেয়ে অনেক বেশি জটিল কাজ করতে পারে। যাইহোক এই টিউটোরিয়ালটি শুধুমাত্র Gulp এর মূল বিষয় এবং এটি কিভাবে কাজ করে তার উপর ফোকাস করা হবে।

আমরা কী করব তার দ্রুত রূপরেখা

এই টিউটোরিয়ালটি যে ধাপগুলির মধ্য দিয়ে যাচ্ছে তা এখানে রয়েছে:

1. আপনার কম্পিউটারে Node.js এবং npm ইনস্টল করুন।
2. Gulp এবং আপনার প্রকল্পের জন্য প্রয়োজনীয় অন্যান্য প্যাকেজ ইনস্টল করুন।
3. আপনার পছন্দের কাজগুলি চালানোর জন্য আপনার gulpfile.js ফাইলটি কনফিগার করুন।
4. আপনার কম্পিউটারকে আপনার জন্য আপনার কাজ করতে দিন! 🙂

আপনি উপরের সমস্ত শর্তাবলী সম্পূর্ণরূপে বুঝতে না পারলে চিন্তা করবেন না। আমি এক ধাপে সবকিছু ব্যাখ্যা করব।

এখন শুরু করা যাক!

আপনার পরিবেশ সেট আপ করুন

Node.js

আপনার কম্পিউটারে গুলপ আপ এবং রান করার জন্য, আপনাকে আপনার স্থানীয় পরিবেশে Node.js ইনস্টল করতে হবে।

Node.js একটি "জাভাস্ক্রিপ্ট রানটাইম" হিসাবে স্ব-বর্ণিত, যা ব্যাক-এন্ড জাভাস্ক্রিপ্ট হিসাবে বিবেচিত হয়। গুলপ নোড ব্যবহার করে চলে, তাই শুরু করার আগে আপনাকে অবশ্যই নোড ইনস্টল করতে হবে৷

আপনি Node.js ওয়েবসাইট থেকে এটি ডাউনলোড করতে পারেন। আপনি যখন নোড ইনস্টল করেন, তখন এটি আপনার কম্পিউটারে npmও ইনস্টল করে।

এনপিএম কি, আপনি জিজ্ঞাসা করেন?

Npm (নোড প্যাকেজ ম্যানেজার)

Npm হল জাভাস্ক্রিপ্ট প্লাগইনগুলির একটি ক্রমাগত আপডেট করা সংগ্রহ (যাকে প্যাকেজ বলা হয়), যা সারা বিশ্বের ডেভেলপারদের দ্বারা লেখা। Gulp সেই প্লাগইনগুলির মধ্যে একটি। (এছাড়াও আপনার আরও কিছু প্রয়োজন হবে, যা আমরা পরে জানাব।)

npm এর সৌন্দর্য হল এটি আপনাকে সরাসরি আপনার কমান্ড লাইনে প্যাকেজ ইনস্টল করতে দেয়। এটি দুর্দান্ত কারণ আপনাকে ম্যানুয়ালি ওয়েবসাইটে যেতে হবে না, ফাইলটি ডাউনলোড করতে হবে এবং ইনস্টল করতে হবে।

এখানে একটি প্যাকেজ ইনস্টল করার জন্য মৌলিক সিনট্যাক্স রয়েছে:

npm install [Package Name]

বেশ সোজা মনে হচ্ছে, তাই না?

নোড_মডিউল ফোল্ডার

একটি বিষয় লক্ষ্য করুন, আপনি যখন একটি npm প্যাকেজ ইনস্টল করেন, npm node_modules নামে একটি ফোল্ডার তৈরি করে এবং সেখানে সমস্ত প্যাকেজ ফাইল সংরক্ষণ করে৷

আপনি যদি কখনও একটি node_modules ফোল্ডার সহ একটি প্রকল্প পেয়ে থাকেন এবং এতে কী রয়েছে তা দেখার সাহস করেন, আপনি সম্ভবত দেখেছেন যে এতে প্রচুর (এবং আমি বলতে চাচ্ছি) নেস্টেড ফোল্ডার এবং ফাইল রয়েছে৷

কেন এমন হয়?

ঠিক আছে, এর কারণ হল npm প্যাকেজগুলি তাদের নির্দিষ্ট ফাংশন চালানোর জন্য অন্যান্য npm প্যাকেজের উপর নির্ভর করে। এই অন্যান্য প্যাকেজগুলি নির্ভরতা হিসাবে পরিচিত।

আপনি যদি একটি প্লাগইন লিখছেন, তাহলে বিদ্যমান প্যাকেজগুলির কার্যকারিতাগুলির সুবিধা গ্রহণ করা বোধগম্য। কেউ প্রতিবার চাকাটি পুনরায় উদ্ভাবন করতে চায় না।

সুতরাং আপনি যখন আপনার node_modules ফোল্ডারে একটি প্লাগইন ইনস্টল করবেন, তখন সেই প্লাগইনটি অতিরিক্ত প্যাকেজ ইনস্টল করবে যা *এর* প্রয়োজন তার নিজস্ব node_modules ফোল্ডারে।

এবং আরও অনেক কিছু যতক্ষণ না আপনি ওয়াজু থেকে ফোল্ডারগুলি নেস্ট করেছেন৷

এই মুহুর্তে নোড_মডিউল ফোল্ডারে গোলমাল করার বিষয়ে আপনাকে খুব বেশি চিন্তা করতে হবে না- সেই পাগল ফোল্ডারে কী ঘটছে তা সংক্ষেপে ব্যাখ্যা করতে চেয়েছিলাম 🙂

package.json এর মাধ্যমে প্যাকেজ ট্র্যাক রাখা

npm-এর আরেকটি দুর্দান্ত বৈশিষ্ট্য হল এটি মনে রাখতে পারে যে আপনি আপনার প্রকল্পের জন্য কোন নির্দিষ্ট প্যাকেজ ইনস্টল করেছেন।

এটি গুরুত্বপূর্ণ যদি কোনো কারণে আপনাকে সবকিছু পুনরায় ইনস্টল করতে হয়।

এছাড়াও এটি অন্যান্য বিকাশকারীদের জীবনকে সহজ করে তোলে, কারণ তারা তাদের কম্পিউটারে আপনার প্রকল্পের জন্য সমস্ত প্যাকেজ দ্রুত এবং সহজে ইনস্টল করতে পারে৷

এটি কিভাবে এটি পরিচালনা করে?

Npm কোন প্যাকেজ এবং কোন প্যাকেজ সংস্করণ আপনি ইনস্টল করেছেন তা ট্র্যাক রাখতে package.json নামে একটি ফাইল ব্যবহার করে। এটি প্রকল্পের নাম, লেখক এবং গিট সংগ্রহস্থলের মতো অন্যান্য তথ্যও সঞ্চয় করে।

আপনার package.json তৈরি করা হচ্ছে

এই ফাইলটি আরম্ভ করার জন্য, আপনি আবার কমান্ড লাইন ব্যবহার করতে পারেন।

প্রথমে, আপনার প্রোজেক্ট ফোল্ডারে নেভিগেট করুন, আপনার কম্পিউটারে এটি যেখানেই থাকুক না কেন।

তারপর নিম্নলিখিত কমান্ডটি টাইপ করুন:npm init

Npm তারপর আপনাকে প্রকল্প সম্পর্কে তথ্য লিখতে অনুরোধ করবে। বেশিরভাগ বিকল্পের জন্য আপনি এন্টার টিপুন এবং বন্ধনীতে থাকা ডিফল্ট মানটি ব্যবহার করতে পারেন।

আপনার কাজ শেষ হলে, npm আপনার প্রোজেক্ট ফোল্ডারে package.json ফাইল তৈরি করবে! আপনি যদি এটি আপনার সম্পাদকে খোলেন, তাহলে আপনার এরকম কিছু দেখতে হবে:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

স্পষ্টতই আপনার প্রকল্পের জন্য আমার এখানে যা আছে তার পরিবর্তে আপনার নিজের নাম এবং তথ্য থাকবে।

এই মুহুর্তে আমি সমস্ত ক্ষেত্র সঠিক হওয়ার বিষয়ে চিন্তা করব না। এই তথ্যমূলক অংশটি মূলত প্যাকেজগুলির জন্য ব্যবহৃত হয় যা npm-এ পাবলিক প্লাগইন হিসাবে প্রকাশিত হয়৷

এখন, আপনি আপনার package.json ফাইলে যা *করবেন* তা হল গুলপ চালানোর জন্য আপনার প্রয়োজনীয় সমস্ত প্যাকেজের তালিকা।

চলুন দেখা যাক কিভাবে আপনি এগুলিকে যুক্ত করতে পারেন:

প্যাকেজ ইনস্টল করা হচ্ছে

উপরের পূর্ববর্তী বিভাগে, আমরা npm install [Package Name] টাইপ করার বিষয়ে কথা বলেছি।

আপনার কমান্ড লাইনে, আপনার node_modules ফোল্ডারে প্যাকেজটি ডাউনলোড এবং ইনস্টল করতে।

এটি প্যাকেজটি ইনস্টল করবে এবং স্বয়ংক্রিয়ভাবে এটিকে আপনার package.json ফাইলে একটি নির্ভরতা হিসাবে সংরক্ষণ করবে।

তাই আমরা যদি আমাদের প্যাকেজগুলিতে Gulp ইনস্টল করতে চাই, তাহলে আমরা টাইপ করব:npm install gulp

আপনার কম্পিউটারে Gulp সম্পর্কিত সবকিছু ইনস্টল করতে এক বা দুই মিনিট সময় লাগতে পারে। আপনি সম্ভবত কিছু সতর্কতা বার্তা দেখতে পাবেন, কিন্তু ইনস্টল ব্যর্থ না হওয়া পর্যন্ত আমি সেগুলি নিয়ে চিন্তা করব না৷

এখন, আপনি যদি আপনার package.json ফাইলটি খোলেন, তাহলে আপনি নীচে দেখতে পাবেন যে Gulp একটি নির্ভরতা হিসাবে যোগ করা হয়েছে:

"dependencies": {
  "gulp": "^3.9.1"
}

আপনি অতিরিক্ত npm প্যাকেজ ইনস্টল করার সাথে সাথে নির্ভরতার এই তালিকাটি বৃদ্ধি পাবে।

গুলপের জন্য অন্যান্য প্যাকেজ প্রয়োজন

প্রাথমিকভাবে আমরা আপনার SCSS/CSS এবং JS ফাইলগুলি কম্পাইল করার মতো কাজগুলি চালানোর জন্য Gulp ব্যবহার করতে চেয়েছিলাম। এটি সম্পন্ন করতে, আমরা নিম্নলিখিত প্যাকেজগুলি ব্যবহার করব:

• gulp-sass — CSS-এ আপনার Sass ফাইল কম্পাইল করে
• gulp-cssnano — আপনার CSS ফাইলগুলিকে ছোট করে
• gulp-concat — একাধিক JS ফাইলকে একটি বড় ফাইলে সংযুক্ত করে (একত্রিত করে)
• gulp-uglify — আপনার JS ফাইলগুলিকে ছোট করে

আগের মতই, এই লাইনগুলো একে একে টাইপ করে প্রতিটি প্যাকেজ ইনস্টল করুন। পরবর্তী লাইনে যাওয়ার আগে প্রতিটি ইনস্টল করার সময় আপনাকে কয়েক সেকেন্ড অপেক্ষা করতে হবে।

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Gulp-cli বনাম গ্লোবাল Gulp

অতীতে, আপনার কমান্ড লাইন থেকে "gulp" চালাতে সক্ষম হতে, আপনাকে "npm install –global gulp" কমান্ডটি ব্যবহার করে আপনার স্থানীয় কম্পিউটারে বিশ্বব্যাপী Gulp ইনস্টল করতে হবে।

তবে Gulp-এর একটি একক বিশ্বব্যাপী সংস্করণ থাকলে সমস্যা হতে পারে যদি আপনার একাধিক প্রকল্প থাকে যার জন্য Gulp-এর বিভিন্ন সংস্করণের প্রয়োজন হয়।

বর্তমান সম্মতি বিশ্বব্যাপী Gulp-এর পরিবর্তে একটি ভিন্ন প্যাকেজ, Gulp-cli ইনস্টল করার সুপারিশ করে।

এটি আপনাকে এখনও "gulp" কমান্ড চালানোর অনুমতি দেবে, কিন্তু আপনি আপনার বিভিন্ন প্রকল্প জুড়ে Gulp-এর বিভিন্ন সংস্করণ ব্যবহার করতে পারবেন।

এটির জন্য কোড এখানে:

npm install --global gulp-cli

আপনি যদি আগ্রহী হন তবে আপনি এই ট্রিহাউস থ্রেডে আরও প্রসঙ্গ পড়তে পারেন।

ঠিক আছে, একবার আপনার সমস্ত প্যাকেজ ইনস্টল হয়ে গেলে, আপনার প্রয়োজনীয় সমস্ত সরঞ্জাম রয়েছে৷ আমাদের প্রকল্প ফাইল সেট আপ করতে চলুন!

আপনার ফাইল কাঠামো সেট আপ করুন

আমরা ফাইল এবং ফোল্ডার তৈরি করা শুরু করার আগে, শুধু জেনে রাখুন যে আপনার ফাইলের কাঠামো সেট আপ করার বিভিন্ন উপায় রয়েছে। আপনি যে পদ্ধতিটি ব্যবহার করবেন তা মৌলিক প্রকল্পগুলির জন্য ভাল, তবে "সঠিক" সেটআপ আপনার বিশেষ প্রয়োজনগুলির উপর অনেক কিছু নির্ভর করবে৷

এই মৌলিক পদ্ধতিটি আপনাকে সমস্ত চলমান অংশগুলির মৌলিক কার্যকারিতা বুঝতে সাহায্য করবে। তারপর আপনি ভবিষ্যতে আপনার নিজের পছন্দ অনুযায়ী সেটআপ তৈরি করতে বা পরিবর্তন করতে পারেন!

প্রজেক্ট ট্রি দেখতে কেমন হবে তা এখানে:

• রুট প্রজেক্ট ফোল্ডার
  • index.html
  • gulpfile.js
  • package.json
  • নোড_মডিউল (ফোল্ডার)
  • অ্যাপ (ফোল্ডার)
  • script.js
  • style.scss
  • dist (ফোল্ডার)

আমরা ইতিমধ্যে package.json ফাইল এবং node_modules ফোল্ডারে গিয়েছি। এবং index.html ফাইলটি অবশ্যই আপনার প্রধান ওয়েবসাইট ফাইল হবে।

gulpfile.js ফাইলটি হল যেখানে আমরা এই নিবন্ধের শুরুতে যে সমস্ত কাজগুলির কথা বলেছি সেগুলি চালানোর জন্য আমরা Gulp-কে কনফিগার করব। আমরা কিছুক্ষণের মধ্যে এটিতে প্রবেশ করব।

কিন্তু এই মুহূর্তে আমি দুটি ফোল্ডার, অ্যাপ এবং ডিস্ট উল্লেখ করতে চাই, কারণ এগুলো গুলপ ওয়ার্কফ্লো-এর জন্য গুরুত্বপূর্ণ।

অ্যাপ এবং ডিস্ট ফোল্ডারগুলি৷

অ্যাপ ফোল্ডারে আমাদের কাছে আপনার মৌলিক জাভাস্ক্রিপ্ট ফাইল (script.js) এবং আপনার মৌলিক SCSS ফাইল (style.scss) আছে। সেই ফাইলগুলি যেখানে আপনি আপনার সমস্ত JS এবং CSS কোড লিখবেন৷

ডিস্ট ফোল্ডারটি শুধুমাত্র চূড়ান্ত কম্পাইল করা JS এবং CSS ফাইলগুলিকে গুলপ প্রক্রিয়া করার পরে সংরক্ষণ করার জন্য বিদ্যমান। আপনার ডিস্ট ফাইলগুলিতে কোনও পরিবর্তন করা উচিত নয়, শুধুমাত্র অ্যাপ ফাইলগুলিতে। কিন্তু dist-এ এই ফাইলগুলিকে index.html-এ লোড করা হবে, যেহেতু আমরা ওয়েবসাইটে কম্পাইল করা ফাইলগুলি ব্যবহার করতে চাই৷

আবার, আপনি আপনার প্রকল্প ফাইল এবং ফোল্ডার সেট আপ করতে পারেন অনেক উপায় আছে. মনে রাখা প্রধান গুরুত্বপূর্ণ বিষয় হল যে আপনার গঠনটি বোধগম্য এবং আপনাকে সবচেয়ে দক্ষতার সাথে কাজ করতে দেয়৷

এখন এই টিউটোরিয়ালের মাংসে যাওয়া যাক, Gulp কনফিগার করা!

আপনার Gulpfile তৈরি করুন এবং কনফিগার করুন

Gulpfile ইনস্টল করা প্যাকেজ লোড করার এবং বিভিন্ন ফাংশন চালানোর কোড ধারণ করে। কোড দুটি মৌলিক ফাংশন সঞ্চালন করে:

1. নোড মডিউল হিসাবে আপনার ইনস্টল করা প্যাকেজগুলি শুরু করুন৷
2. গল্প টাস্ক তৈরি করুন এবং চালান।

প্যাকেজ শুরু করুন

আপনার প্রোজেক্টে যোগ করা এনপিএম প্যাকেজগুলির সমস্ত বৈশিষ্ট্যের সুবিধা নেওয়ার জন্য, আপনাকে সেগুলিকে নোডে মডিউল হিসাবে রপ্তানি করতে হবে। (অতএব ফোল্ডারের নাম "node_modules")

আপনার Gulpfile শীর্ষে, এই মত মডিউল যোগ করুন:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

এখন প্যাকেজ যোগ করা হয়েছে, আপনি তারপর আপনার Gulpfile স্ক্রিপ্টে তাদের ফাংশন এবং বস্তু ব্যবহার করতে পারেন। এছাড়াও আপনি কিছু বিল্ট-ইন ফাংশন ব্যবহার করবেন যা Node.js এর অংশ।

আপনার গুলপ টাস্ক তৈরি করুন

নিম্নলিখিত কোড ব্যবহার করে একটি Gulp টাস্ক তৈরি করা হয়:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

এটি আপনাকে gulp [Function Name] টাইপ করে Gulp টাস্ক চালানোর অনুমতি দেয় কমান্ড লাইনে। এটি গুরুত্বপূর্ণ কারণ আপনি তারপরে অন্যান্য Gulp টাস্ক থেকে সেই নামের ফাংশনটি চালাতে পারেন।

বিশেষ করে, আমরা বেশ কিছু ভিন্ন ভিন্ন Gulp টাস্ক তৈরি করছি, যেগুলো *সব* চালানো হবে যখন আপনি ডিফল্ট Gulp টাস্ক চালাবেন।

কিছু প্রধান ফাংশন যা আমরা ব্যবহার করব তা হল:

• .task() — উপরে উল্লিখিত হিসাবে একটি টাস্ক তৈরি করে
• .src() — আপনি একটি নির্দিষ্ট কাজে কোন ফাইল কম্পাইল করবেন তা সনাক্ত করে
• .pipe() — নোড স্ট্রীমে একটি ফাংশন যোগ করে যা Gulp ব্যবহার করছে; আপনি একই টাস্কে একাধিক ফাংশন পাইপ করতে পারেন (florian.ec এ এই বিষয়ে একটি চমৎকার লেখা পড়ুন)
• .dest() — ফলস্বরূপ ফাইলটিকে একটি নির্দিষ্ট স্থানে লেখে
• .ওয়াচ() — কোনো পরিবর্তন শনাক্ত করার জন্য ফাইলগুলি সনাক্ত করে

আপনি যদি কৌতূহলী হন, আপনি এখানে Gulp ডকুমেন্টেশন সম্পর্কে আরও পড়তে পারেন।

সব সেট? এখন ব্যবসায় নেমে পড়ি (কিউ মুলান মিউজিক) এবং সেই কাজগুলো লিখি!

এইগুলি হল নিম্নলিখিত কাজগুলি যা আমরা Gulp চালাতে চাই:

• একটি CSS ফাইলে SCSS কম্পাইল এবং ছোট করার জন্য Sass টাস্ক
• জেএস ফাইলগুলিকে সংযুক্ত করার জন্য এবং ছোট/কুশ্রী করার জন্য JS টাস্ক
• এসসিএসএস বা জেএস ফাইলগুলি কখন পরিবর্তন করা হয় তা সনাক্ত করতে টাস্ক দেখুন এবং কাজগুলি পুনরায় চালান
• আপনি যখন gulp টাইপ করেন তখন সমস্ত প্রয়োজনীয় কাজ চালানোর জন্য ডিফল্ট টাস্ক কমান্ড লাইনে

সাস টাস্ক

Sass টাস্কের জন্য, প্রথমে আমরা টাস্ক() ব্যবহার করে Gulp-এ টাস্ক তৈরি করতে চাই, এবং আমরা এর নাম রাখব "sass।"

তারপরে আমরা প্রতিটি উপাদানে যোগ করি যে টাস্কটি চলবে। প্রথমে আমরা নির্ধারণ করব যে উৎসটি হবে app/scss/style.scss ফাইল, src() ব্যবহার করে। তারপর আমরা অতিরিক্ত ফাংশন পাইপ করব।

প্রথমটি sass() ফাংশন চালায় (gulp-sass মডিউল ব্যবহার করে যাকে আমরা Gulpfile-এর শীর্ষে "sass" বলেছি)। এটি স্বয়ংক্রিয়ভাবে CSS ফাইলটিকে SCSS ফাইলের মতো একই নামে সংরক্ষণ করবে, তাই আমাদের নাম হবে style.css।

দ্বিতীয়টি cssnano() দিয়ে CSS ফাইলটিকে ছোট করে। এবং শেষটি ফলাফলের CSS ফাইলটিকে dist/css ফোল্ডারে রাখে।

এখানে সেগুলির জন্য কোড রয়েছে:

gulp.task('sass', function(){
   return gulp.src('app/style.scss')
      .pipe(sass())
      .pipe(cssnano())
      .pipe(gulp.dest('dist/css'));
});

পরীক্ষা করার জন্য, আমি style.scss ফাইলে কিছু ফিলার SCSS রেখেছি:

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

আপনি gulp টাইপ করলে কমান্ড লাইনে প্রতিটি পৃথক Gulp টাস্ক চালাতে পারেন এবং টাস্কের নাম। তাই Sass টাস্ক পরীক্ষা করার জন্য, আমি gulp sass টাইপ করেছি এটি ত্রুটি ছাড়া কাজ করে কিনা তা পরীক্ষা করতে এবং মিনিফাইড dist/style.css ফাইল তৈরি করে।

যদি সবকিছু সঠিকভাবে কাজ করে, তাহলে আপনার কমান্ড লাইনে এই ধরনের মেসেজিং দেখতে হবে:

[15:04:53] Starting 'sass'...
[15:04:53] Finished 'sass' after 121 ms

ডিস্ট ফোল্ডারে চেক করা দেখায় যে আসলেই একটি style.css ফাইল আছে, এবং এটি খুললে সঠিকভাবে-মিনিফাইড CSS দেখায়:

div{display:block}div.content{position:relative}.red{color:red}

ঠিক আছে, আমাদের সাস টাস্ক এখন সম্পন্ন হয়েছে। জাভাস্ক্রিপ্টে!

JS টাস্ক

জাভাস্ক্রিপ্ট গাল্প টাস্কটি সাস টাস্কের অনুরূপ, তবে কয়েকটি ভিন্ন উপাদান রয়েছে।

প্রথমে আমরা টাস্কটি তৈরি করব এবং এটিকে "js" বলব, তারপর আমরা উত্স ফাইলগুলি সনাক্ত করব। src() ফাংশনে, আপনি একাধিক ফাইলকে কয়েকটি ভিন্ন উপায়ে শনাক্ত করতে পারেন।

একটি হল ওয়াইল্ডকার্ড (*) ব্যবহার করে Gulp কে এইভাবে *.js এক্সটেনশন সহ সমস্ত ফাইল ব্যবহার করতে বলা:

gulp.src('app/*.js')

যাইহোক এটি বর্ণানুক্রমিক ক্রমে ফাইলগুলিকে কম্পাইল করবে, যা সম্ভাব্যভাবে ত্রুটির কারণ হতে পারে যদি আপনি স্ক্রিপ্টগুলি লোড করা শেষ করেন যেগুলি অন্যান্য স্ক্রিপ্ট ফাইলগুলির আগে অন্যান্য স্ক্রিপ্টের উপর নির্ভরশীল৷

আপনার যদি অনেকগুলি স্ক্রিপ্ট ফাইল না থাকে তবে আপনি প্রতিটি JS ফাইলকে ম্যানুয়ালি মনোনীত করে অর্ডারটি নিয়ন্ত্রণ করতে পারেন। src() ফাংশনটি প্যারামিটার হিসাবে মানগুলির একটি অ্যারে নিতে পারে, এইরকম বর্গাকার বন্ধনী ব্যবহার করে:

gulp.src(['app/script.js', 'app/script2.js'])

যদি আপনার কাছে অনেকগুলি JS ফাইল থাকে, তাহলে আপনি নিশ্চিত করতে পারেন যে আপনি নির্ভরতাগুলি প্রথমে একটি পৃথক সাবফোল্ডারে রেখে লোড করতে পারেন, যেমন "অ্যাপ/জেএস/প্লাগইন" বলুন। তারপর অন্যান্য JS ফাইলগুলিকে প্যারেন্ট “app/js” ফোল্ডারে রাখুন।

তারপর আপনি ওয়াইল্ডকার্ড স্বরলিপি ব্যবহার করে সমস্ত lib (লাইব্রেরি) স্ক্রিপ্টগুলি লোড করতে পারেন, তারপরে নিয়মিত স্ক্রিপ্টগুলি অনুসরণ করতে পারেন:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

আপনার কাছে থাকা JS ফাইলের সংখ্যা এবং প্রকারের উপর নির্ভর করে আপনার পদ্ধতি পরিবর্তিত হবে।

একবার আপনি আপনার সোর্স ফাইলগুলি সেট করলে, আপনি অবশিষ্ট ফাংশনে পাইপ করবেন। প্রথমটি হল ফাইলগুলিকে একটি বড় JS ফাইলে সংযুক্ত করা। concat() ফাংশনের জন্য ফলাফল ফাইলের নামের সাথে একটি প্যারামিটার প্রয়োজন।

তারপর আপনি JS ফাইলটিকে কুৎসিত করবেন এবং গন্তব্য স্থানে সংরক্ষণ করবেন।

এখানে JavaScript টাস্কের সম্পূর্ণ কোড আছে:

gulp.task('js', function(){
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

Sass টাস্কের মতো, আপনি gulp js টাইপ করে JS টাস্ক কাজ করে তা পরীক্ষা করতে পারেন কমান্ড লাইনে।

[14:38:31] Starting 'js'...
[14:38:31] Finished 'js' after 36 ms

এখন যেহেতু আমরা আমাদের প্রধান দুটি কর্মী গুল্প টাস্ক শেষ করেছি, আমরা ওয়াচ টাস্কে যেতে পারি।

ওয়াচ টাস্ক

কোন পরিবর্তনের জন্য আপনি যে ফাইলগুলিকে বলবেন তা ওয়াচ টাস্কটি দেখবে। একবার এটি একটি পরিবর্তন শনাক্ত করলে, এটি আপনার মনোনীত কাজগুলি চালাবে এবং তারপরে পরিবর্তনগুলির জন্য দেখা চালিয়ে যাবে৷

আমরা দুটি ঘড়ির ফাংশন তৈরি করব, একটি SCSS ফাইল দেখার জন্য এবং অন্যটি JS ফাইলগুলি দেখার জন্য৷

ঘড়ি() ফাংশন দুটি পরামিতি নেয়:উৎসের অবস্থান, এবং তারপরে কোনো পরিবর্তন শনাক্ত হলে চালানোর কাজ।

Sass Watch ফাংশন অ্যাপ ফোল্ডারে যেকোন SCSS ফাইল দেখবে এবং তারপর পরিবর্তন শনাক্ত করলে Sass টাস্ক চালাবে।

ফাংশনটি এরকম দেখাবে:

gulp.watch('app/*.scss', ['sass']);

জাভাস্ক্রিপ্ট ওয়াচ ফাংশনের জন্য, আমাদের "গ্লোবিং" নামে একটি সত্যিই দরকারী নোড বৈশিষ্ট্যের সুবিধা নিতে হবে। গ্লোবিং বলতে ফোল্ডার এবং সাবফোল্ডারগুলির জন্য এক ধরণের ওয়াইল্ডকার্ড হিসাবে "**" চিহ্নগুলি ব্যবহার করা বোঝায়। আমাদের এটি JS ফাইলগুলির জন্য প্রয়োজন কারণ আমাদের অ্যাপ/js ফোল্ডারে একটি JS ফাইল এবং অ্যাপ/js/plugins ফোল্ডারে একটি JS ফাইল রয়েছে।

এবং এখানে সেই ফাংশনটি দেখতে কেমন হবে:

gulp.watch('app/js/**/*.js', ['js']);

গ্লোব ("**") যেভাবে কাজ করে তা হল এটি অ্যাপ/জেএস ফোল্ডারের যে কোনও জায়গায় জেএস ফাইলগুলি সন্ধান করবে। এটি সরাসরি ফোল্ডারে বা প্লাগইন ফোল্ডারের মতো পরবর্তী যেকোনো চাইল্ড ফোল্ডারে দেখাবে। গ্লোবিং কাজে আসে যাতে আপনাকে প্রতিটি সাবফোল্ডারকে ওয়াচ() ফাংশনে আলাদা উৎস হিসেবে মনোনীত করতে না হয়।

এখানে সম্পূর্ণ ওয়াচ টাস্ক:

gulp.task('watch', function(){
gulp.watch('app/*.scss', ['sass']);
gulp.watch('app/js/**/*.js', ['js']);
});

এখন আমরা প্রায় সম্পন্ন! তৈরি করা শেষ টাস্ক হল ডিফল্ট Gulp টাস্ক।

ডিফল্ট Gulp টাস্ক

ডিফল্ট Gulp টাস্ক হল আপনি যখন gulp টাইপ করতে চান কমান্ড লাইনে। আপনি যখন টাস্ক তৈরি করেন, তখন আপনাকে এটিকে "ডিফল্ট" বলতে হবে যাতে Gulp চিনতে পারে যে আপনি এটি চালাতে চান।

আমরা যা করতে চাই তা হল Sass এবং JS টাস্কগুলি একবার চালান, তারপর ফাইলগুলি পরিবর্তন করা হলে কাজগুলি পুনরায় চালানোর জন্য ওয়াচ টাস্কটি চালান৷

gulp.task('default', ['sass', 'js', 'watch']);

আপনি আপনার বিল্ডগুলি চালানোর জন্য অন্যান্য কাজ তৈরি করতে পারেন, শুধু "ডিফল্ট" নামটি পুনরায় ব্যবহার করবেন না। উদাহরণ স্বরূপ, ধরা যাক আপনি আপনার CSS এবং JS ফাইলগুলিকে ডিফল্টরূপে আনমিনিফাইড রাখতে চান, কিন্তু আপনি উৎপাদনের জন্য সেগুলিকে ছোট করতে চান৷

আপনি আপনার CSS এবং JS ফাইলগুলিকে "minifyCSS" এবং "minifyJS" নামক ছোট করার জন্য আলাদা গুলপ টাস্ক তৈরি করতে পারেন। তারপরে আপনি সেই কাজগুলিকে আপনার ডিফল্ট Gulp টাস্কে যোগ করবেন না, তবে আপনি "prod" নামে একটি নতুন Gulp টাস্ক তৈরি করতে পারেন যাতে ডিফল্ট টাস্কের সবকিছুই রয়েছে এবং আপনার ছোট করার কাজগুলিও রয়েছে৷

আপনার index.html এ রেফারেন্স

একবার আপনি আপনার Gulp প্রক্রিয়াটি কাজ করার পরে, নিশ্চিত করুন যে আপনার index.html ফাইলটি সমস্ত সঠিক CSS এবং JS ফাইলগুলিকে উল্লেখ করে৷

আমি আপনাকে এখানে যে উদাহরণগুলি দিয়েছি তার জন্য, আপনি dist/style.css-এ একটি CSS রেফারেন্স যোগ করতে চাইবেন আপনার :

<link rel="stylesheet" href="dist/style.css">

এবং dist/all.js রেফারেন্সিং একটি স্ক্রিপ্ট ট্যাগ যোগ করুন আপনার :

<script src="dist/all.js"></script>

শেষে

এটা করার জন্য অভিনন্দন! আমি আশা করি আপনি এই মৌলিক গাল্প টিউটোরিয়ালটি সহায়ক বলে মনে করেন৷

যেমনটি আমি শুরুতে উল্লেখ করেছি, এটি npm এবং Gulp এর মৌলিক বিষয়গুলির একটি খুব সহজ টিউটোরিয়াল।

বেশিরভাগ devs তাদের Gulpfile এ অনেক অতিরিক্ত কাজ যোগ করে। আপনি যদি আরও উন্নত বিষয়গুলির উপর অন্য নিবন্ধ দেখতে আগ্রহী হন তবে আমাকে জানান!

অবশেষে, আপনি এখানে আমার GitHub অ্যাকাউন্টের এই টিউটোরিয়াল থেকে সমস্ত কোড দেখতে পারেন।

আপনি যদি এই টিউটোরিয়ালটি উপভোগ করেন তাহলে অনুগ্রহ করে নির্দ্বিধায় শেয়ার করুন, এবং/অথবা আপনার চিন্তার সাথে নীচে একটি মন্তব্য করুন!