تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۷ شهریور ۱۳۹۵

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

grund

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

npm install grunt-contrib-connect --save-dev

بعد از اینکار اینتر میزنیم: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 در حال حاضر بصورت زیر هست:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Grunt project</title>

		<!-- bower:css -->
		<link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
		<!-- endbower -->
	</head>
	<body>
		<h1>This is a sample project for grunt</h1>

		<!-- bower:js -->
		<script src="../bower_components/jquery/dist/jquery.js"></script>
		<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
		<!-- endbower -->
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Grunt project</title>

		<!-- bower:css -->
		<link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
		<!-- endbower -->
		<link rel="stylesheet" href="./css/import.min.css" media="screen">
	</head>
	<body>
		<h1>This is a sample project for grunt</h1>

		<!-- bower:js -->
		<script src="../bower_components/jquery/dist/jquery.js"></script>
		<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
		<!-- endbower -->
	</body>
</html>

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

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

@import url(css1.css);
@import url(css2.css);
body {
    background-color: #f00;
}

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

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

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

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

موفق باشید

یا علی

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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