اجرا Gulp در لاراول با Elixir

اجرا Gulp در لاراول با Elixir

در پست طراحی سایت با لاراول – اعتبار سنجی فرم ما از سرور CDN برای بارگزاری فایل های بوت استراپ استفاده کردیم، اما همانطور که گفته بودم این روش گاه اوقات بهترین روش نمی باشد. در این پست که ادامه مجموعه آموزش لاراول است، ما یاد خواهیم گرفت که این عمل را با استفاده از Elixir و Gulp انجام دهیم.

 

Elixir

 

وقتی برنامه ای را توسعه می دهیم، فرآیندهای تکراری بسیاری وجود دارد:

 

  1. نوشتن اسکریپت
  2. تست اسکریپت نوشته شده
  3. نوشتن فایل sass
  4. کامپایل آن
  5. بهینه سازی و فشرده سازی و چندین عمل دیگر

 

مطمئنا ما می توانیم این وظایف را با gulp بنویسیم تا آنها را به خوبی برای ما اجرا کند، خبر خوب این است که، در Laravel 5 ویژگی جدیدی با نام Elixir اضافه شده است.

 

Elixir توسط توسعه دهنده معروف Jeffrey Way ساخته شده است که با gulp نوشته شده است، این ابزار وظایف ساده ای را همراه دارد:

 

  • کامپایل sass، less و فایل های coffee
  • الحاق (concat)
  • واحد تست و غیره

Elixir همچنین این اجازه را می دهد تا وظایف سفارشی خود را در gulp تعریف کنید و آن را به elixir اضافه کنید.

 

نصب پکیج ها

 

قبل از نصب بسته ها، با دستور gulp -v مطمئن شوید تا Gulp را بطور global نصب کرده اید، اگر اینطور نیست با دستور زیر آن را نصب کنید:

 

 

برای استفاده از elixir، به ریشه پروژه لاراول خود مراجعه کنید و دستور زیر را اجرا کنید:

 

 

توجه داشته باشید که اگر ویندوز برای توسعه برنامه استفاده می کنید باید دستور npm install را همراه با --no-bin-links اجرا کنید:

 

 

اگر به فایل package.json مراجعه کنید خواهید دید که پکیج های زیر بطور پیشفرض در آن اضافه شده اند، تنها کافیست با دستور npm install آنها را نصب کنیم، همانطور که می دانیم این بسته ها پس از نصب در دایرکتوری node_modules ذخیره می شوند:

 

 

اجرا Elixir

 

همانطور که می دانیم Elixir با Gulp ساخته شده است، برای اجرا وظایف (Tasks) اکسیر تنها کاری که لازم است انجام دهید اجرا دستور gulp در ترمینال خود است. علاوه بر این با اضافه کردن پارامتر --production به انتهای دستور gulp می توانید فایل های CSS و JavaScript خود را بهینه سازی کنید تا از حجم فایل ها کاسته شود، این عمل را وقتی انجام دهید که مراحل ساخت پروزه تمام شده است و برنامه آماده است تا به عنوان یک محصول نهایی عرضه شود!

 

 

طراحی سایت با لاراول کامپایل فایل sass

 

زیر نظر گرفتن تغییرات

 

از آنجایی که هر با اجرا دستور gulp در خط فرمان ناخوشایند است، بهتر است که از دستور gulp watch استفاده کنیم. این دستور باعث می شود با اجرا در خط فرمان، هر گونه تغییرات (ویرایش کردن کدها) در فایل را شناسایی کند و بطور خودکار فایل جدید کامپایل شود:

 

 

کامپایل Sass و Less

 

فایل gulpfile.js را باز کرده تا چیزی شبیه به زیر مشاهده کنید:

 

 

در دستور فوق، Elixir فرض کرده است که شما فایل های sass را در resources/assets/sass قرار داده اید!

 

حال که elixir را نصب کردید، زمان آن فرا رسیده است که فایل sass با نام app.sass را که در آدرس resources/assets/scss قرار گرفته شده است را کامپایل کنید. توجه کنید پس از مراحل کامپایل، خروجی در public/css ذخیره خواهد شد.

 

برای کامپایل فایل های less نیز به همین ترتیب انجام می دهیم، اما بجای اینکه در resources/assets/scss قرار دهیم باید آن را در پوشه resources/assets/less قرار دهیم و آنگاه کامپایل کنیم:

 

 

شاید این سوال پیش بیاید که اگر بخواهیم فایل های sass یا less دیگر را به پروژه اضافه کنیم چه؟ خوب! کار بسیار راحت است، برای این کار از نمونه کد زیر استفاده می کنیم:

 

 

توجه کنید که از همین روش برای کامپایل فایل های less نیز می شود استفاده کرد تنها کافیست متد و پسوندها را عوض کرد!

 

شما حالا با استفاده از این روش می توانید چندین فایل less یا scss را کامپایل کنید و خروجی را در آدرس دلخواه خود ذخیره کنید.

 

اگر دوست دارید چند فایل CSS را با هم دیگر ترکیب کنید (یعنی تمام فایل را به یک فایل تبدیل کنیم) کافیست از متد styles استفاده کنید. آدرس های فایل ها را به عنوان پارامتر انتقال دهید و آدرس خروجی که می خواهید فایل نهایی در آن ذخیره شود را مشخص کنید:

 

 

