در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
در این جلسه قصد داریم در مورد پلاگین grunt-wiredep صحبت کنیم و با استفاده از اون کاری کنیم که بصورت اتوماتیک بسته‌های Bower به داخل فایلهای HTML اضافه و تزریق بشه و دیگه لازم نباشه خودمون بصورت دستی بسته‌های Bower رو درون کدهای HTML قرار بدیم. من قبلا و در این پست نحوه کار با Bower و نصب بسته‌های مختلف با استفاده از اون براتون توضیح دادم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:
npm install --save-dev grunt-wiredep
بعد از اینکار اینتر میزنیم:
میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:
حالا باید این بسته رو درون gruntfile.js لود کنیم:
حالا باید برای پروژه خودمون Bower رو تنظیم کنیم. برای اینکار در cmd و در ریشه پروژتون عبارت رو وارد کنید و اینتر بزنید. یکی یکی به سوالات جواب بدید و اینتر بزنید.
با اینکار یک فایل جدید بنام bower.json در پروژه ما ساخته میشه و کدهای زیر درون اون قرار میگیره:
{
"name": "grunt-project",
"description": "Sample project for grunt",
"main": "index.js",
"authors": [
"Mohammad Esfandiari"
],
"license": "ISC",
"homepage": "https://github.com/mamadoo/7learn-grunt",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
همینطور که میدونین Bower بسته‌های متنوعی رو در خودش داره که میتونین در اینجا همه اونا رو ببینید. ما در این مطلب bootstrap و animate.css رو با استفاده از bower نصب میکنیم. برای اینکار درون cmd عبارت رو تایپ میکنیم و اینتر میزنیم. این ابزار به سرور وصل میشه و تمام موارد مورد نیاز رو برای شما دانلود و نصب میکنه. بعد از چند لحظه توضیحات زیر در cmd به شما نمایش داده میشه و میفهمید که با موفقیت بسته‌های مورد نظر نصب شدن. بصورت زیر:
میبینید که بسته‌های مورد نظر نصب شدن و اگر پوشه پروژتون رو نگاه کنید، یک پوشه جدید بنام bower_components اضافه شده و بسته‌های مورد نظر درون اون قرار گرفته. حالا برای اینکه wiredep رو تست و استفاده کنیم، یک فایل بنام index.html درون پوشه final میسازیم و کدهای زیر رو درونش قرار میدیم:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grunt project</title> </head> <body> <h1>This is a sample project for grunt</h1> </body> </html>
برای اینکه به wiredep بگیم که فایلهای js و css رو کجا بزاره، باید بصورت زیر عمل کنیم:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grunt project</title> <!-- bower:css --> <!-- endbower --> </head> <body> <h1>This is a sample project for grunt</h1> <!-- bower:js --> <!-- endbower --> </body> </html>
دیدید که در قسمت head دو کامنت اضافه کردیم و bower:css گذاشتیم. با این کار به wiredep میگیم که فایلهای css رو اینجا قرار بده. کار مشابهی رو هم برای js انجام دادیم.
حالا باید در gruntfile.js یک وظیفه برای wiredep بسازیم. برای اینکار بصورت زیر عمل میکنیم:
دیدید که درون ویژگی src آدرس فایل html رو بهش دادیم. حالا cmd رو باز کنید و عبارت رو تایپ کرده و اینتر بزنید:
میبینید که وظیفه مورد نظر انجام شد. حالا اگر مجددا به فایل index.html نگاه کنید، میبینید که فایلهای css و js مورد نظر به زیبایی اضافه شدن:
<!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>
فایلهای مورد نظر بین کامنتهایی که قبلا قرار دادیم، گذاشته شدن. اینکه wiredep خوب کار کنه یا نه، به بسته مورد نظر بستگی داره و اینکه ابزاری مثل jquery به درستی تنظیمات bower رو انجام داده باشه.
برای مطالعه بیشتر در مورد این ابزار به این لینک مراجعه کنید.
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !