آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 25) - بررسی CSS با CSSlint -قسمت 2

- visibility ٠ mode_comment

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

grund

همونطور که گفتم تمام ویژگی هایی که میتونین استفاده کنید در اینجا قرار داده شده. برای اینکه این لیست رو به روز رسانی کنیم، کد زیر رو در cmd قرار میدیم و enter رو میزنیم:

خروجی بصورت زیر میشه:update csslint list

میبینید که ویژگی های مورد نظر بروز رسانی شدن و میتونین از اونا استفاده کنید.

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

میبینید که یک وظیفه بنام lint درون csslint ساختیم و درون ویژگی src نیز، مسیر فایل final.css رو مشخص کردیم. شما میتونین با قرار دادن مسیرهای همچون path/to/**/*.css فایلهای بیشتری رو همزمان مورد بررسی قرار بدین. ما در اینجا برای راحتی کار فقط بررسی رو روی یک فایل انجام میدیم. اگر تا همینجا درون cmd عبارت grunt csslint رو تایپ کرده و اینتر بزنیم، همون خروجی که در سایت csslint رو دیدیم، خواهیم دید:grunt csslint config 2

میبینید که یک Warning برای همون * داده شده و در آخر هم گفته که یک فایل مورد بررسی قرار گرفت. حالا اگر درون final.css، اون * رو تبدیل به h1 کنیم و دوباره دستور بالا رو وارد و اجرا کنیم، بصورت زیر خواهد شد:grunt csslint config 3

میبینید که دیگه هیچ هشداری وجود نداره. حالا فرض کنید یکی از { در فایل final.css رو بردارم و مشکلی در اون به وجود بیارم. اگر حالا دستور بالا رو اجرا کنیم، خروجی زیر بدست میاد:grunt csslint error

میبینید که در اینجا ارور به ما میده و دیگه هشدار نیس و در اینجا روند ادامه بررسی تا زمانی که اون ارور رو حل نکنید، ادامه نخواهد یافت. بغیر از اینکه با استفاده از دستور grunt csslint --force از اون صرف نظر کنیم و grunt رو وادار کنیم که از اون عبور کنه. تمام ویژگی هایی که در بالا در مورد اونا صحبت کردیم، نظیر imports و ids و floats و ... همگی بصورت پیش فرض فعال هستن و مورد بررسی قرار میگیرن و اگر چنین مشکلی وجود داشته باشه، یک هشدار یا warning در خروجی نمایش داده میشه و شما رو مطلع میکنه. حالا شما میتونین دو کار بکنید. اگر برای یک ویژگی مقدار false رو قرار بدین، اون مورد برای اون فایل مورد بررسی قرار نمیگیره و اگر مقدار 2 رو قرار بدین، اگر چنین مشکلی در اون فایل وجود داشته باشه، اون رو بجای هشدار، بصورت یک ارور نمایش میده و از ادامه روند کار جلوگیری میکنه و باید ابتدا اون رو بصورت کامل رفع کنید.

مثلا همون فایل final.css اولیه رو در نظر بگیرید. میخام کاری کنم که به * اون گیر نده و بیخیالش بشه. برای اینکار یک options اضافه میکنم و ویژگی universal-selector که همون * هست رو برابر با false قرار میدم. بصورت زیر:change options csslint

حالا اگر grunt csslint رو مجددا اجرا کنیم، هیچ هشداری به ما داده نمیشه:grunt csslint config 3

اما اگر بجای false از 2 استفاده کنم، نه تنها اون رو بیخیال نمیشه، بلکه اون رو بجای هشدار، بصورت یک ارور نمایش میده و با سرسختی باهاش برخورد میکنه:change options csslint 2

 

حالا مجددا دستور grunt csslint رو اجرا میکنیم و خروجی بصورت زیر نمایش داده میشه:change options csslint 3

میبینید که همون پیام بصورت یک ارور نمایش داده شده و دیگه هشدار عادی نیست.

شما میتونین ویژگی هایی که قصد دارید بصورت عمومی در همه پوشه های سایتتون در نظر گرفته و اجرا بشن رو درون یک فایل بنام .csslintrc قرار داده و اون رو در ریشه پروژه خودتون و در کنار gruntfile.js قرار بدین. با اینکار این ویژگی ها بصورت کلی در پروژتون اعمال میشن. مثلا فرض کنید من میخام ویژگی های universal-selector و ids و floats رو در کل پروژه مورد بررسی قرار ندم. پس فایل مورد نظر رو میسازیم و کدهای زیر رو درونش قرار میدیم:

حالا برای اینکه اون رو به csslint معرفی کنیم، بصورت زیر عمل میکنیم:change options csslint 4

با اینکاری که کردیم دیگه در هیج جای پروژمون، ویژگی های مذکور مورد بررسی قرار نمیگیرن. برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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