gruntjs - এনপিএম বনাম বোভার বনাম ব্রাউজারফ্রি বনাম গুল্প বনাম গ্রান্ট বনাম ওয়েবপ্যাক




npm gulp (6)

আমি সর্বাধিক জনপ্রিয় জাভাস্ক্রিপ্ট প্যাকেজ পরিচালক, বান্ডেলার এবং টাস্ক রানার সম্পর্কে আমার জ্ঞান সংক্ষিপ্ত করার চেষ্টা করছি। আমি ভুল হলে দয়া করে আমাকে সংশোধন করুন:

  • npm এবং bower প্যাকেজ পরিচালক। তারা কেবল নির্ভরতা ডাউনলোড করে এবং কীভাবে নিজেরাই প্রকল্পগুলি তৈরি করতে পারে তা জানে না। তারা যা জানে তা সমস্ত নির্ভরতা আনার পরে webpack / webpack / grunt কল করা।
  • bower npm মতো, তবে npm নির্ভরতা গাছগুলি তৈরি করে ( npm যা এটি পুনরাবৃত্তি করে) do অর্থ npm প্রতিটি নির্ভরতার জন্য নির্ভরতা আনয়ন করে (কয়েকবার একই জিনিস আনতে পারে), যখন bower আশা করে যে আপনি ম্যানুয়ালি উপ-নির্ভরতা অন্তর্ভুক্ত করবেন। কখনও কখনও bower এবং npm যথাক্রমে ফ্রন্ট-এন্ড এবং ব্যাক- npm জন্য ব্যবহৃত হয় (যেহেতু প্রতিটি মেগাবাইট ফ্রন্ট-এন্ডে গুরুত্বপূর্ণ হতে পারে)।
  • grunt এবং gulp grunt অটোমেটিক হতে পারে এমন সমস্ত কিছু স্বয়ংক্রিয় করার জন্য টাস্ক রানার (যেমন সিএসএস / স্যাস সংকলন করুন, চিত্রগুলি অনুকূলিত করুন, একটি বান্ডিল তৈরি করুন এবং এটি মাইনাইফ করুন / ট্রান্সিলাইপ করুন)।
  • grunt বনাম gulp ( maven বনাম gradle বা কনফিগারেশন বনাম কোডের মতো)। গ্রান্ট পৃথক স্বতন্ত্র কাজগুলি কনফিগার করার উপর ভিত্তি করে, প্রতিটি টাস্ক ফাইল / হ্যান্ডলগুলি / ক্লোজ ফাইলটি খোলে। গুল্পের জন্য কম পরিমাণের কোড প্রয়োজন এবং নোড স্ট্রিমের উপর ভিত্তি করে এটি পাইপ চেইনগুলি তৈরি করতে দেয় (ডাব্লু / ও একই ফাইলটি আবার খোলে) এবং এটি আরও দ্রুত করে তোলে।
  • webpack ( webpack-dev-server ) - আমার জন্য এটি webpack-dev-server পরিবর্তনগুলি পুনরায় লোড করা সহ একটি টাস্ক রানার যা আপনাকে সমস্ত জেএস / সিএসএস দর্শকদের ভুলে যাওয়ার অনুমতি দেয়।
  • npm / bower + প্লাগইনগুলি টাস্ক npm প্রতিস্থাপন করতে পারে। তাদের দক্ষতাগুলি প্রায়শই ছেদ করে তাই আপনাকে npm + প্লাগইনগুলিতে npm / grunt ব্যবহার করতে হবে তবে বিভিন্ন npm প্রভাব রয়েছে। তবে টাস্ক রানারগণ জটিল কাজের জন্য অবশ্যই ভাল (যেমন "প্রতিটি বিল্ড বান্ডেল তৈরি করে, ES6 থেকে ES5 এ ট্রান্সপ্লাইল করুন, এটি সমস্ত ব্রাউজারের এমুলেটরগুলিতে চালান, স্ক্রিনশট তৈরি করুন এবং এফটিপিপির মাধ্যমে ড্রপবক্সে স্থাপন করুন")।
  • ব্রাউজারিফাই ব্রাউজারগুলির জন্য প্যাকেজিং নোড মডিউলকে অনুমতি দেয়। browserify বনাম node require আসলে এএমডি বনাম কমনজেএস

প্রশ্নাবলী:

  1. webpack এবং webpack-dev-server কী? অফিসিয়াল ডকুমেন্টেশন বলছে এটি একটি মডিউল বান্ডিলার তবে আমার কাছে এটি কেবল একটি টাস্ক রানার। পার্থক্য কি?
  2. আপনি কোথায় browserify ব্যবহার করবেন? নোড / ইএস 6 আমদানি করে আমরা কি একই কাজটি করতে পারি না?
  3. আপনি কখন npm + প্লাগইনগুলিতে gulp / npm ব্যবহার করবেন?
  4. আপনি যখন একটি সংমিশ্রণ প্রয়োজন প্রয়োজন দয়া করে উদাহরণ প্রদান করুন

ওয়েবপ্যাক এবং ওয়েবপ্যাক-ডেভেল সার্ভার কী? অফিসিয়াল ডকুমেন্টেশন বলছে এটি একটি মডিউল বান্ডিলার তবে আমার কাছে এটি কেবল একটি টাস্ক রানার। পার্থক্য কি?

