শুরুতেইদের জন্য সুপার সিম্পল Gulp টিউটোরিয়াল

এই দিনগুলোতে, একটি বিল্ড টুল ব্যবহার করা আপনার ওয়েব ডেভেলপমেন্ট ওয়ার্কফ্লোর অপরিহার্য অংশ।

Gulp এই দিনগুলোতে সবচেয়ে জনপ্রিয় বিল্ড টুলগুলোর একটি (Webpack-এর পাশাপাশি)।

কিন্তু Gulp শিখতে একটি নিঃসন্দেহ লার্নিং কার্ভ আছে।

সবচেয়ে বড় বাধাগুলোর একটি হলো এর মধ্যে যেনে যেন সেকড়ো আলাদা অংশ আছে সেটি বুঝতে পারা।

এছাড়া, আপনাকে সব কিছু কমান্ড লাইনে করতে হয়, যা খুব ভয়ঙ্কর লাগতে পারে যদি আপনি এর সাথে বেশি কাজ না করে থাকেন।

এই টিউটোরিয়াল আপনাকে npm (Node Package Manager) এবং আপনার ফ্রন্ট-এন্ড প্রজেক্টের জন্য Gulp সেট আপ করার বেসিক্সের মাধ্যমে নিয়ে যাবে।

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

তাহলে Gulp-এ বড় কী?

Gulp একটি বিশাল টাইম সেভার। Gulp ব্যবহার করে, আপনি আপনার কম্পিউটারকে কেড়ে কাজগুলো হ্যান্ডল করতে দিতে পারেন, যেমনঃ

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

Gulp উপরের কথা থেকে অনেক বেশি কমপ্লেক্স টাস্ক করতে পারে। যাইহোক এই টিউটোরিয়াল শুধু Gulp-এর বেসিক্স এবং এটি কীভাবে কাজ করে সেটির ওপর ফোকাস করবে।

আমরা কী কী করব তার কুইক আউटलাইন

এই টিউটোরিয়াল যে ধাপগুলো پوشش করবে সেগুলো:

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

আপনি যদি উপরের শব্দগুলো পুরোপুরি না বুঝতে পারেন তবে চিন্তা করবেন না। আমি সব কিছু একটা একটা করে ব্যাখ্যা করব।

এখন চলুন শুরু করি!

আপনার এনভায়রনমেন্ট সেট আপ করুন

Node.js

আপনার কম্পিউটারে Gulp চালু করার জন্য, আপনাকে আপনার লোকাল এনভায়রনমেন্টে Node.js ইনস্টল করতে হবে।

Node.js নিজেকে "JavaScript runtime" বলে বর্ণনা করে, যা ব্যাক-এন্ড জাভাস্ক্রিপ্ট ধরা হয়। Gulp Node দিয়ে চলে, তাই আপনাকে স্বাভাবিকভাবেই Gulp-এ শুরু করার আগে Node ইনস্টল করতে হবে।

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

Npm কী, আপনি পূছলেন?

Npm (Node Package Manager)

Npm হলো একটি liên tục আপডেট হওয়া জাভাস্ক্রিপ্ট প্লাগইন (প্যাকেজ বলা হয়) কালেকশন, যা বিশ্বব্যাপী ডেভেলপাররা লিখে। Gulp সেগুলোর একটি প্লাগইন। (আপনাকে আরও কয়েকটি দরকার হবে, যা আমরা পরে জানব।)

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

এখানে প্যাকেজ ইনস্টল করার বেসিক সিনট্যাক্স:

npm install [Package Name]

খুব সহজ মনে হচ্ছে, ঠিক না?

node_modules ফোল্ডার

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

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

এটা কেন হয়?

এটি ঘটে কারণ npm প্যাকেজগুলো তাদের নির্দিষ্ট ফাংশন চালানোর জন্য অন্যান্য npm প্যাকেজের ওপর নির্ভর করে। এই অন্যান্য প্যাকেজগুলোক ডিপেনডেন্সি বলা হয়।

আপনি যদি একটি প্লাগইন লিখছেন, তবে এক্সিস্টিং প্যাকেজের ফাংশনালিটি নেওয়া মেনে চলে। কেউ চায় না প্রতিবার হইল পুনরাবिष्कার করা।

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

এভাবেই চলতে থাকে যতক্ষণ না আপনি নেস্টেড ফোল্ডারের ঝাড় পাইতে পারেন।

এই পয়েন্টে আপনাকে node_modules ফোল্ডারে গड़া ফেরাতে চিন্তা করতে হবে না—শুধু সংক্ষেপে ব্যাখ্যা করলাম সেটি সেই ক্রেজি ফোল্ডারে কী হচ্ছে 🙂

package.json দিয়ে প্যাকেজ ট্র্যাক রাখা

