آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 38) - اتوماتیک رفرش کردن مرورگر - قسمت 1

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-contrib-connect صحبت کنیم. با استفاده از این ابزار میتونیم به راحتی محیط کدنویسی رو به مرورگر متصل کنیم و هر زمان که کدها رو تغییر میدیم، خروجی بصورت اتوماتیک در مرورگر به نمایش گذاشته بشه و لازم نباشه که هر بار اینکار بصورت تکراری و دستی انجام بشه. با استفاده از این روش خیلی در زمان شما صرفه جویی میشه و میتونین سریع تر و بهتر کدنویسی کنید. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

بعد از اینکار اینتر میزنیم:grunt install connect

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install connect 2

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install connect 3

با استفاده از پلاگین connect میتونین یک سرور محلی رو اجرا کنید و بر روی اون کار کنید. حالا شما میتونین از قدرت پلاگین watch که در جلسه گذشته گفته شد استفاده کنید و با ترکیب کردن این دو پلاگین به هدف مورد نظر برسید. با این عمل میتونین کاری کنید که هر زمان فایل مورد نظرتون دچار تغییر قرار گرفت، وظایف مرتبط با اون اجرا بشه و خروجی ها در مرورگر بصورت اتوماتیک نمایش داده بشن.

برای اینکار در ابتدا باید فایل index.html رو که قبلا ساخته بودیم و در پوشه final گذاشتیم رو باز کرده و تغییراتی رو در اون بوجود بیاریم. این فایل، همون فایلی هست که ما اون رو در مرورگر باز میکنیم و پلاگین grunt-contrib-connect اون رو بصورت اتوماتیک با توجه به تغییرات، Refresh میکنه. فایل index.html در حال حاضر بصورت زیر هست:

حالا برای اینکه این پلاگین رو تست کنیم و ببینیم که کار گفته شده رو به درستی انجام میده یا خیر، یکی از فایلهای CSS که در پوشه final قرار داره رو درون اون وارد یا include میکنیم. بصورت زیر:

دیدید که درون پوشه css، فایل import.min.css رو وارد کردیم. همونطور که میدونید این فایل خودش خروجی یکی از وظایف از قبل تعریف شده بنام cssmin هست. اگر وظیفه مورد نظر رو ببینیم بصورت زیر هست:grunt install connect 5

این وظیفه رو در جلسات قبلی توضیح دادیم. اگر در بالا ببینید فایل import.css بعنوان ورودی هست و تبدیل به import.min.css میشه. فایل import.css ورودی بصورت زیر هست:

این فایل خودش دو فایل دیگه رو درون خودش import میکنه و به معنی اینه که اگر هر کدوم از این سه فایل دچار تغییر قرار بگیرن، وظیفه cssmin اجرا میشه و خروجی import.min.css بصورت minify و فشرده شده، تولید میشه.

در جلسه بعد تغییرات مورد نظرمون رو در وظیفه watch به وجود میاریم و همچنین وظیفه connect رو میسازیم و کارهای مورد نظرمون رو انجام میدیم.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

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

موفق باشید

یا علی

comment دیدگاه کاربران
Roohollah Taeb

با عرض سلام و تشکر از آموزش های شما
لطفا مثل بقیه سری های آموزشی در این لینک http://www.7learn.com/vip/vip-page#fLinks این مجموعه رو هم به صورت یه فایل پی دی اف کامل قرار بدید.
پیشاپیش ازتون ممنونم

سلام دوست عزیز
این درخواست رو برای آقای آوند ایمیل کنید باهاتون همکاری خواهند کرد
موفق باشید

بسیارعالی بود ممنون از مطالب 😛 بسیار زیباتون

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.