webpack-dev-server হ'ল একটি লাইভ রিলোডিং ওয়েব সার্ভার যা ওয়েবপ্যাক বিকাশকারীরা তারা যা করে তা তাত্ক্ষণিক প্রতিক্রিয়া পেতে ব্যবহার করে। এটি শুধুমাত্র উন্নয়নের সময় ব্যবহার করা উচিত।

এই প্রকল্পটি ভারীভাবে nof5 ইউনিট পরীক্ষার সরঞ্জাম দ্বারা অনুপ্রাণিত।

নাম অনুসারে ওয়েবপ্যাক ওয়েবে একটি সিঙ্গল প্যাক বয়স তৈরি করবে। প্যাকেজটি হ্রাস করা হবে এবং একটি একক ফাইলে সংযুক্ত করা হবে (আমরা এখনও HTTP 1.1 বয়সে থাকি)। ওয়েবপ্যাকটি সংস্থানগুলি (জাভাস্ক্রিপ্ট, সিএসএস, চিত্রগুলি) সংযুক্ত করার জন্য এবং এগুলিকে ইনজেকশন দেওয়ার যাদু করে: <script src="assets/bundle.js"></script>

একে মডিউল বান্ডিলারও বলা যেতে পারে কারণ এটি মডিউল নির্ভরতা বুঝতে হবে এবং কীভাবে নির্ভরতাগুলি দখল করতে পারে এবং সেগুলি একসাথে বান্ডিল করতে পারে।

আপনি কোথায় ব্রাউজারিফাই ব্যবহার করবেন? নোড / ইএস 6 আমদানি করে আমরা কি একই কাজটি করতে পারি না?

আপনি ওয়েবপ্যাক যেখানে ব্যবহার করবেন ঠিক সেই একই কাজগুলিতে আপনি ব্রাউজারফি ব্যবহার করতে পারেন। - যদিও ওয়েবপ্যাকটি আরও কমপ্যাক্ট।

মনে রাখবেন যে ওয়েবপ্যাক 2- ES6 মডিউল লোডার বৈশিষ্ট্যগুলি System.import ব্যবহার করছে , যা কোনও একক ব্রাউজার স্থানীয়ভাবে সমর্থন করে না।

আপনি কখন এনএমপি + প্লাগইনগুলিতে গুল্প / গ্রুর্ট ব্যবহার করবেন?

আপনি গুল্প, গ্রান্ট, ব্রোকলি, ব্রাঞ্চ এবং বোরকে forget যেতে পারেন। পরিবর্তে সরাসরি এনপিএম কমান্ড লাইন স্ক্রিপ্ট ব্যবহার করুন এবং আপনি গুলপের জন্য এখানে অতিরিক্ত প্যাকেজগুলি মুছে ফেলতে পারেন:

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

আপনার প্রকল্পের জন্য কনফিগার ফাইল তৈরি করার সময় আপনি সম্ভবত গুল্প এবং গ্রান্ট কনফিগারেশন ফাইল জেনারেটর ব্যবহার করতে পারেন। এইভাবে আপনার ইয়েমেন বা অনুরূপ সরঞ্জাম ইনস্টল করার দরকার নেই।


ওয়েবপ্যাক এবং ব্রাউজারফাই

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

উদাহরণস্বরূপ, ধরা যাক আপনি মডিউলগুলিতে বিভক্ত একটি ES6 কোড লিখেছেন এবং এটি ব্রাউজারে চালাতে সক্ষম হতে চান। যদি এই মডিউলগুলি নোড মডিউল হয় তবে ব্রাউজারগুলি সেগুলি বুঝতে পারে না কারণ সেগুলি কেবল নোড পরিবেশে বিদ্যমান। ES6 মডিউলগুলিও IE11 এর মতো পুরানো ব্রাউজারগুলিতে কাজ করবে না। এছাড়াও আপনি পরীক্ষামূলক ভাষার বৈশিষ্ট্যগুলি (ES পরবর্তী প্রস্তাবসমূহ) ব্যবহার করতে পারেন যা ব্রাউজারগুলি এখনও প্রয়োগ করে না তাই এ জাতীয় স্ক্রিপ্ট চালানো কেবল ত্রুটি ছুঁড়ে দেয়। ওয়েবপ্যাক এবং ব্রাউজারফাইয়ের মতো tools সরঞ্জামগুলি কোনও ফর্ম ব্রাউজারে এই জাতীয় কোড অনুবাদ করে এই সমস্যাগুলি সমাধান করে ute তার উপরে, তারা those বান্ডিলগুলিতে বিপুল পরিমাণে অপ্টিমাইজেশন প্রয়োগ করা সম্ভব করে।

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

ওয়েবপ্যাক ডেভ সার্ভার

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

টাস্ক রানার বনাম এনপিএম স্ক্রিপ্টগুলি

আমি গুলপকে এর সংক্ষিপ্ততা এবং সহজ টাস্ক রাইটিংয়ের জন্য ব্যবহার করছি, তবে পরে জানতে পেরেছি আমার কাছে গুল্প বা গ্রান্টের মোটেই দরকার নেই। আমার যা কিছু প্রয়োজন তার আগে তাদের API এর মাধ্যমে তৃতীয় পক্ষের সরঞ্জামগুলি চালনার জন্য এনপিএম স্ক্রিপ্টগুলি ব্যবহার করে করা যেতে পারে। গুল্প, গ্রান্ট বা এনপিএম স্ক্রিপ্টগুলির মধ্যে নির্বাচন করা আপনার দলের স্বাদ এবং অভিজ্ঞতার উপর নির্ভর করে।