npm-এর আরেকটি কুল ফিচার হলো এটি আপনার প্রজেক্টের জন্য আপনি কী কী স্পেসিফিক প্যাকেজ ইনস্টল করেছেন সেটি মনে রাখতে পারে।

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

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

এটা কীভাবে ম্যানেজ করে?

Npm package.json নামে একটি ফাইল ব্যবহার করে যা প্যাকেজ এবং প্যাকেজ ভার্সন ট্র্যাক রাখে যা আপনি ইনস্টল করেছেন। এটি প্রজেক্ট সম্পর্কে অন্যান্য ইনফরমেশনও স্টোর করে, যেমন নাম, লেখক, এবং Git রিপোজিটরি।

আপনার 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 ফাইলে যেটি যোগ করবেন* সেটি হলো Gulp চালানোর জন্য আপনার যা যা প্যাকেজ দরকার সেগুলোর তালিকা।

চলুন দেখি কীভাবে আপনি সেগুলো যোগ করতে পারেন:

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

পূর্বের সেকশনে, আমরা বলেছিলাম npm install [Package Name] আপনার কমান্ড লাইনে টাইপ করতে, প্যাকেজটি আপনার node_modules ফোল্ডারে ডাউনলোড ও ইনস্টল করার জন্য।

এটি প্যাকেজটি ইনস্টল করবে এবং অটোমেটিক্যালি আপনার package.json ফাইলে ডিপেনডেন্সি হিসেবে সেভ করবে।

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

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

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

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

ডিপেনডেন্সির এই লিস্ট বড় হবে জেমনে জেমনে আপনি অতিরিক্ত npm প্যাকেজ ইনস্টল করবেন।

Gulp-এর জন্য অন্যান্য প্যাকেজ

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

• gulp-sass — আপনার Sass ফাইলগুলো CSS-এ কম্পাইল করে
• 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 vs গ্লোবাল Gulp

অতীতে, আপনার কমান্ড লাইনে "gulp" চালাতে পেতে, আপনাকে Gulp গ্লোবালি আপনার লোকাল কম্পিউটারে ইনস্টল করতে হতো, "npm install --global gulp" কমান্ড ব্যবহার করে।

তবে একটি সিঙ্গেল গ্লোবাল ভার্সন Gulp সমস্যা সৃষ্টি করতে পারে যদি আপনার একাধিক প্রজেক্ট থাকে যেগুলো Gulp-এর ভিন্ন ভার্সন চায়।

বর্তমান কনসেন্সাস রিকমেন্ড করে Gulp-র পরিবর্তে Gulp-cli নামে একটি আলাদা প্যাকেজ গ্লোবালি ইনস্টল করা।

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

এখানে সেটির কোড:

npm install --global gulp-cli

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

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

আপনার ফাইল স্ট্রাকচার সেট আপ করুন

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

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

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

• রুট প্রজেক্ট ফোল্ডার
  • index.html
  • gulpfile.js
  • package.json
  • node_modules (ফোল্ডার)
  • app (ফোল্ডার)
    • script.js
    • style.scss
  • dist (ফোল্ডার)

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

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

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

App এবং dist ফোল্ডার

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

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

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

এখন চলুন এই টিউটোরিয়ালের মূল অংশে, Gulp কনফিগার করা!

আপনার Gulpfile তৈরি ও কনফিগার করুন

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

1. আপনার ইনস্টল করা প্যাকেজগুলোক Node মডিউল হিসেবে এক্সপোর্ট করুন। (তাই ফোল্ডারের নাম "node_modules")
2. Gulp টাস্ক তৈরি ও রান করুন।

প্যাকেজ ইনিশিয়ালাইজ করা

আপনার প্রজেক্টে যোগ করা npm প্যাকেজগুলোর সকল ফিচারের সুবিধা নেওয়ার জন্য, আপনাকে সেগুলোক Node-এ মডিউল হিসেবে এক্সপোর্ট করতে হবে।

আপনার 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 টাস্ক তৈরি করা হয় নিচের কোড ব্যবহার করে:

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

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

নির্দিষ্টভাবে, আমরা چندین ভিন্ন Gulp টাস্ক বানাব, যেগুলো *সব* ডিফল্ট Gulp টাস্ক রান করলে রান হবে।

সকল মূল ফাংশন যা আমরা ব্যবহার করব:

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

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

সব রেডি? এখন আসুন কাজের কথায় (cue Mulan music) এবং সেগুলো টাস্ক লিখি!

এই টাস্কগুলো আমরা Gulp-এ চালাতে চাই:

