آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 20) - تبدیل کدهای less به css

- visibility ٠ mode_comment

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

grund

در جلسات قبلی در مورد پلاگینهای مختلفی صحبت کردیم. در این جلسه قصد داریم در مورد پلاگین grunt-contrib-less صحبت کنیم و با استفاده از اون کدهای less خودمون رو به کدهای css تبدیل کنیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

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

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

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

حالا باید یک وظیفه بنام less بسازیم:

دیدید که بعد از task هایی که قبلا ساخته بودیم، وظیفه less رو هم ساختیم.

قبل از اینکه تنظیمات درون less رو قرار بدیم، دو فایل بنامهای variables.less و style.less رو درون پوشه less موجود در پوشه development بسازید. درون فایل variables.less کدهای زیر رو قرار بدین:

همچنین درون فایل style.less کدهای زیر رو قرار بدین:

دیدید که درون این فایلها مقداری کد less قرار داده شده. حالا میخایم این فایلها رو به css تبدیل کنیم. همونطور که دیدید درون فایل variables.less یک متغیر تعریف کردیم و این فایل رو درون style.less وارد یا import کردیم و از اون متغیر در این فایل استفاده کردیم. خروجی رو میخایم درون پوشه css موجود در پوشه final بنام less.css دخیره کنیم.

حالا میتونیم تنظیمات مورد نظرمون رو درون اون قرار بدیم، برای اینکار بصورت زیر عمل میکنیم:grunt less config

میبینید که درون less یک وظیفه بنام compile ساختیم و کارش اینه که فایل style.less رو تبدیل به less.css کنه. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، less رو به آرایه آخر اضافه میکنیم:add less to default task grunt

حالا اگر grunt رو اجرا کنیم، همه کارهایی که مشخص کردیم تو یه چشم به هم زدن انجام میشن و فایلهای مورد نظر ساخته میشن.grunt run less command

یک فایل بنام less.css ساخته میشه و اگر اون رو باز کنیم، بصورت زیر خواهد بود:

میبینید که کدهای less به css تبدیل شدن. همچنین شما میتونین چندین فایل less رو همزمان تبدیل کرده و اونا رو به هم بچسبونید. همانند گذشته میتونین از banner و sourceMap استفاده کنید. فرض کنید بخایم یک sourceMap برای این فایل درست کنیم. برای انجام کارهای گفته شده، ویژگی options رو درون less بصورت زیر قرار میدیم:grunt add sourcemap

حالا اگر grunt رو مجددا اجرا کنیم، علاوه بر تبدیل کردن به css یک فایل map هم در اختیارمون قرار میگیره و کاربرد اون رو هم قبلا توضیح دادم. فایل less.css دارای کدهای زیر هست:

در خط آخر به sourceMap اون اشاره کرده. محتوای sourceMap هم بصورت زیر هست:

این ابزار یک ویژگی دیگه بنام compress داره که با true قرار دادن اون کدهای خروجی بصورت فشرده در میان و فواصل خالی اون برداشته میشه. برای اینکار بصورت زیر عمل میکنیم:grunt compress less

اگر grunt رو اجرا کنیم و خروجی رو ببینیم بصورت زیر خواهد بود:

میبینید که کدها بصورت فشرده در اومدن و در یک خط قرار گرفتن. برای مطالعه بیشتر در مورد این ابزار میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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