যদিও গুল্প বা গ্রান্টের কাজগুলি জেএসের সাথে এতটা পরিচিত না এমন লোকদের পক্ষেও পড়া সহজ, তবে এটি প্রয়োজন এবং শেখার আরও একটি সরঞ্জাম এবং আমি ব্যক্তিগতভাবে আমার নির্ভরতা সংকীর্ণ করতে এবং জিনিসগুলি সহজ করে তুলতে পছন্দ করি। অন্যদিকে, এনপিএম স্ক্রিপ্ট এবং (প্রস্তাবিত জেএস) স্ক্রিপ্টগুলির সমন্বয়ে এই কাজগুলি প্রতিস্থাপন করা যা তৃতীয় পক্ষের সরঞ্জামগুলি চালনা করে (উদাঃ নোড স্ক্রিপ্ট rimraf এবং rimraf পরিষ্কারের উদ্দেশ্যে চালানো) সম্ভবত আরও চ্যালেঞ্জের হতে পারে। তবে বেশিরভাগ ক্ষেত্রেই ফলাফলের ক্ষেত্রে তিনটিই সমান।

উদাহরণ

উদাহরণস্বরূপ, আমি আপনাকে পরামর্শ দিচ্ছি যে এই প্রতিক্রিয়া স্টার্টার প্রকল্পটি দেখুন , যা আপনাকে পুরো বিল্ড এবং মোতায়েন প্রক্রিয়াটি কভার করে এনপিএম এবং জেএস স্ক্রিপ্টগুলির একটি দুর্দান্ত সমন্বয় দেখায় shows আপনি সেই এনপিএম স্ক্রিপ্টগুলি মূল ফোল্ডারে প্যাকেজ.জসনে, scripts নামের একটি সংস্থায় খুঁজে পেতে পারেন। সেখানে আপনি বেশিরভাগ babel-node tools/run start মতো কমান্ডগুলির মুখোমুখি হবেন। বাবেল-নোড একটি সি এল এল সরঞ্জাম (উত্পাদন ব্যবহারের উদ্দেশ্যে নয়), যা প্রথমে ES6 ফাইল tools/run (সরঞ্জামগুলিতে অবস্থিত run.js ফাইল) সংকলন করে - মূলত একটি রানার ইউটিলিটি। এই রানারটি আর্গুমেন্ট হিসাবে একটি ফাংশন গ্রহণ করে এবং এটি সম্পাদন করে, যা এই ক্ষেত্রে start - উত্স ফাইলগুলি (ক্লায়েন্ট এবং সার্ভার উভয়) বান্ডিল করার জন্য এবং অ্যাপ্লিকেশন এবং বিকাশ সার্ভার শুরু করার জন্য দায়ী আরেকটি ইউটিলিটি (start.js) (দেব সার্ভারটি হবে সম্ভবত ওয়েবপ্যাক ডেভ সার্ভার বা ব্রাউজারসিঙ্ক)।

আরও স্পষ্টভাবে বলতে গেলে, start.js উভয় ক্লায়েন্ট এবং সার্ভারের পার্শ্বের বান্ডিল তৈরি করে, এক্সপ্রেস সার্ভার শুরু করে এবং সফল শুরু করার পরে ব্রাউজার-সিঙ্কটি প্রবেশ করে, যা লেখার সময় এইরকম দেখায় (দয়া করে নতুন কোডের জন্য স্টার্টার প্রকল্পটির প্রতিক্রিয়াটি দেখুন )।

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

গুরুত্বপূর্ণ অংশটি হ'ল proxy.target , যেখানে তারা প্রক্সি করতে চায় এমন সার্ভারের ঠিকানা সেট করে, যা HTTP: // লোকালহোস্ট: 3000 হতে পারে, এবং ব্রাউজারসাইক একটি সার্ভার শোনার জন্য http: // লোকালহস্ট: 3001 , যেখানে উত্পন্ন সম্পদগুলি পরিবেশন করা হয় স্বয়ংক্রিয় পরিবর্তন সনাক্তকরণ এবং গরম মডিউল প্রতিস্থাপন সহ। আপনি দেখতে পাচ্ছেন, পৃথক ফাইল বা নিদর্শনগুলির সাথে অন্য একটি কনফিগারেশন সম্পত্তি files রয়েছে ব্রাউজার-সিঙ্ক পরিবর্তনগুলির জন্য নজর রাখে এবং যদি কিছু ঘটে থাকে তবে ব্রাউজারটি পুনরায় লোড করে, তবে মন্তব্য হিসাবে বলেছে যে ওয়েবপ্যাকটি নিজেই এইচএমআরের সাথে জেএস উত্সগুলি দেখার যত্ন নেয়, তাই তারা সেখানে সহযোগিতা করুন।

এখন আমার কাছে এ জাতীয় গ্রান্ট বা গুল্প কনফিগারেশনের সমতুল্য উদাহরণ নেই, তবে গুলপ (এবং কিছুটা একইভাবে গ্রান্টের সাথে) এর সাথে আপনি পৃথক কাজ গুলপফাইলে লিখতে পারেন।

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

