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

- visibility ۰ mode_comment

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

grund

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

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

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

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

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

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

قبل از اینکه تنظیمات درون less رو قرار بدیم، چهار فایل بنامهای compile.sass و imported.sass و compile.scss و imported.scss رو درون پوشه sass موجود در پوشه development بسازید. همونطور که میدونید scss نسخه بروزشده و بهینه شده sass هست و بیشتر افراد از اون استفاده میکنن. بهمین دلیل ما با استفاده از grunt هم روی فایلهای Sass و هم scss مثالهایی رو براتون میزنیم. هر چند که کار کردن برای هر دوی اونا به یک صورت هست. درون فایل imported.sass کدهای زیر رو قرار بدین:

درون فایل compile.sass کدهای زیر رو قرار بدین:

درون فایل imported.scss کدهای زیر رو قرار بدین:

درون فایل compile.scss کدهای زیر رو قرار بدین:

دیدید که درون این فایلها مقداری کد sass قرار داده شده. حالا میخایم این فایلها رو به css تبدیل کنیم. خروجی رو میخایم درون پوشه css موجود در پوشه final بنام sass.css و scss.css دخیره کنیم.

حالا میتونیم تنظیمات مورد نظرمون رو درون اون قرار بدیم، برای اینکار بصورت زیر عمل میکنیم:sass configuration

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

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

چهار فایل بنامهای sass.css و sass.css.map و scss.css و scss.css.map ساخته میشه. من تمام فایلها رو بصورت یک پروژه در آوردم و در سایت Github قرار میدم و با هر آموزش اون رو Update میکنم. شما میتونین برای دیدن این فایلها و بقیه موارد به صفحه Github این آموزش به نام 7learn-grunt برید. در این پلاگین بصورت پیش فرض در کنار فایل خروجی SourceMap هم ساخته میشه و قرار میگیره. شما میتونین با none قرار دادن اون، کاری کنید که دیگه ساخته نشه. برای انجام کارهای گفته شده، ویژگی options رو درون dist موجود در sass بصورت زیر قرار میدیم:add option to remove source map

حالا اگر grunt رو مجددا اجرا کنیم، دیگه sourceMap ساخته نمیشه. این ابزار یک ویژگی دیگه بنام style داره که با استفاده از اون میتونین فرمت کدهای خروجی رو مشخص کنید. این ویژگی 4 مقدار nested و compact و compressed و expanded رو میتونه دریافت کنه. مقدار پیش فرض اون nested هست و مثلا با قرار دادن compressed کدهای خروجی بصورت فشرده در میان.

برای اینکار بصورت زیر عمل میکنیم:compress output

برای مطالعه بیشتر در مورد این ابزار میتونین به این لینک مراجعه کنید.

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

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

موفق باشید

یا علی

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

نیاز به لاگین

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