آموزش گالپ (Gulp.js)

دسته بندی: آموزش طراحی وب

آموزش گالپ

آنچه در این صفحه می خوانید:

معرفی گالپ (Gulp)

Gulp یک ابزار جاوا اسکریپت اوپن سورس است که توسط Eric Schoffstall ایجاد شده و به عنوان یک سیستم streaming build برای توسعه وب فرانت اند طراحی شده است. توسعه وب مدرن دارای بسیاری از کارهای تکراری مانند اجرای یک سرور محلی، کوچک کردن کد، بهینه سازی تصاویر، پیش پردازش CSS و موارد دیگر است. گالپ یک task runner است که بر روی Node.js و npm ساخته شده و برای اتوماتیک کردن کارهای وقت گیر و تکراری در توسعه وب مانند مینی سازی، تلفیق، cache busting، تست واحد، linting، بهینه سازی و غیره مورد استفاده قرار می گیرد. گالپ برای تعریف وظایف یا Task ها از یک روش Code-Over-Configuration استفاده می کند و به پلاگین های کوچک و تک منظوره خود متکی است. در سطح بالا، gulp فایل ها را به عنوان streams و pip می خواند و جریان ها را به کارهای مختلف منتقل می کند. این کارها دارای کد هستند و از افزونه ها استفاده می کنند. تسک ها، فایل ها را تغییر داده و فایل های منبع را در فایل های تولید ایجاد می کنند. گالپ شامل بیش از 3500 پلاگین است. کاربرد های زیر در گالپ یافت می شود:

  • Automation: گالپ یک ابزار است که به شما کمک می کند کارهای وقت گیر در جریان گردش کار توسعه خود را به صورت خودکار انجام دهید.
  • Platform-agnostic: در همه IDE های اصلی یکپارچگی داشته و افراد از گالپ در پی اچ پی، دات نت، Node.js، جاوا و سایر پلتفرم ها استفاده می کنند.
  • Strong Ecosystem:از ماژول های npm برای انجام هر کاری استفاده می کند و شامل چندهزار پلاگین برای جریان های تبدیل فایل می باشد.
  • Simple: با ارائه تنها یک سطح حداقل از API، برای یادگیری و استفاده آسان و ساده است.

gulp ابزاری برای ساخت در جاوااسکریپت است که بر روی جریان گره ساخته شده است. این جریان ها اتصال عملیات فایل از طریق Pipline را تسهیل می کنند. gulp سیستم فایل را می خواند و داده های مورد نظر را از یک افزونه تک منظوره به دیگری از طریق اپراتور ()pipe. منتقل می کند و یک بار کار را انجام می دهد. تا زمانی که تمام افزونه ها پردازش نشوند، فایل های اصلی تأثیر نمی پذیرند. می توان آن را پیکربندی کرد تا فایل های اصلی را تغییر داده یا فایل های جدید ایجاد کند. این توانایی انجام کارهای پیچیده را از طریق پیوستن به افزونه های بیشمار آن اعطا می کند. کاربران همچنین می توانند افزونه های خود را برای تعریف تسک های خود بنویسند. بر خلاف سایر task runner ها که وظایف را با پیکربندی انجام می دهند، gulp برای تعریف تسک ها به دانش JavaScript و برنامه نویسی نیاز دارد. gulp یک سیستم ساخت است که به معنای جدا از اجرای وظایف است، همچنین قادر به کپی کردن فایل ها از یک مکان به مکان دیگر، گردآوری، استقرار، ایجاد اعلان ها، تست واحد، پوشش و غیره است.

تاریخچه گالپ (Gulp)

تمام مستندات Gulp توسط مجوز CC0 تحت پوشش قرار می گیرد. در ابتدا، Gulp v1.0.0 در تاریخ 15 ژانویه 2015 منتشر شد.

ویژگی های گالپ (Gulp)

  • minification و concatenation مینی سازی و تلفیق
  • استفاده از کد جاوا اسکریپت
  • تبدیل LESS یا SASS به کامپایل سی اس اس
  • مدیریت فایل در حافظه و افزایش سرعت با استفاده از پلت فرم Node.js

مزایای گالپ (Gulp)

استفاده آسان

با ترجیح دادن کد بر روی پیکربندی، بهترین شیوه های گره و حداقل سطح API را ساده می کند.

ساختمان های کارآمد

با استفاده از قدرت جریان گره ها، gulp ساخت سریع را ارائه می دهد که پرونده های واسطه را روی دیسک نمی نویسد.

اکوسیستم با کیفیت

با اجرای دستورالعمل های دقیق، اطمینان دارید که افزونه های ساده باقی بمانند و مطابق آنچه انتظار می رود کار کنند.

  • سرعت بالا
  • کدنویسی و درک آسان
  • آسان برای تست برنامه های وب
  • پلاگین ها برای استفاده ساده هستند و آنها برای انجام یک کار در یک زمان طراحی شده اند.
  • انجام وظایف تکراری که بارها و بارها انجام می دهد از قبیل مینی سازی stylesheets، فشرده سازی تصاویر و غیره