যেখানে আপনি স্টার্টার-কিটের মতো মূলত একই জিনিস করছেন, এই বার টাস্ক রানার যা আপনার জন্য কিছু সমস্যা সমাধান করে তবে ব্যবহারের শেখার সময় এর নিজস্ব সমস্যা এবং কিছু অসুবিধা উপস্থাপন করে এবং যেমনটি আমি বলি, আপনার যত বেশি নির্ভরতা রয়েছে তত বেশি ভুল হতে পারে। এবং এই কারণেই আমি এই জাতীয় সরঞ্জামগুলি থেকে মুক্তি পেতে পছন্দ করি।



সুতা হ'ল একটি সাম্প্রতিক প্যাকেজ ম্যানেজার যা সম্ভবত উল্লেখ করার উপযুক্ত। সুতরাং, সেখানে: Yarn

আফাইক, এটি এনপিএম এবং শক্তিশালী নির্ভরতা উভয়ই পেতে পারে এবং অন্যান্য প্রশংসিত বৈশিষ্ট্য রয়েছে।


ঠিক আছে, তারা সবাই কিছুটা মিল পেয়েছে, তারা আপনার জন্য বিভিন্ন এবং অনুরূপ উপায়ে একই কাজ করে, আমি তাদের নীচের মত 3 টি প্রধান গ্রুপে ভাগ করেছি:

1) মডিউল বান্ডিলার

ওয়েবপ্যাক এবং জনপ্রিয় হিসাবে ব্রাউজ করুন, টাস্ক রানারদের মতো কাজ করুন তবে আরও নমনীয়তার সাথে, এটি আপনার সেটিং হিসাবে সবকিছুকে একসাথে বান্ডিল করবে, সুতরাং আপনি ফলাফলটি বান্ডেল.জে হিসাবে চিহ্নিত করতে পারেন উদাহরণস্বরূপ সিএসএস এবং জাভাস্ক্রিপ্ট সহ একটি একক ফাইলে, কারণ প্রত্যেকের আরও বিশদ, নীচের বিবরণটি দেখুন:

webpack

ওয়েবপ্যাক হ'ল আধুনিক জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলির জন্য একটি মডিউল বান্ডেলার। ওয়েবপ্যাকটি যখন আপনার অ্যাপ্লিকেশনটি প্রক্রিয়া করে, এটি পুনরাবৃত্তভাবে নির্ভরতা গ্রাফ তৈরি করে যা আপনার অ্যাপ্লিকেশনটির প্রতিটি মডিউল অন্তর্ভুক্ত করে, তারপরে ব্রাউজার দ্বারা লোড হওয়ার জন্য mod সমস্ত মডিউলগুলিকে অল্প সংখ্যক বান্ডেলে প্যাকেজ করে।

এটি অবিশ্বাস্যভাবে কনফিগারযোগ্য, তবে শুরু করার জন্য আপনাকে কেবল ফোর কোর কনসেপ্টগুলি বুঝতে হবে: প্রবেশ, আউটপুট, লোডার এবং প্লাগইন।

এই নথিটি এই ধারণাগুলির একটি উচ্চ-স্তরের ওভারভিউ দেওয়ার উদ্দেশ্যে করা হয়েছে, যখন নির্দিষ্ট ধারণা সম্পর্কিত ব্যবহারের ক্ষেত্রে লিঙ্ক সরবরাহ করে।

আরও here

browserify

ব্রাউজারফাই একটি বিকাশ সরঞ্জাম যা ব্রাউজারে ব্যবহারের জন্য সংকলন করে নোড.জেএস-স্টাইলের মডিউলগুলি লিখতে দেয়। নোডের মতো, আমরা আমাদের মডিউলগুলি পৃথক ফাইলে লিখি, মডিউল ব্যবহার করে বাহ্যিক পদ্ধতি এবং বৈশিষ্ট্য রফতানি করি ex এমনকি প্রয়োজনীয় ফাংশনটি ব্যবহার করে আমরা অন্যান্য মডিউলগুলিও পেতে পারি এবং যদি আমরা আপেক্ষিক পথটি বাদ দিই তবে এটি নোড_মডিউলস ডিরেক্টরিতে মডিউলটিতে সমাধান করবে।

আরও here

2) টাস্ক রানার্স

গাল্প এবং গ্রান্ট হ'ল টাস্ক রানার, মূলত তারা যা করেন, টাস্ক তৈরি করে এবং যখনই আপনি চান যখন এগুলি চালান, উদাহরণস্বরূপ আপনি আপনার সিএসএসকে ছোট করার জন্য একটি প্লাগইন ইনস্টল করেন এবং তারপরে প্রতিটি সময় এটি মিনিফাইটিং করতে চালান, প্রতিটি সম্পর্কে আরও বিশদ:

গ্রাস

gulp.js হ'ল ফ্র্যাক্টাল ইনোভেশনস এবং গিটহাবের ওপেন সোর্স সম্প্রদায় দ্বারা খোলা সোর্স জাভাস্ক্রিপ্ট টুলকিট, ফ্রন্ট-এন্ড ওয়েব ডেভলপমেন্টে স্ট্রিমিং বিল্ড সিস্টেম হিসাবে ব্যবহৃত। এটি নোড.জেএস এবং নোড প্যাকেজ ম্যানেজার (এনপিএম) -এ নির্মিত একটি টাস্ক রানার, যা সময়োপযোগীকরণ এবং পুনরবৃত্তিমূলক কার্যগুলি যেমন ম্যানিফিকেশন, কনটেনটেশন, ক্যাশে বুস্টিং, ইউনিট টেস্টিং, লন্টিং, অপ্টিমাইজেশন ইত্যাদির সাথে জড়িত auto একটি কোড-ওভার-কনফিগারেশন পদ্ধতির তার কার্যগুলি সংজ্ঞায়িত করতে এবং এটি সম্পাদন করার জন্য তার ছোট, একক-উদ্দেশ্যযুক্ত প্লাগইনগুলির উপর নির্ভর করে। গুল্প ইকোসিস্টেমের 1000+ এর মতো প্লাগইনগুলি চয়ন করতে উপলভ্য করা হয়েছে।

