• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 421 ۱۵ مرداد ۹۵

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

grund

در جلسه گذشته توضیحاتی در مورد فایل gruntfile.js دادیم. در این جلسه میخایم توضیحات رو پیش ببریم و همچنین از یکی از پلاگین های گرانت بنام grunt-contrib-concat برای اتصال فایلها به هم استفاده کنیم. در قدم اول دو تا فایل css و دو تا فایل js رو در پوشه development برای نمونه قرار میدیم و روی اونا کار میکنیم. در ابتدا فایلهای زیر رو دانلود کنید:

درون این فایل zip دو تا پوشه هس و درون هر کدوم نیز دو تا فایل وجود داره. این پوشه ها رو درون پوشه development خودتون قرار بدین.grunt project structure

تا اینجای کار ساختار پروژه به صورت شکل بالاست.

هدف ما اینه که دو فایل css رو با هم و دو فایل js رو نیز با هم ترکیب کنیم و خروجی های بوجود اومده رو در پوشه css و js موجود در پوشه final بریزیم. برای اینکار در ابتدا باید پلاگین grunt-contrib-concat رو برای پروژه خودتون نصب کنید. اگه به صفحه مرتبط با این پلاگین در سایت npmjs برید، توضیحات کاملی در مورد اون داده شده. در مرحله اول cmd رو باز کنید و با استفاده از دستور cd به ریشه پروژه خودتون برید و عبارت زیر رو درون اون تایپ کرده و اینتر بزنید:grunt install concat plugin

همونطور که دیدید عبارت زیر رو قرار دادیم:

بعد از اینکه اینتر زدیم، این پلاگین بعد از چند لحظه دانلود و نصب میشه:grunt install concat plugin 2

چونکه در انتهای اون عبارت از --save-dev استفاده کردیم، پس این بسته نیز در فایل package.json و در بخش devDependencies قرار میگیره. فایل package.json بعد از اینکار بصورت زیر بروزرسانی میشه:grunt install concat plugin 3

خب حالا که پلاگین رو نصب کردیم باید از اون استفاده کنیم و درون فایل gruntfile.js اون رو لود کنیم. برای اینکار فایل gruntfile.js رو بصورت زیر تغییر میدیم:

اگه از فایل gruntfile.js عکس بگیرم بصورت زیر هست:grunt install concat plugin 4

دیدید که با استفاده از متد loadNpmTasks پلاگین grunt-contrib-concat رو لود کردیم و قرار دادیم. حالا باید یک task یا وظیفه برای concat بسازیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که درون initConfig یک task بنام concat ساختیم و حالا میتونیم وظائف و تنظیمات مربوط به اتصال فایلها رو به اون بگیم. در ابتدا میخایم در این وظیفه دو تا کار رو بکنیم. یکی اینکه فایلهای js رو یکی کنیم و بعدی اینکه فایلهای css رو یکی کنیم. پس به این منظور درون concat موارد زیر رو قرار میدیم:

بجای اسمهای css و js هر اسمی که دوس داشتید میتونید بزارید ولی در زمان اجرا باید همون اسمی که خودتون انتخاب کردید رو وارد کنید. میبینید که دو تا کار رو مشخص کردیم. حالا درون هر کدوم باید بگیم که فایلهایی که قصد داریم با هم یکی بشن کجا هستن و همچنین قصد داریم خروجی کجا ریخته بشه. برای اینکار از دو ویژگی src و dest استفاده میشه. با استفاده از src محل فایلهای مورد نظر رو میگیم و با استفاده از dest هم مقصدی که میخایم خروجی در اونجا قرار بگیره. پس بصورت زیر خواهد شد:

میبینید که جلوی src یک آرایه قرار دادیم که میتونه چندین فایل رو درون خودش قرار بده و خروجی هم که یکی بیشتر نمیتونه باشه. اگه شما هم ساختار پروژتون رو شبیه به من ساخته باشید، پس کدهاتون هم شبیه به من میشه:

میبینید که محل فایلهای css و js رو وارد کردیم و گفتیم کجا قصد داریم ریخته بشن. در جلسه بعد بیشتر توضیح میدم و کار رو جلو میبریم.

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

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram