ادغام پکیج gulper به فریم ورک وب

ادغام پکیج gulper به فریم ورک وب

امروزه با وجود ابزارهایی مدرن مثل Gulp و Grunt مدیریت assets در بخش front-end بسیار آسان و انعطاف پذیر شده است. با نوشتن تسک‌های مناسب با این ابزارها می توانیم فایل های Sass / Less را پردازش کرد و در خروجی فایل‌های Css اداغام شده، بهینه شده، اعتبار سنجی شده را داشته باشیم. همانند این عمل بر روی فایل های جاوا اسکرپیت و تصاویر نیز صورت می گیرد. با استفاده از این ابزارها و پکیج‌های آنها می توانید تسک‌های بسیار انعطاف پذیری داشته باشید.

این پست درباره نوشتن Task نیست، اگر با این نوع ابزارها آشنا نیستید پیشنهاد می شود به مستندات یا پست هایی که در این رابطه در بابون قرار داده شده سری بزنید.

 

Github

معرفی پکیج Gulper

استارتر کیت هایی مثل yeoman و slushjs از ابزارهایی مثل گالپ برای مدیریت Front-End خود استفاده می کنند. حتی فریم ورک لاراول نیز گالپ استفاده می کند و آن را Elixir نامیده است.

از آنجایی که از فریم ورک Symfony برای پروژهای php استفاده می کنم، تصمیم گرفتم ابزاری ساده برای مدیریت assets های پروژه خود آماده و منتشر کنم. البته فریم ورک سیمفونی ابزار Assetic را دارا است اما انعطاف پذیری بالایی ندارد و پیشنهاد می شود از گالپ یا گرانت استفاده شود (در پست های آینده روش ادغام این پکیج با سیمفونی نشان داده خواهد شد).

در این پست فرض شده است که خواننده حداقل آشنایی کافی با جاوا اسکریپت و نصب پکیج های nodejs را دارد.

نصب و راه اندازی پکیج

راه اندازی پکیج بسیار ساده است. اگر به ریپازیتوری gulper مراجعه کنید مراحل نصب را خواهید دید.

ابتدا دستورات زیر را در خط فرمان اجرا کنید تا gulp و bower نصب شود:

gulper را از ریپازیتوری دانلود کرده و وارد دایکتوری تازه ایجاد شده شود و دستور زیر را اجرا کنید تا وابستگی های برنامه در دایرکتوری node_modules دانلود و نصب شود (پیشنهاد قبل از اجرا دستور از پراکسی استفاده کنید تا تمام پکیج ها به خوبی دانلود شوند).

و به دنبال آن دستور:

gulper بطور پیشفرش bootstrap و font-awesome و jquery استفاده می کنید شما به سلیقه خود می توانید با فریم ورک های دیگر جایگزین کنید.

این پکیج فعلا تنها فایل های scss زا کامپایل و به فایل های css تبدیل می کند. شما با تغییر در کد می توانید از less نیز استفاده کنید.

دو دستور برای گالپ تعریف شده است:

  1. gulp – کامپایل و بهینه سازی ریسورس‌های داخل دایکتوری assets و ایجاد و انتقال ریسورس‌های کامپایل شده به دایرکتوری dist
  2. gulp watch – اجرای دستور کامپایل وقتی تغییر در کدها دیده شود

یکی از ویژگی هایی که این پکیج دارد این است که وقتی می خواهید یک پلاگین خارجی که سورس آن نیز در ریپازیتوری Bower قرار دارد را به برنامه خود اضافه کنید تنها کافیست پکیج مورد نظر را در bower پیدا و نصب کنید. به عنوان مثال می خواهیم پلاگین Slick Carousel را نصب کنیم:

دقت داشته باشید که –save به انتها اضافه شده باشد. حال وقتی دستور gulp را در خط فرمان اجرا کنید بطور خودکار سورس slick کامپایل و به assets ما اضافه می شود. سورس‌های خارجی در فایل assets/styles/main.scss اضافه می شود.

همچنین اسکریپت های سفارشی js خود را نیز می توانید در فایل main.js قرار دهید.با این روش دیگر لازم نیست هر پکیجی که خواستیم به ریسورس خود اضافه کنیم دستور آن را بطور دستی به تسک های gulp اضافه کنیم.توجه کنید که این بخش از بلاکی که مخصوص پکیج های bower است را نمی توانید دستی چیزی اضافه کنید.

حال اگر بخواهیم به سادترین روش ممکن فایل های کامپایل شده را به پروژه لینک کنیم. متوانیم فایل هایی که در پوشه dist کامپایل شده اند را به index.html لینک کنیم.