আরও here

ঘোঁৎ ঘোঁৎ

গ্রান্ট একটি জাভাস্ক্রিপ্ট টাস্ক রানার, একটি সরঞ্জাম যা স্বয়ংক্রিয়ভাবে ঘনঘন ব্যবহৃত, যেমন সংশোধন, সংকলন, ইউনিট টেস্টিং, আবদ্ধকরণ ইত্যাদি সম্পাদন করতে ব্যবহৃত হয় এটি কোনও ফাইলের মধ্যে সংজ্ঞায়িত কাস্টম টাস্কগুলি চালানোর জন্য একটি কমান্ড-লাইন ইন্টারফেস ব্যবহার করে (গ্রান্টফাইল হিসাবে পরিচিত) । গ্রান্টটি বেন আলমান তৈরি করেছিলেন এবং নোড.জেএস-তে লেখা হয়েছে এটি এনপিএমের মাধ্যমে বিতরণ করা হয়। বর্তমানে গ্রান্ট বাস্তুসংস্থায় পাঁচ হাজারেরও বেশি প্লাগইন রয়েছে available

আরও here

3) প্যাকেজ পরিচালক

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

npm

এনএমপি জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষার জন্য একটি প্যাকেজ পরিচালক manager এটি জাভাস্ক্রিপ্ট রানটাইম এনভায়রনমেন্ট নোড.জেএস এর জন্য ডিফল্ট প্যাকেজ ম্যানেজার is এটিতে একটি কমান্ড লাইন ক্লায়েন্ট থাকে, যাকে এনপিএমও বলা হয় এবং সর্বজনীন প্যাকেজগুলির একটি অনলাইন ডাটাবেস, যাকে এনপিএম রেজিস্ট্রি বলা হয়। রেজিস্ট্রি ক্লায়েন্টের মাধ্যমে অ্যাক্সেস করা যায় এবং উপলভ্য প্যাকেজগুলি এনএমপি ওয়েবসাইটের মাধ্যমে ব্রাউজ এবং অনুসন্ধান করা যায়।

আরও NPM

আবাস

বুভার এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, ফন্ট বা এমনকি চিত্র ফাইলগুলি সমন্বিত উপাদানগুলি পরিচালনা করতে পারে। বুভার কোডটি সংক্ষিপ্ত করে বা মাইনিফাই করে না বা অন্য কিছু করে না - এটি কেবল আপনার প্রয়োজনীয় প্যাকেজগুলির সঠিক সংস্করণ এবং তাদের নির্ভরতা ইনস্টল করে। শুরু করার জন্য, বোভার পুরোপুরি থেকে প্যাকেজ আনার এবং ইনস্টল করে, শিকারের যত্ন নেওয়ার, সন্ধানের জন্য, ডাউনলোড করার এবং আপনার সন্ধান করা জিনিসগুলি সংরক্ষণ করে কাজ করে। বওয়ার এই প্যাকেজগুলির একটি ম্যানিফেস্ট ফাইল, ট্র্যাক করে রাখে, bower.json।

আরও Bower

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

সুতা

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

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

কোডটি প্যাকেজ নামক কোনও কিছুর মাধ্যমে ভাগ করা হয় (কখনও কখনও মডিউল হিসাবে পরিচিত)। একটি প্যাকেজটিতে সমস্ত কোড ভাগ করার পাশাপাশি একটি প্যাকেজ.জসন ফাইল রয়েছে যা প্যাকেজটি বর্ণনা করে।

আরও here


অক্টোবর 2018 আপডেট করুন

আপনি যদি ফ্রন্ট-এন্ড ডেভ সম্পর্কে এখনও অনিশ্চিত থাকেন তবে একটি দুর্দান্ত উত্সটি এখানে তাত্ক্ষণিকভাবে দেখতে পারেন।

https://github.com/kamranahmedse/developer-roadmap

জুন 2018 আপডেট করুন

আপনি যদি প্রথম থেকেই সেখানে না থাকেন তবে আধুনিক জাভাস্ক্রিপ্ট শেখা শক্ত। আপনি যদি নতুন আগত হন তবে আরও ভাল ওভারভিউ দেওয়ার জন্য এই দুর্দান্ত রচনাটি পরীক্ষা করে দেখুন।

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

জুলাই 2017 আপডেট করুন

2017 সালে ফ্রন্ট-এন্ড বিকাশের দিকে কীভাবে যোগাযোগ করা যায় সে সম্পর্কে সাম্প্রতিককালে গ্র্যাব টিমের একটি বিস্তৃত গাইড আমি পেয়েছি You আপনি নীচের মত এটি পরীক্ষা করে দেখতে পারেন।

https://github.com/grab/front-end-guide

