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

- visibility ۰ mode_comment

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

grund

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

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

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

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

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

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

قبل از اینکه تنظیمات درون csslint رو قرار بدیم، باید مشخص کنیم که چه فایلهای CSS رو میخایم مورد هدف قرار بدیم. ما در جلسات قبلی یک فایل بنام final.css رو از فایلهای دیگه و با استفاده از grunt ساختیم و در این جلسه میخایم با استفاده از csslint اون رو بررسی کنیم. در ابتدا بگم که این پلاگین از ابزار csslint برای این کار استفاده میکنه، پس شما میتونین هر ویژگی که در csslint قابل استفاده هست رو، در اینجا هم استفاده کنید. فایل final.css بصورت زیر هست:

اگر به سایت اصلی csslint سر زده باشید، میدونید که همه این کارا رو میشه با استفاده از اون انجام داد.csslint site

با کلیک بر روی دکمه ای که در بالا مشخص کردم، همه ویژگی هایی که با استفاده از این ابزار مورد بررسی قرار میگیرن رو مشاهده خواهید کرد:csslint site 2

میبینید که همه ویژگی ها تیک خوردن و به معنای است که همه اونا بررسی خواهند شد. لیست تمام این ویژگی ها به همراه توضیحات هر کدوم درون این صفحه قرار داده شده و شما میتونین با استفاده از این پلاگین از این ویژگی ها استفاده کنید. برای مثال اگه ما کدهای final.css رو درون تکس باکس سایت بالا قرار بدیم و بر روی Lint کلیک کنیم، خروجی زیر به ما نمایش داده میشه:csslint site 3

میبینید که یک warning به ما داده و بهمون گفته که بهتره از * استفاده نکنیم. خط و ... اون نیز مشخص شده.

در جلسه بعد به ادامه موضوع خواهیم پرداخت.

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

موفق باشید

یا علی

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

نیاز به لاگین

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