• Sass টাস্ক: SCSS-কে CSS ফাইলে কম্পাইল করবে এবং মিনিফাই করবে
• JS টাস্ক: JS ফাইলগুলো কনক্যাটেনেট করবে এবং মিনিফাই/অগ্লিফাই করবে
• Watch টাস্ক: SCSS বা JS ফাইল চেঞ্জ হলে ডিটেক্ট করবে, এবং টাস্কগুলো রি-রান করবে
• ডিফল্ট টাস্ক: কমান্ড লাইনে gulp টাইপ করলে সকল প্রয়োজনীয় টাস্ক রান করবে

Sass টাস্ক

Sass টাস্কের জন্য, প্রথমে আমরা Gulp-এ task() ব্যবহার করে টাস্ক তৈরি করব, এবং এর নাম দিব "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

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

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

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

JS টাস্ক

জাভাস্ক্রিপ্ট Gulp টাস্ক Sass টাস্কের মতোই, কিন্তু কিছু ভিন্ন এলিমেন্ট আছে।

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

একটি হলো ওয়াইল্ডকার্ড (*) ব্যবহার করে Gulp-কে বলা যে *.js এক্সটেনশন والے সকল ফাইল ব্যবহার করো এইরকম:

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

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

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

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

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

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

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

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

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

তারপর আপনি JS ফাইলটি uglify করবেন, এবং ডেস্টিনেশন লোকেশনে সেভ করবেন।

এখানে জাভাস্ক্রিপ্ট টাস্কের সম্পূর্ণ কোড:

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 টাস্কের মতোই, আপনি টেস্ট করতে পারেন JS টাস্ক কাজ করে কিনা gulp js কমান্ড লাইনে টাইপ করে।

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

এখন আমাদের দুটি প্রধান ওয়ার্কার Gulp টাস্ক শেষ হয়ে গেলে, আমরা Watch টাস্কের দিকে যাব।

Watch টাস্ক

Watch টাস্ক আপনি যেসব ফাইল বলে দেবেন সেগুলো চেঞ্জের জন্য ওয়াচ করবে। একবার চেঞ্জ ডিটেক্ট হলে, এটি আপনি যেসব টাস্ক ডেজিগনেট করবেন সেগুলো রান করবে এবং তারপর চেঞ্জের জন্য ওয়াচ চালিয়ে যাবে।

আমরা দুটি ওয়াচ ফাংশন তৈরি করব, একটি SCSS ফাইল ওয়াচ করার জন্য এবং অন্যটি JS ফাইল ওয়াচ করার জন্য।

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

Sass Watch ফাংশন app ফোল্ডারের যেকোনো SCSS ফাইল ওয়াচ করবে এবং চেঞ্জ ডিটেক্ট হলে Sass টাস্ক রান করবে।

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

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

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

এবং সেটি এইরকম দেখাবে:

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

Glob ("**") কীভাবে কাজ করে সেটি হলো এটি app/js ফোল্ডারের যেকোনো জায়গায় JS ফাইল খুঁজে বের করবে। এটি সরাসরি ফোল্ডারে বা যেকোনো পরবর্তী চাইল্ড ফোল্ডারে, যেমন plugins ফোল্ডারে খুঁজে বের করবে। Globbing খুব হ্যান্ডি যাতে আপনাকে প্রতিটি সাবফোল্ডারকে watch() ফাংশনে আলাদা সোর্স হিসেবে ডেজিগনেট করতে না হয়।

এখানে সম্পূর্ণ Watch টাস্ক:

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

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

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

ডিফল্ট Gulp টাস্ক হলো যা আপনি চান রান করা যখন আপনি কমান্ড লাইনে শুধু gulp টাইপ করেন। টাস্ক তৈরি করার সময়, আপনাকে এর নাম "default" দিতে হবে যাতে Gulp সেটি রিকগ্নাইজ করে যে আপনি সেটি চান রান করা।

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

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

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

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

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

একবার আপনার Gulp প্রসেস কাজ করলে, নিশ্চিত করুন যে আপনার index.html ফাইল সঠিক CSS এবং JS ফাইলগুলো রেফারেন্স করছে।

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

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

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

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

শেষ কথা

এতদূর এসে পেরে বন্ধ্যাবাদ! আশা করি আপনি এই বেসিক Gulp টিউটোরিয়ালটি হেল্পফুল পেয়েছেন।

যেমন শুরুতে বলেছিলাম, এটি শুধু npm এবং Gulp-এর বেসিক্সের একটি খুব সিম্পল টিউটোরিয়াল।

বেশির ডেভেলপার তাদের Gulpfile-এ অনেক আরও টাস্ক অ্যাড করেন। আপনি যদি আগ্রহী হন তবে আরও অডভান্সড টপিক্সে আরেকটি আর্টিকেল देखने দিন!

শেষে, আপনি এই টিউটোরিয়ালের সকল কোড আমার গিটহাব একাউন্ট থেকে চেক আউট করতে পারেন।

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