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

- visibility ۰ mode_comment

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

grund

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

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

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install cssmin plugin 1

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install cssmin plugin 2

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

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

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

دیدید که درون این فایل با استفاده از دستور import، فایلهای قدیمی css1.css و css2.css رو هم لود کردیم. حالا میخایم فایل import.css رو فشرده کنیم و اون رو بنام import.min.css در بیاریم.

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

میبینید که درون cssmin یک وظیفه بنام all ساختیم و کارش اینه که فایل import.css رو فشرده کنه. حالا برای اینکه اون رو بصورت پیش فرض با زدن grunt اجرا کنیم، cssmin رو به آرایه آخر اضافه میکنیم:grunt option for cssmin 2

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

اگر فایل import.min.css باز کنیم بصورت زیر هست:

میبینید که مواردی که import شدن هم در خروجی قرار گرفتن و کامنتها حذف شده و بصورت کامل فشرده شده هست. خوبی این ابزار اینه که خیلی پیشرفته و هوشمنده و کدهاتون رو به بهینه ترین شکل ممکن در میاره. همونطور که فایلهای ورودی رو دیدین دو تا ویژگی برای body تعریف شده بود، این ابزار اومده و اونا رو یکی کرده. همچنین رنگ قرمز رو از #f00 به red تبدیل کرده تا جای کمتری بگیره. اگه به هر دلیلی خواستید این ویژگی هوشمند بودن رو از این ابزار بگیرید، باید ویژگی advanced رو برابر با false قرار بدین. همچنین برای ساختن sourceMap همانند پلاگین uglify عمل میکنیم. برای انجام کارهای گفته شده، ویژگی options رو درون cssmin بصورت زیر قرار میدیم:grunt run cssmin 2

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

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

این پلاگین از ابزار clean-css استفاده کرده. بنابراین میتونین از تمام ویژگی هایی که در اون ابزار قرار داره اینجا هم استفاده کنید.

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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