آخرین مطالب
امکانات وب
در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
در این جلسه قصد داریم در مورد پلاگین grunt-contrib-connect صحبت کنیم. با استفاده از این ابزار میتونیم به راحتی محیط کدنویسی رو به مرورگر متصل کنیم و هر زمان که کدها رو تغییر میدیم، خروجی بصورت اتوماتیک در مرورگر به نمایش گذاشته بشه و لازم نباشه که هر بار اینکار بصورت تکراری و دستی انجام بشه. با استفاده از این روش خیلی در زمان شما صرفه جویی میشه و میتونین سریع تر و بهتر کدنویسی کنید. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:
npm install grunt-contrib-connect --save-dev |
بعد از اینکار اینتر میزنیم:
میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:
حالا باید این بسته رو درون gruntfile.js لود کنیم:
با استفاده از پلاگین connect میتونین یک سرور محلی رو اجرا کنید و بر روی اون کار کنید. حالا شما میتونین از قدرت پلاگین watch که در جلسه گذشته گفته شد استفاده کنید و با ترکیب کردن این دو پلاگین به هدف مورد نظر برسید. با این عمل میتونین کاری کنید که هر زمان فایل مورد نظرتون دچار تغییر قرار گرفت، وظایف مرتبط با اون اجرا بشه و خروجی ها در مرورگر بصورت اتوماتیک نمایش داده بشن.
برای اینکار در ابتدا باید فایل index.html رو که قبلا ساخته بودیم و در پوشه final گذاشتیم رو باز کرده و تغییراتی رو در اون بوجود بیاریم. این فایل، همون فایلی هست که ما اون رو در مرورگر باز میکنیم و پلاگین grunt-contrib-connect اون رو بصورت اتوماتیک با توجه به تغییرات، Refresh میکنه. فایل index.html در حال حاضر بصورت زیر هست:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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 میکنیم. بصورت زیر:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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 هست. اگر وظیفه مورد نظر رو ببینیم بصورت زیر هست:
این وظیفه رو در جلسات قبلی توضیح دادیم. اگر در بالا ببینید فایل 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 صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : آموزش استفاده از اسنپ چت,آموزش استفاده از اسپری تاخیری,آموزش استفاده از,آموزش استفاده از توییتر,آموزش استفاده از snapchat,آموزش استفاده از nomao,آموزش استفاده از تلگرام,آموزش استفاده از linkedin,آموزش استفاده از برنامه کرفس,آموزش استفاده از توالت فرنگی, نویسنده : استخدام کار 7learn بازدید : 539
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403