آغاز به کار با Grunt

آغاز به کار با Grunt

Grunt ابزاری می باشد که به طور چشمگیری می تواند در توسعه برنامه شما کمک کند. با استفاده از تعدادی افزونه ‘گرانت’ می توان به طور خودکار کارهایی را انجام داد. مثل کامپایل کردن فایل های ‘Sass’ و ‘CoffeeScript’ یا  بهینه سازی عکسها و معتبر ساختن فایل های ‘جاواسکریپت’ با JSHint. شاید شما قبلا از ‘CodeKit’ یا ‘Hammer’ برای انجام این کارها استفاده می کرده اید. من فکر می کنم هر دو این برنامه ها عالی هستند و در گذشته به طور گسترده استفاده می شدند.ولـــی برنامه ‘Grunt’ برتری بیشتری نسبت به این ابزار دارد. مقدار زیادی افزونه وجود دارد که کمک می کند همه چیز را ادغام کنیم، از بهینه کردن عکس ها گرفته تــــا CSS هــا. در این آموزش یاد می گیریم که چگونه ‘Grunt’ را نصب و چگونه ‘Compass’ و ‘Sass’ و ‘JSHint’ و ‘CSS’ را پیکربندی کنیم.

نصب ‘Grunt’ از طریق رابط خط فرمان

اولین کاری که باید انجلم دهیم نصب Grunt از طریق خط فرمان می باشد، توجه داشته باشد که این ابزار فقط از طریق خط فرمان سیستم شما قابل اجرا می باشد. ‘گرانت’ , ‘افزونه های گرانت’ هر دو از npm استفاده می کنند، اگر برنامه Node.js را بر روی سیستم ندارید از طریق سایت Node.js اقدام به دانلود و نصب کنید. npm هم در هنگام نصب Node.js نصب می شود. وقتی که Node.js و npm را نصب کردید حال می توان grunt-cli را نصب کرد.

مشخصه ی ‘-g’ برنامه گرانت را به طور کلی (globally) بر روی سیستم نصب می کند بنابر این دستور را شما فقط یک بار لازم است وارد کنید.

ایجاد یک فایل ‘package.json’ 

به منظور مدیریت بهتر نیازمندی های پروژه بهترین راه ایجاد فایل ‘package.json’ می باشد. اگر شما با محیط توسعه Rails آشنا باشید شاید با فایل Gemfile آشنا باشید. فایل package.json باید در ریشه ی پروژه شما قرار بگیرد. این فایل نام پروژه، نسخه و نویسنده پروژه را تعریف می کند. package.json هم چنین نیازمندی های پروژه را مدیریت می کند. مشخصه devDependencies در زیر دیگر پکیج هایی که در پروژه خود لازم است را تعریف می کند.

توجه داشته باشید این یک مثال خیلی ساده از فایل package.json می باشد، برای مشاهده لیست جامع مشخصه ها به اینجا مراجعه کنید


وقتی فایل package.json را درست کردید حال می توان تمام نیازمندی های برنامه را که مشخص کرده اید را تنها با دستور npm install نصب کنید.

این دستور تمام پکیج ها را در دایرکتوری node_modules در پوشه پروژه ذخیره می کند. برای اضافه کردن پکیج دلخواه می توانید دوباره از دستور npm install و به دنبال آن از نام پکیج مورد نظر استفاده کنید.

استفاده از مشخصه –save-dev به طور خودکار پکیج مورد نظر را در فایل package.json ذخیره می کند. یک ترفند ساده که در زمان صرفه جویی می کند، تا لازم نباشد به طور دستی وارد کرد.

مشخص کردن وظایف در فایل Gruntfile

در مرحله بعد شما نیاز به ساخت Gruntfile.js دارید. اینجا جایی است که وظایف تعریف و پیکربندی می شوند تا ‘گرانت‘ اجرا می کند. حال نگاهی به یک مثال ساده که از یک افزونه استفاده شده و در فایل package.json است می اندازیم:

تمام کد ‘گرانت‘ شما باید در یک تابع کلی wrapper قرار گیرد. این قرارداد لازم می باشد، بنابراین ‘گرانت’ متوجه این موضوع می شود.

 پیکربندی پروژه

قدم بعدی در فایل Gruntfile پیکربندی پروژه می باشید. این کار با متد grunt.initConfig راه اندازی می شود. خط

 

اطلاعات پیکربندی را از فایل package.json وارد می کند. (که قبلا این فایل را ایجاد کرده اید) بسیاری از افزونه های ‘Grunt’ در این داده ها برای چیزهای مثل نام و نسخه پروژه استفاده می کنند.

 

پیکربندی وظایف

هر وظیفه ‘گرانت’ دارای تنظیمات خاص خود می باشد که در شیء grunt.configInit قرار می گیرد. نام مشخصه شامل تنظیمات وظایف تقریبا همیشه هم نام با grunt task می باشد.

اجازه دهید که پیکربندی وظایف را از طریق Gruntfile را شروع کنیم.

وظیفه ی watch، اجرا کردن دیگر وظایف وقتی که فایلی تغییر می کند. این کار مفید است وقتی می خواهیم فایلهای Sass را کامپایل و به CSS تبدیل کرد. تنظیمات برای watch به صورت زیر می باشد.

در این تنظیمات ما دو هدف متفاوت تعریف کرده ایم. اولی مسئولیت رسیدگی به فایل های Sass را دارد وقتی که تغییرات روی می دهند، دومی  مسئولیت رسیدگی به فایل های جاواسکریپت را بر عهده دارد. مشخصه ی files برای هر دو اهداف می باشد، که مشخص می کند که کدام از فایل ها باد توسط watch مورد برسی قرار گیرد. با علامت (*) نیز می توان فایلها را به صورت جداگانه ذخیره کرد. مشخصه tasks یک آرایه از وظایف ‘گرانت‘ تعریف می کند تا وقتی هر کدام از فایلها تغییر داده شدند، این آرایه از وظایف اجرا شوند.