نصب فریم ورک Bootstrap

 

ما در این مجموعه از آموزش لاراول تصمیم گرفته ایم که از Bootstrap برای ظاهر وب سایت خود استفاده کنیم. اگر توجه کرده باشید لاراول بطور پیشفرض فریم ورک بوت استراپ را در فایل package.json اضافه کرده است، و با دستور npm install آن را نصب کردیم. پوشه نصب شده بوت استراپ را در دایرکتوری node_modules می شود پیدا کرد.

 

 

اگر دوست دارید از نسخه less بوت استراپ در پروژه خود استفاده کنید تنها کافیست خط زیر را در package.json پیدا کرده:

 

 

و با خط زیر جایگزین کنید و با اجرا مجدد npm install آن را نصب کنید:

 

 

از آنجایی که در بخش های قبل فریم ورک Bootstrap را از طریق CDN به پروژه اضافه کردیم، حال با مراحل فوق می توانیم آدرس بوت استراپ را به پروژه لینک کنیم!

 

فایل resources/views/layout.blade.php را که قبلا در پروژه لاراول خود ایجاد کرده ایم را با ویرایشگر خود باز کرده و خط زیر را:

 

 

با این دستور جایگزین کنید:

 

 

همانطور که مشخص است این دستور فایل نهایی کامپایل شده را به پروژه لینک می کند. حال پروژه لاراول خود را دوباره با دستور php artisan serve روشن کنید و خروجی را مشاهده کنید. 🙂

 

طراحی وب سایت با فریم ورک لاراول

 

همانطور که مشاهده می کنید به جای بارگذاری از سرور CDN ما توانستیم فایل های بوت استراپ را از پروژه خود بارگزاری کنیم. 😉

 

فایل های جاوا اسکریپت

 

تا اینجا stylesheets را به پروژه اضافه کردیم، حال نوبت اضافه کردن فایل های جاوا اسکریپت است. مراحل انجام کار تقریبا بصورت مراحل قبل است.

 

اضافه کردن jquery

 

از آنجایی که بوت استراپ برای اجرا فایل های جاوا اسکریپت خود به jquery نیازمند است، پس باید آن را به پروژه اضافه کنید. شما از چند روش می توانید این کار را انجام دهید، به عنوان مثل به سایت jquery.com رفته و بطور دستی فایل jquery را دانلود کرده و آن را در آدرس resources/assets/js/ قرار دهید. اما در این جا من از composer برای اضافه کردن jquery استفاده می کنم:

 

 

توجه داشته باشید jquery را در آدرس vendor/components/jquery/ دانلود می شود. حال فایل jquery.js را به آدرس resources/assets/js منتقل کنید.

 

برای اینکه فایل های جاوا اسکریپت بوت استراپ را به پروژه اضافه کنیم، می بایست به آدرس node_modules/bootstrap-sass/assets/javascripts/ رفته و پوشه bootstrap و فایل bootstrap.js را به آدرس resources/assets/js منتقل کنید. توجه داشته باشید که همچنین می توانید پوشه fonts در آدرس node_modules/bootstrap-sass/assets/ را هم به resources/assets/ منتقل کنید تا فونت ها هم به پروژه اضافه شود. شما می توانید برای تمرین به جای اینکه از فونت های پیشفرض بوت استراپ استفاده کنید، از فونت ها Font Awesome استفاده کنید. 🙂

 

حال برای کامپایل فایل های js خود از دستور زیر استفاده می کنیم، این دستورات را بصورت قبل در gulpfile.js اضافه کنید:

 

 

حال دستور gulp را دوباره در خط فرمان اجرا کنید تا عملیات کامپایل آغاز شود.

 

حال با همان روشی که فایل css را به پروژه اضافه کردیم استفاده می کنیم. به فایل views/layout.blade.php مراجعه کنید و خط زیر را پیدا کنید:

 

 

آن را با خط زیر جایگزین کنید:

 

 

خوب امیدوارم تا اینجا پروژه لاراول خود بدون مشکلی درست کرده باشید و چیزهای جدید یاد گرفته باشید. توجه کنید که مطالب فوق فقط برخی از امکانات Elixir را تحت پوشش قرار داده است، شما می توانید به مستندات لاراول، بخش Elixir رفته و دستورات جدیدی را کشف کنید. 🙂

 

خلاصه

 

به عنوان یک طراح وب سایت و توسعه دهنده وب، شاید از task runner های مختلفی مثل gruntjs استفاده کرده باشید، برای آن دسته از افرادی که با task runner آشنا نیستند، یک task runner یک ابزار ساده برای خودکار سازی عملیات تکراری مانند، concatenation، minification، واحد تست و غیره است.

 

چندین task runner مختلف در github وجود دارد که هر توسعه دهنده ای می تواند از آنها استفاده کند، اما محبوب ترین آنها gulp و grunt است که توسط بیشتر توسعه دهنده ها مورد استفاده قرار می گیرد.

 

برای این آموزش، gulp مورد نیاز است اگر با این ابزار آشنا نیستید پیشنهاد می کنم لینک های زیر را مطالعه کنید:

 


 

  • محمد

    راستی داداش امروزتو پروفایلتون دیدم که تولدتون توی این ماهه.
    Happy Birthday!

    • پاتریک

      آقا خیلی ممنون، دمت گرم، لطف دارید، خوشحال شدم! 🙂 😉