نصب و راه اندازی YEOMAN

نصب و راه اندازی YEOMAN

با وجود ابزارهای عالی برای توسعه دهندگان وب این روزها درک کردن اینکه چگونه همه ی این ابزارها با هم دیگر در ارتباط هستند شاید کمی مشکل به نظر برسد. تصمیم گیری برای داشتن یک گردش کار (workflow) که شما را راضی نگه دارد یک تلاش کاملا شخصی است، اما شروع کار همیشه آسان نیست. هدف Yeoman حل این مشکلات با تعریف یک workflow برای ایجاد برنامه های کاربردی مدرن تحت وب است. در این آموزش شما می توانید از قدرت Yeoman برای ساخت برنامه فوق العاده وب استفاده کنید.

کامپوننت های Yeoman

Yeoman خود متشکل از سه ابزار می باشد: Yo – Grunt – Bower. ترکیب این ابزارها با یکدیگر ابزاری به وجود می آورد که هر توسعه دهنده ی وبی می تواند برای ساخت پروژه جدید از آن استفاده کند.

آموزش yeoman

  • Yo ابزاری برای دسته بندی کردن برنامه می باشد. می تواند منابع متداول در پروژه مثل فایل‌های css و JavaScript را ایجاد کند. در واقع Yo راه حلی برای ایجاد تمام کدهای boilerplate است که برای ساخت پروژه خود به آن نیاز داریم.
  • Grunt ابزاری می باشد که به طور خودکار فایل های Sass را کامپایل می کند یا تصاویر را بهینه می کند، وقتی به عنوان بخشی از پکیج Yeoman استفاده شود، Grunt مسئولیت رسیدگی به ساخت، تست و پیش نمایش پروژه شما را به عهده می گیرد.
  • Bower ابزاری برای مدیریت پکیج (package manager) در وب می باشد. کمک می کند تا وابستگی های (dependencie) برنامه را کنترل کند تا به طور دستی مجبور به دانلود آنها به صورت جداگانه نشوید.

هر کدام از این ابزارها توسط کامیونیتی های خودشان بصورت جداگانه توسعه داده می شوند.

 

در این آموزش فرض شده است که شما حداقل دانش کار با Grunt و Bower را دارید. اگر تا حالا از این ابزارها استفاده نکرده اید، می توانید به آموزشهای زیر نگاهی بیندازید.

 

نصب و راه اندازی Yeoman

برای نصب پکیج Yeoman که متشکل از چندین ابزار است نیاز دارید که بر روی سیستم Node.js را از قبل نصب کرده باشید.

 

برای نصب Node پیشنهاد می شود نصب Node.js و NPM در Linux را مطالعه کنید.

 

اگر از ویندوز استفاده می کنید پیشنهاد می شود از Git استفاده کنید.

 

وقتی که مطمئن شدید nodejs نصب است، حال می توانید YO را نصب کنید. این دستور باعث می شود Yo، Grunt، Bower نصب شود.

دستور بالا را در خط فرمان سیستم خود یا در برنامه Git وارد کنید.

نصب yo

اگر مراحل قبل را به درستی انجام داده باشید و برنامه های نام برده شده بر روی سیستم به درستی نصب شده باشد باید اطلاعات نصب شما شبیه عکس زیر باشد:

آموزش node.js

 

 نصب و راه اندازی جنریتور‌ها

Yo با جنریتور‌ها کار مکند تا برنامه را دسته بندی کند. این جنریتور‌ها ساختار برنامه و هم چنین ابزارهای وابسته ای را که به آن نیاز دارید را تعریف می کند.

جنریتور‌ها در طیف گسترده ای از برنامه های مختلف وجود دارند، از یک برنامه استاندارد وب گرفته تا برنامه های Angular.js یا Backbone. برخی از محبوب ترین جنریتور‌ها در لیست زیر آمده است. شما می توانید لیست کامل جنریتور‌ها را در Yeoman Github مشاهده کنید.

 

جنریتور‌ها با استفاده از npm نصب می شوند. در این آموزش ما بر روی برنامه های استاندارد وب تمرکز می کنیم.

ساخت برنامه وب مدرن

 

استفاده از جنریتور‌ها