فایل Gruntfile از افزونه grunt-contrib-compass برای کامپایل کردن فایلهای Sass استفاده می کند، به طوری Compass را به خوبی اضافه کرده اید. اگر میل به استفاده از این افزونه را ندارید می توانید از pure sass plugin استفاده کنید، البته شما برای اجرای آن به Ruby و Sass and Compass نیاز دارید.

پیکربندی برای افزونه compass ساده و سرراست می باشد. در مشخصه options شما می توانید دایرکتوری فایلهای Sass و دایرکتوری فایلهای CSS را مشخص کنید. مشخصه outputStyle این اجازه را به ما می دهد که فایلهای Sass چگونه کامپایل شوند. در مثال بالا مشخص شده است که CSS هـــا بهینه شده اند.

در مرحله بعد نگاهی به وظایف JSHint می اندازیم. اگر تا به حال از JSHint استفاده نکرده اید باید بگویم که یک ابزار عالی برای چک کردن خطاها در جاواسکریپت است. همچنین می تواند استفاده شود برای یک سبک راهنما که این کار باعث می شود کد به راحتی قابل خواند باشد.

مشخصه all در انجا نسان می دهد که کدام فایل باید توسط JSHint اجرا شود. علامت ستاره (*) نیز تمام فایلهای جاواسکریپت را در دایرکتوری assets/js انتخاب می کند.

می توانید options را مشخص کنید که JSHint باید از مشخصه options استفاده کند. می توانید به طور مستقیم در Gruntfile یا به صورت جداگانه در فایل .jshintrc وارد کنید.

در زیر مثالی از فایل .jshintrc دیده می شود:

 برای دیدن دیگر گزینه های JSHint می توانید اینجا را مشاهده کنید.

 


 

در این آموزش ما فقط بخشی از گزینه ها را پوشش می دهیم. برای اطلاعات بیشتر می توان به لینک های زیر مراجعه کنید:

Watch Documentation

Compass Documentation

JSHint Documentation

 

بارگذاری پلاگین ها

در بخش دیگر فایل Gruntfile افزونه هایی که مایل به استفاده از آن هستید را نشان می دهد. این کار لازم است که در فایل package.json مشخص شود و توسط npm install نصب شود. اگر بدون نصب افزونه های اقدام به اجرا grunt کنید، با خطا مواجه می شوید.

 

ثبت وظایف پیشفرض

متد grunt.registerTask برای مشخص کردن وظایف پیشفرض استفاده می شود، تا هنگام اجرا دستور grunt این وظایف اجرا شوند.

در پارامتر اول نام وظیفه را مشخص می کنیم که در این مورد default می باشد. در پارامتر دوم آرایه ای از وظایف را که می خواهیم اجرا شوند مشخص می کنیم. دستور watch که قبلا وارد کرده ایم compass و jshint را اجرا می کند، بنابراین فقط احتیاج به مشخص کردن watch داریم.

 

اجرای Grunt

بنابراین تمام این مسائل پیکربندی عالی می باشند، ولی در واقع چگونه grunt را اجرا کنیم؟

وارد کردن دستور grunt در ترمینال خود، تمام کارهای مشخص شده به عنوان وظایف پیشفرض اجرا می شوند.

حتی می توان به صورت جداگانه grunt را اجرا کرد.

 

اضافه کردن افزونه های جدید

حال که چگونگی کار با grunt را درک کردید، اجازه دهید افزونه ی دیگری را معرفی کنیم. این افزونه یک ابزار عالی می باشد که CSS را بدون نیاز به رفرش کردن مرورگر آپدیت می شود.

حال شورع به نصب grunt-browser-sync کنیم: استفاده از –save-dev به طور خودکار فایل package.json را آپدیت می کند.

شما احتیاج به بارگزاری افزونه در فایل Gruntfile دارید.

در ادامه تنظیمات لازم برای browserSync را در Gruntfile وارد کنید. این کار مشخص می کند که کدام از CSS هــا باید استفاده شوند. این افزونه بر روی عکسها، اسکریپتها هم می تواند کار کند.

در انجا گزینه ی watchTask را true قرار داده ایم، چون که از افزونه watch استفاده می کنیم. همانطور که فایل های Sass را کامپایل می کنیم، باید اطمینان حاصل کنیم که وظایف به درستی اجرا می شوند.

 

 

  • sina

    خیلی عالی بود
    ادامه بدین
    تشکر

    • پاتــریک

      مرسی 😉

  • یکم خودمونی تر و روان تر آموزش بدید بهتر میشه. یعنی از الفاظ درشت نمی خواد استفاده کنید.
    // مثل اینه که به جای 'این کار رو انجام دادم' بگید 'کار فوق را به عمل آوردم'! //
    مثلا نیاز نیست از بهجای استفاده از کلمات انگلیسی از معادل فارسی اون ها استفاده کنید چون کاررو سخت تر میکنه. میتونید تو پرانتز معادل فارسیش رو بگید یا بالعکس

    • پاتریک

      باشه چشم، اینو به حساب این بزارید که فارسی زبان مادری من نیست. 🙂
      از چند پست اخیر سعی کردم از زبان ساده استفاده کنم. حتما به این توصیه های شما توجه می کنم، و زمانی را هم برای ویرایش پست های قبلی کنار میزارم. مرسی از توجه و نظر شما. 😉

  • سعید

    عالی بود مهندس ، تو مایکروسافت کار کنی ان شالله :))