আমি বেশ কিছুদিন ধরে এটিও অনুসন্ধান করছিলাম যেহেতু সেখানে প্রচুর সরঞ্জাম রয়েছে এবং সেগুলির প্রতিটি আমাদের আলাদা দিক থেকে উপকৃত করে। সম্প্রদায়টি Browserify, Webpack, jspm, Grunt and Gulp মতো সরঞ্জামগুলিতে বিভক্ত। আপনি Yeoman or Slush সম্পর্কেও শুনতে পাবেন। এটি আসলে কোনও সমস্যা নয়, এটি সবার সামনে একটি পরিষ্কার পথ বোঝার চেষ্টা করার জন্য কেবল বিভ্রান্তিকর।

যাইহোক, আমি কিছু অবদান রাখতে চাই।

1. প্যাকেজ পরিচালক

প্যাকেজ পরিচালনাকারীরা প্রকল্প নির্ভরতা ইনস্টল করা ও আপডেট করা সহজ করেন, যা লাইব্রেরি যেমন: jQuery, Bootstrap ইত্যাদি - আপনার সাইটে ব্যবহৃত এবং আপনার দ্বারা লিখিত নয় এমন সমস্ত কিছুই।

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

  • NPM অর্থ: Node JS package manager আপনাকে আপনার সফ্টওয়্যার নির্ভর সমস্ত লাইব্রেরি পরিচালনা করতে সহায়তা করে। আপনি package.json নামের একটি ফাইলের মধ্যে আপনার প্রয়োজনীয়তা সংজ্ঞায়িত করবেন এবং কমান্ড লাইনে npm install চালান ... তারপরে ব্যাং, আপনার প্যাকেজগুলি ডাউনলোড হয়ে গেছে এবং ব্যবহারের জন্য প্রস্তুত। front-end and back-end লাইব্রেরির জন্য উভয়ই ব্যবহৃত হতে পারে।

  • Bower : ফ্রন্ট-এন্ড প্যাকেজ পরিচালনার জন্য, ধারণাটি এনপিএমের সাথে একই। আপনার সমস্ত লাইব্রেরি bower.json নামে একটি ফাইলে সংরক্ষণ করা হয় এবং তারপরে কমান্ড লাইনে bower install চালান।

Bower এবং NPM মধ্যে সবচেয়ে বড় পার্থক্যটি হ'ল এনপিএম নীড়যুক্ত নির্ভরতা গাছ করে এবং বোভারের নীচে নীচে সমতল নির্ভরতা গাছের প্রয়োজন হয়।

বোর এবং এনপিএম এর মধ্যে পার্থক্য কী থেকে উদ্ধৃত করা হচ্ছে?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

npm 3 Duplication and Deduplication সম্পর্কে কিছু আপডেট রয়েছে, দয়া করে আরও তথ্যের জন্য ডকটি খুলুন।

  • Yarn : NPM তুলনায় আরও কিছু সুবিধা নিয়ে সম্প্রতি Facebook দ্বারা published JavaScript জন্য একটি নতুন প্যাকেজ ম্যানেজার। এবং সুতোর সাহায্যে, আপনি প্যাকেজ আনতে NPM এবং Bower উভয় রেজিস্ট্রি ব্যবহার করতে পারেন। আপনি যদি আগে কোনও প্যাকেজ ইনস্টল করেন তবে yarn একটি ক্যাশেড অনুলিপি তৈরি করে যা offline package installs

  • jspm : jspm ES6 মডিউল লোডার শীর্ষে নির্মিত SystemJS সর্বজনীন মডিউল লোডার জন্য একটি প্যাকেজ ম্যানেজার। এটি নিজস্ব নিয়মগুলির একটি সম্পূর্ণ নতুন প্যাকেজ ম্যানেজার নয়, বরং এটি বিদ্যমান প্যাকেজ উত্সগুলির শীর্ষে কাজ করে। বাক্সের বাইরে, এটি GitHub এবং npm সহ কাজ করে। যেহেতু বেশিরভাগ Bower ভিত্তিক প্যাকেজগুলি GitHub উপর ভিত্তি করে GitHub , আমরা সেই প্যাকেজগুলি jspm ব্যবহার jspm ইনস্টল করতে পারি। এটিতে একটি রেজিস্ট্রি রয়েছে যা সহজেই ইনস্টলেশনগুলির জন্য বেশিরভাগ ব্যবহৃত ফ্রন্ট-এন্ড প্যাকেজগুলি তালিকাভুক্ত করে।

jspm এবং jspm মধ্যে jspm : প্যাকেজ পরিচালক: বোভার বনাম জেএসপিএম

2. মডিউল লোডার / বান্ডিলিং

যে কোনও স্কেলের বেশিরভাগ প্রকল্পের কোডগুলি বিভিন্ন ফাইলের মধ্যে বিভক্ত হবে। আপনি কেবলমাত্র একটি পৃথক <script> ট্যাগ সহ প্রতিটি ফাইল অন্তর্ভুক্ত করতে পারেন, তবে <script> একটি নতুন HTTP সংযোগ স্থাপন করে এবং ছোট ফাইলগুলির জন্য - যা মড্যুলারটির লক্ষ্য of সংযোগ স্থাপনের সময়টি স্থানান্তরিত হওয়ার চেয়ে উল্লেখযোগ্যভাবে বেশি সময় নিতে পারে তথ্যটি. স্ক্রিপ্টগুলি ডাউনলোড করার সময়, পৃষ্ঠায় কোনও সামগ্রী পরিবর্তন করা যাবে না।

  • ডাউনলোডের সময়ের সমস্যাটি একক ফাইলে সাধারণ মডিউলগুলির একটি গ্রুপকে সংযুক্ত করে এবং এটিকে ছোট করে কার্যকর করা যায়।