معایب گالپ (Gulp)

  • وابستگی های زیاد نسبت به برخی task runner ها دارد.
  • با استفاده از پلاگین Gulp نمی توانید چند کار را انجام دهید.
  • پیکربندی آن نسبت به برخی از task runner های دیگر تمیز نیست.

عملیات

Task runner ها مانند Gulp و گرانت به جای npm در Node.js ساخته شده اند، زیرا اسکریپت های اساسی npm هنگام اجرای وظایف چندگانه ناکارآمد هستند. با این وجود برخی از توسعه دهندگان اسکریپت npm را ترجیح می دهند، زیرا برای پیاده سازی آن، راه های متعدد، ساده و آسان وجود دارد. Grunt وظایف را با تبدیل فایل ها و صرفه جویی در موارد جدید در پوشه های موقت اجرا می کند و خروجی یک کار به عنوان ورودی برای دیگری و غیره گرفته می شود تا زمانی که خروجی به پوشه مقصد منتقل شود. این شامل بسیاری از تماس های I / O و ایجاد بسیاری از فایل های موقت است. در حالی که Gulp از طریق سیستم فایل به صورت streams به هیچ یک از این مکان های موقت نیاز نداشته و با کاهش تعداد تماس های I / O عملکرد را بهبود می دهد.

گالپ برای اجرای Task ها از یک رابط خط فرمان (CLI) استفاده می کند و نیاز به package.json و gulpfile.js یا یک gulpfile در دایرکتوری ریشه پروژه است. در gulpfile پلاگین ها بارگذاری می شوند و وظایف تعریف می شوند. ابتدا، تمام ماژول های لازم لود می شوند و سپس وظایف در gulpfile تعریف می شود. تمام پلاگین های لازم در gulpfile مشخص شده اند و روی devDependencies نصب می شوند. وظایف پیچیده با استفاده از زنجیره پلاگین ها با کمک اپراتور pipe تعریف می شود.

مقایسه گالپ (Gulp) با گرانت (Grunt)

شباهت ها

اکنون که شما می دانید گالپ و گرانت چه کاری می توانند انجام دهند، ما در مورد نحوه انجام آنچه انجام می دهند بحث خواهیم کرد. هر دو ابزار Task runner هستند که از Node.js استفاده می کنند، که یک محیط ران تایم اوپن سورس JavaScript است که برای توسعه ابزارها و برنامه ها استفاده می شود. Grunt و Gulp هر دو همچنین از پلاگین ها برای انجام کارهایی که به آنها نیاز دارید، استفاده میکنند و برای اتوماسیون برای شما هستند. هر دو ابزار برای ساختن وظایف از فایل های js. استفاده می کنند. برای Grunt، شما از gruntfile.js استفاده می کنید و برای Gulp، از یک gulpfile.js استفاده می کنید. همچنین می توانید به جای استفاده از یک تابع، جریان هایی را با grunt.task و gulp.task تعریف کنید.

برخی از متداول ترین کارهایی که هر ابزار می تواند انجام دهد و یا به طور خودکار انجام می شود عبارتند از:

  • فشرده سازی فایل های تصویری
  • از بین بردن دیباگر و توضیحات کنسول از اسکریپت ها
  • به حداقل رساندن، جمع بندی و تمیز کردن CSS و JavaScript
  • روکش کد برای خطاها
  • کامپایل فایل های LESS
  • اجرای تست واحد
  • ارسال به روزرسانی به سرور تولید
  • به روزرسانی پایگاه داده

با این حال، به لطف توانایی هر کسی برای نوشتن پلاگین ها، که هزاران مورد آن هم برای Gulp و Grunt وجود دارد، انواع مختلفی از فرآیندهای دیگر وجود دارد که این ابزارها می توانند خودکار سازی کنند. مواردی مانند حفظ مضامین WordPress، تغییر نام فایل ها، اضافه کردن ویژگی های اسناد مبتنی بر XML و مقایسه فایل های منبع و مقصد، همه کارهایی هستند که می توان با هر یک از این ابزارها کار کرد.

تفاوت ها

در حالی که هر دو ابزار می توانند بسیاری از کارهای مشابه را انجام دهند، تفاوت عمده در مقایسه Grunt و Gulp در نحوه انجام آنها است. اولین تفاوت مهم در این است که Gulp برای استفاده از یک سری پلاگین ها طراحی شده است که هرکدام یک کار را انجام می دهند. هر افزونه برای Gulp با هدف انجام یک کار بسیار خوب نوشته شده است. در حال حاضر، رجیستری افزونه Gulp شامل 2774 افزونه مختلف برای اهداف مختلف بود. از طرف دیگر Grunt از افزونه هایی استفاده می کند که غالباً همزمان چندین کار را انجام می دهند. این بدان معنی است که بسته به نوع ابزاری که استفاده می کنید فرایند ایجاد افزونه بسیار متفاوت است. در حال حاضر، رجیستری افزونه Grunt شامل 6013 افزونه است که مقدار قابل توجهی بیشتر از Gulp است.

    آیا این نوشته را دوست داشتید؟