آموزش PostCSS – نصب و شروع به کار

آموزش PostCSS – نصب و شروع به کار

در قسمت قبل فهمیدیم که postCSS چی چیزی است و چرا باید از آن استفاده کنیم و روند کاری آن را شرح دادیم.در این قسمت میخواهیم یاد بگیریم که چگونه postCSS را نصب و راه اندازی کنیم.

به چه چیز هایی نیاز داریم؟

  • NodejS
  • Npm
  • Gulp
  • postCSS

به سه مورد اول برای نصب و راه اندازی مورد آخر نیاز داریم.

نصب پیش نیاز های PostCSS:

 

نصب NodeJS:

برای نصب NodeJS و Npm به سایت https://nodejs.org  وارد شوید و نسخه مرتبط با سیستم عامل خودتان را دانلود کنید  همراهش Npm هم نصب میشود. اگر از کاربران لینوکس هستید این لینک را مطالعه کنید.

 

نصب Gulp:

برای نصب Gulp با دستور npm install –global gulp-cli به صورت زیر عمل کنید. (gulp چیست؟ به این لینک مراجعه کنید).

fisrt level

 

راه اندازی اولین پروژه و نصب Post CSS:

بعد از نصب gulp باید یک پروژه بسازید برای مثال در هر محلی که نیاز دارید یک پوشه بسازید و سپس بعد از آن در آن جا Command Line یا Terminal خود را در آنجا باز کنید سپس در آنجا دستور npm init را وارد کنید و به سوالاتی که پرسیده میشود نسبت به پروژه خود پاسخ دهید همانند تصویر زیر:

secod

پس از اتمام عملیات فوق در پوشه پروژه فایلی به نام pakage.json ساخته میشود که شامل اطلاعات پروژه و pakage های پروژه است.

حال باید gulp را به عنوان وابستگی ها(Dev Dependency) به پروژه خود اضافه کنید با استفاده از دستور npm install –save-dev gulp

حال باید postCSS را به عنوان وابستگی ها (Dev Dependency) با دستور npm install –save-dev gulp-postcss به پروژه خود اضافه کنید به صورت زیر:

third

خب حال که موارد فوق را نصب کردیم باید دست به کار شویم و وظایف یا task های خودمان را بنویسیم.

 

 

ساخت Workflow ابتدایی:

ابتدا باید فایل gulpfile.js را در root پروژه بسازید سپس در آن شروع به کد نویسی برای postCSS کنید. قطعه کد زیر را برای شروع بنویسید تا به تشریح آن بپردازیم:

در خط اول پکیج gulp را به پروژه include کردیم سپس در خط بعد همین کار را برای postCSS انجام دادیم

در خط بعد یک آرایه ایجاد کردیم که بعد ها در آن Module های postCSS را ذخیره میکنیم.

در خط بعد با متد task که متعلق به gulp است یک task جدید ساختیم این متد دو پارامتر دارید اولی نام task و دومی callback یا تابعی که قرار است برای task اجرا شود.

در خط بعد با دستور return و gulp.src مشخص کردیم که gulp قرار است در چه پوشه ای و چه فایل هایی کار را انجام بدهد. (مشخص کردیم که فایل های css داخل پوشه css و تمام زیر پوشه آن)

سپس pipline یا خط لوله کار ها را آغاز کردیم

منظور از خط لوله ینی که اولین module کارش را انجام میدهد و نتایج کارش را به module بعدی میدهد و تا module قبلی تمام نشود module بعدی آغاز نمیشود.

خب میبینیم که ما فقط یک module اصلی داریم که postcss است و به عنوان اولین پارامتر آرایه ای که در بالا ساختیم را به آن ارسال کردیم.

در خط آخر هم با gulp.dest گفتیم که فایل ها را در پوشه css از زیر پوشه های publish ذخیره کند.