যেমন

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • পারফরম্যান্স যদিও নমনীয়তার ব্যয়ে আসে। যদি আপনার মডিউলগুলির আন্ত-নির্ভরতা থাকে তবে নমনীয়তার এই অভাবটি শোস্টোপার হতে পারে।

যেমন

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

কম্পিউটারগুলি আপনার চেয়ে ভাল এটি করতে পারে এবং সে কারণেই আপনাকে একটি সরঞ্জাম নিজেরাই সব কিছু একক ফাইলে বান্ডিল করার জন্য ব্যবহার করা উচিত।

তারপরে আমরা প্রয়োজনীয় RequireJS , Browserify , Webpack এবং SystemJS সম্পর্কে শুনেছি

  • RequireJS : একটি JavaScript ফাইল এবং মডিউল লোডার। এটি ব্রাউজারে ব্যবহারের জন্য অনুকূলিত হয়েছে তবে এটি Node মতো অন্যান্য জাভাস্ক্রিপ্ট পরিবেশে ব্যবহার করা যেতে পারে।

যেমন: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

main.js আমরা myModule.js নির্ভরতা হিসাবে আমদানি করতে পারি এবং এটি ব্যবহার করতে পারি।

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

এবং তারপরে আমাদের HTML , আমরা প্রয়োজনীয় RequireJS সাথে ব্যবহার করতে RequireJS

<script src=“app/require.js data-main=“main.js ></script>

সহজেই বোঝাপড়া পাওয়ার জন্য CommonJS এবং AMD সম্পর্কে আরও পড়ুন। কমনজেএস, এএমডি এবং প্রয়োজনীয় জেএসের মধ্যে সম্পর্ক?

  • Browserify : ব্রাউজারে CommonJS ফর্ম্যাট মডিউলগুলি ব্যবহারের অনুমতি দেওয়ার জন্য সেট আউট। ফলস্বরূপ, Browserify মডিউল Browserify মতো মডিউল লোডার নয়: Browserify পুরোপুরি একটি বিল্ড-টাইম সরঞ্জাম, কোডের একটি বান্ডিল উত্পাদন করে যা ক্লায়েন্ট-সাইড লোড করা যায়।

নোড এবং এনপিএম ইনস্টল করা একটি বিল্ড মেশিন দিয়ে শুরু করুন এবং প্যাকেজটি পান:

npm install -g save-dev browserify

আপনার মডিউলগুলি CommonJS ফর্ম্যাটে লিখুন

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

এবং খুশি হলে, বান্ডিল করতে আদেশটি জারি করুন:

browserify entry-point.js -o bundle-name.js

ব্রাউজারফাই পুনরাবৃত্তভাবে এন্ট্রি-পয়েন্টের সমস্ত নির্ভরতা খুঁজে পায় এবং তাদের একটি একক ফাইলে সংযুক্ত করে:

<script src=”bundle-name.js”></script>
  • Webpack : এটি JavaScript , চিত্রগুলি, সিএসএস এবং আরও অনেকগুলি সহ আপনার স্থিতিশীল সম্পদের একটি একক ফাইলে বান্ডিল করে। এটি আপনাকে বিভিন্ন ধরণের লোডারগুলির মাধ্যমে ফাইলগুলি প্রক্রিয়া করতে সক্ষম করে। আপনি আপনার JavaScript CommonJS বা AMD মডিউলগুলির সিনট্যাক্স দিয়ে লিখতে পারেন। এটি মৌলিকভাবে আরও সংহত ও মতামতপূর্ণভাবে বিল্ড সমস্যাকে আক্রমণ করে। Browserify আপনি Gulp/Grunt এবং ট্রান্সফর্ম এবং প্লাগইনগুলির একটি দীর্ঘ তালিকা ব্যবহার করে কাজটি শেষ করতে পারেন। Webpack বাক্সের বাইরে পর্যাপ্ত শক্তি সরবরাহ করে যা আপনার সাধারণত Grunt বা Gulp প্রয়োজন হয় না।

বেসিক ব্যবহার সহজ simple ব্রাউজরিফির মতো ওয়েবপ্যাক ইনস্টল করুন:

npm install -g save-dev webpack

এবং কমান্ডটি একটি এন্ট্রি পয়েন্ট এবং একটি আউটপুট ফাইলটি পাস করুন:

webpack ./entry-point.js bundle-name.js
  • SystemJS : একটি মডিউল লোডার যা বর্তমানে ব্যবহৃত জনপ্রিয় ফর্ম্যাটগুলির ( CommonJS, UMD, AMD, ES6 ) রানের সময়ে মডিউলগুলি আমদানি করতে পারে । এটি ES6 মডিউল লোডার পলিফিলের শীর্ষে নির্মিত এবং ব্যবহৃত ফর্ম্যাটটি সনাক্ত করতে এবং এটি যথাযথভাবে পরিচালনা করতে যথেষ্ট স্মার্ট। SystemJS কোড ( Babel বা Traceur ) বা প্লাগইনগুলি ব্যবহার করে TypeScript এবং CoffeeScript মতো অন্যান্য ভাষাও SystemJS করতে পারে।