وقتی که شما جنریتور‌ها را نصب کردید می توانید با تایپ کلمه yo و به دنبال آن نام generator خود در خط فرمان برنامه را اجرا کنید.

این کار برنامه شما را در دایرکتوری جاری دسته بندی می کند. شاید شما بخواهید یک پوشه ی جدید در یک دایرکتوری دیگر داشته باشید. این کار را قبل از وارد کردن نام yo انجام دهید.

آموزش برنامه نویسی وب

هنگامی که شما از طریق خط فرمان با برنامه در تعامل هستید، این کار شاید چند دقیقه به طول انجامد تا نیازمندی های برنامه را مشخص کند.

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

طراحی سایت با yeoman

پوشه ی app شامل  تمام فایل هایی است که برای برنامه واقعی نیاز است. در این پوشه تمام فایل های HTML و JavaScript و فایل های Sass را پیدا می کنید. همچنین پوشه ای به نام bower_components نیز ایجاد شده است. این پوشته تمام نیازمندی های برنامه مثل jQuery, Modernizr را دارا می باشد. شما حتی می توانید بسته هایی بیشتر اضافه کنید:

دایرکتوری test شامل راه انداز ابتدایی Hello World شما می باشد.web app generator از mocha  برای تست جاواسکریپت استفاده می کند.

بقیه فایل ها در دایرکتوری  برای تنظیمات Bower و Grunt و Git استفاده می کند.

اگر تا حالا از این ابزارها استفاده نکرداید شاید کمی گیج شوید. شاید بهتر باشد کمی وقت برای چگونگی کار با این ابزارها صرف کنید.

 

شروع برنامه

فایل Gruntfile شما یک سرور مجازی ایجاد می کند تا برنامه خود را مشاهده کنید. شما با استفاده از دستور زیر در خط فرمان می توانید برنامه را اجرا کنید.

وقتی سرور شروع به کار کند برنامه با مرورگر پیش فرض شما اجرا می شود. حتی می توانید با این آدرس http://127.0.0.1:9000 برنامه را اجرا کنید.

آموزش نصب gurnt bower yeoman

اگر با خطا مواجه شدید، فایل Gruntfile.js را باز کرده و پورت را تغییر دهید.

همانطور که قبلا دیدیم، جنریتور‌ها یک تست ساده را ایجاد می کنند که از Moch testing framework استفاده می کنند. برای اجرای تست خود می توانید به سادگی از test استفاده کنید که در Gruntfile تعریف شده است.
البته من در این آموزش چگونگی ساخت تست‌ها را پوشش نمی دهم. پیشنهاد می کنم برای اطلاعات بیشتر Mocha مراجه کنید.

 

ساخت برنامه شما به عنوان یک محصول

شما اول نیاز دارید که مطمئن شوید تمام فایل ها را به CSS و JavaScript کامپایل کرده اید. اگر شما ازCoffeeScript استفاده می کنید، بنابراین آنها توسط مرورگر درک می شوند. خوشبختانه Gruntfile شامل دستور build برای انجام این کار می باشد. برای استفاده از این دستور به سادگی دستور را در خط فرمان اجرا کنید.

اجرا grunt بدون مشخص کردن کاری، به صورت پیشفرض اجرا می شود. در این بخش grunt در مرحله اول کدهای JavaScript شما را به وسیله ی JSHint چک می کند، آنگاه Mocha tests را اجرا می کند، و در آخر دستور  build را اجرا می کند.

همانطور که فایل های  Sass کامپایل می شوند، دستور  build فایل های CSS و  JavaScript را الحاق (concatenate) و بهینه (minify) می کند.

وقتی اجرا build به پایان رسید در پروژه شما پوشه ای به نام  dist ایجاد می شود. این پوشه شامل تمام فایل هایی است که در سرور شما اجرا می شوند.


  • محمد

    سلام یه سوال مهم دارم
    با استفاده از yeoman و گرانت سایت رو طراحی میکنیم
    بعد این فایل ها مثل همین package.json و gruntfile.js و… وقتی سایت رو روی سرور اپلود می کنیم باید حذف بشند یا باید با همین فایل ها اپلود بشه؟

    • پاتریک درآواکیانس

      بله این فایل ها فقط برای محیط توسعه است و لازم به آپلود نیست!

  • Farhad

    Merci estefade kardam