حال بیایید Workflow بالا را اجرا کنیم پس ذخیره اش کنید و به Command Line یا Terminal خود بروید و دستور gulp css را اجرا کنید این دستور task  مورد نظر که در اینجا css است را اجرا میکند. همانند تصویر زیر:

forth

حال اگر به فایل های پوشه publish نگاهی بیاندازید میبنید که هیچ تغییر نکرده است در قسمت قبل گفتیم اگر postCSS را بدون Module اجرا کنید همان فایل اولیه به شما بازگشت داده میشود.

 

خب متوجه شدیم که چگونه postCSS را نصب و راه اندازی کنیم.

 

شروع به کار با CSS Nano:

برای شروع کار بیاییم یکی از Module های ساده postCSS را با هم نصب کنیم و ازش استفاده کنیم.

برای شروع کار از cssnano استفاده میکنیم

  • CSS Nano یکی از این Module ها پر طرفدار که طبق sample سایت خودش کار های زیر را برای شما انجام میدهد :
  • کوتاه سازی دستورات css برای مثال margin: 10px 20px 10px 20x را به margin: 10px 20px تغییر میدهد.
  • کوتاه سازی کد های رنگی و یا تبدیل آن ها به اسم آن اگر داشته باشند برای مثال ffffff# را به fff# تغییر میدهد یا #f00000 را به red تغییر میدهد.
  • دستورات که چند بار تکرار شده باشند را حذف میکند.
  • Vendor Prefix های که دیگر استفاده نمی شوند را حذف میکند.

و خیلی کار های دیگر… که در سایت http://cssnano.co میتوانید تمام آن ها را مطالعه کنید

 

از داستان گفتن بگذریم به قول معروف Talk is cheap show me code بریم که کد بزنیم و نتیجه ببینیم!

اول بیاییم cssnano را نصب کنیم با دستور npm install –save-dev cssnano این کار را کار را انجام دهید:

حالا که نصب کردیم باید به postCSS بیافزاییم این Module را خب پس فایل gulpfile.js را باز کنید و در آرایه ای که به نام postCSSModules ساختیم cssnano را require کنیم

به صورت زیر:

 

فقط همین کار را اجرا کنید و سپس دستور gulp css را اجرا کنید تا ببنید فایل css شما علاوه بر بهینه شدن minify هم شده است.

 

Watch کردن فایل ها:

باید بعد از هر بار تغییر در فایل های css مان gulp css را اجرا کنیم.

البته که جواب خیر است با کمی تغییر کوچک در فایل gulpfile.js میتوانیم به workflow که ساختیم بگوییم بعد از تغییر هر فایل css کامپایل را برای آن فایل انجام دهد. Hmmm ! جالب شد نه؟

پس بیایید این کار را انجام بدهیم:

خط بالا را به انتهای فایل gulpfile.js اضافه کنید تا بعد از هر بار تغییر عملیات را برای شما به صورت خودکار انجام دهد.

ابتدا متد watch از gulp را صدا زدیم سپس مسیر فایل های css را طبق task به watch گفتیم و در پارامتر بعدی Task که میخواهیم بعد از هر بار تغییر اجرا شود را مینویسم.

فهمیدیم که چگونه postCSS را نصب و راه اندازی کنیم

پروژه ای بسازیم  و workflow آن را ایجاد کنیم و در workflow که ساختیم module را اجرا کنیم

هر module که میخواهید را می توانید با  npm install --save-dev MODULE_NAME نصب کنید به جای MODULE_NAME نام module خود را قرار دهید و با دستور require(MODULE_NAME) در آن آرایه قرار دهید اگر ترتیب برایتان اهمیت دارد اولویت را در همان آرایه تنظیم کنید.

 

در قسمت بعد با اینکه چگونه قبل از اجرای postCSS فایل های Sass را کامپایل کنیم آشنا میشویم و همچنین یاد میگیریم چگونه PreCSS را به جای SASS استفاده کنیم.

منتظر قسمت بعدی باشید.