node module এবং এটি ব্রাউজারে কেন ভালভাবে মানিয়ে যায় না তা জানতে চান।

আরও দরকারী নিবন্ধ:

কেন jspm এবং SystemJS ?

ES6 মডুলারিলিটির অন্যতম প্রধান লক্ষ্য হ'ল ইন্টারনেটে যে কোনও জায়গা থেকে জাভাস্ক্রিপ্ট লাইব্রেরি ইনস্টল করা এবং ব্যবহার করা ( Github , npm ইত্যাদি) সত্যই সহজ করে দেওয়া। শুধুমাত্র দুটি জিনিস প্রয়োজন:

  • লাইব্রেরি ইনস্টল করার জন্য একটি একক কমান্ড
  • লাইব্রেরিটি আমদানি করতে এবং এটি ব্যবহারের জন্য কোডের একক লাইন

jspm আপনি এটি করতে পারেন।

  1. কমান্ড সহ লাইব্রেরিটি ইনস্টল করুন: jspm install jquery
  2. কোডের একক লাইন সহ গ্রন্থাগারটি আমদানি করুন, আপনার HTML ফাইলের অভ্যন্তরে বাহ্যিক রেফারেন্সের প্রয়োজন নেই।

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. তারপরে আপনি নিজের মডিউলটি আমদানি করার আগে এই জিনিসগুলি System.config({ ... }) মধ্যে কনফিগার করুন। সাধারণত যখন jspm init চালানো হয়, এই উদ্দেশ্যে config.js নামের একটি ফাইল থাকবে।

  2. এই স্ক্রিপ্টগুলি চালিত করতে, আমাদের HTML পৃষ্ঠাতে system.js এবং config.js লোড করতে হবে। এর পরে আমরা SystemJS মডিউল লোডার ব্যবহার করে display.js ফাইলটি লোড করব।

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Webpack : আপনি Webpack সাথে Webpack ব্যবহার করতে পারেন যেহেতু কৌণিক 2 এটি প্রয়োগ করেছে। যেহেতু jspm সাথে সংহত করার জন্য তৈরি হয়েছিল এবং এটি বিদ্যমান npm উত্সের শীর্ষে কাজ করে, সুতরাং আপনার উত্তর আপনার উপর নির্ভর করবে up

3. কার্য রানার

টাস্ক রানার এবং বিল্ড টুলস মূলত কমান্ড-লাইন সরঞ্জাম। কেন আমাদের সেগুলি ব্যবহার করতে হবে: এক কথায়: অটোমেশন মিনিফিকেশন, সংকলন, ইউনিট টেস্টিং, লেটিংয়ের পুনরাবৃত্তিমূলক কাজগুলি করার সময় আপনার যত কম কাজ করতে হবে যা কমান্ড লাইনের সাথে এমনকি ম্যানুয়ালি করার আগে আমাদের অনেক সময় ব্যয় করে।

  • Grunt : আপনি কোডগুলি প্রাক-প্রক্রিয়াজাতকরণের জন্য আপনার বিকাশের পরিবেশের জন্য অটোমেশন তৈরি করতে পারেন বা একটি কনফিগার ফাইল সহ বিল্ড স্ক্রিপ্ট তৈরি করতে পারেন এবং জটিল কোনও কাজ পরিচালনা করা খুব কঠিন বলে মনে হয়। গত কয়েক বছরে জনপ্রিয়।

Grunt প্রতিটি কাজ হ'ল বিভিন্ন প্লাগইন কনফিগারেশনের একটি অ্যারে, যা কেবল একের পর এক নির্বাহ করা হয়, কঠোরভাবে স্বাধীন এবং ক্রমবর্ধমান ফ্যাশনে।

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
  • Gulp : অটোমেশন ঠিক Grunt মতো তবে কনফিগারেশনের পরিবর্তে, আপনি নোড অ্যাপ্লিকেশনের মতো স্ট্রিম সহ JavaScript লিখতে পারেন। এই দিনগুলিকে পছন্দ করুন।

এটি একটি Gulp নমুনা টাস্কের ঘোষণা।

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

আরও দেখুন: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

৪. স্ক্যাফোল্ডিংয়ের সরঞ্জাম

  • Slush and Yeoman : আপনি তাদের সাথে স্টার্টার প্রকল্প তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি এইচটিএমএল এবং এসসিএসএস দিয়ে একটি প্রোটোটাইপ তৈরির পরিকল্পনা করছেন, তারপরে ম্যানুয়ালি পরিবর্তে স্ক্যাস, সিএসএস, আইএমজি, ফন্টের মতো কিছু ফোল্ডার তৈরি করুন। আপনি কেবল yeoman ইনস্টল করতে পারেন এবং একটি সাধারণ স্ক্রিপ্ট চালাতে পারেন। তারপর এখানে আপনার জন্য সবকিছু।

here আরও সন্ধান here

npm install -g yo
npm install --global generator-h5bp
yo h5bp

আরও দেখুন: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

আমার উত্তরটি প্রশ্নের সামগ্রীর সাথে সত্যিই মেলে না তবে আমি যখন গুগলে এই জ্ঞানটি অনুসন্ধান করছি, আমি সর্বদা প্রশ্নটিকে উপরে দেখি যাতে আমি সংক্ষিপ্তভাবে উত্তর দেওয়ার সিদ্ধান্ত নিয়েছিলাম। আশা করি আপনি বলছি এটি সহায়ক হয়েছে।