استفاده از gulp js در برنامه نویسی - قسمت دوم

در قسمت اول مقاله اومدیم درباره یکسری مفاهیم صحبت کردیم , متوجه فرق بین gulp و webpack شدیم و فهمیدیم که چرا به gulp میگن task runner و webpack به نوعی module bundler بحساب میاد و وظیفه این دو ابزار حتی با توجه به شباهت هایی که در کارهاشون دارن در پروژه های front-end جداست و باید برای هر کاربردی یک ابزار مشخص رو استفاده کرد.

رسیدیم به اینجا که یک فایل gulpfile.js خالی ایجاد کردیم و قرار شد در مورد تنظیمات یا ساختار این فایل صحبت کنیم. البته در مورد مفهومی به نام task هم صحبت کردیم و متوجه شدیم که کل پروسه کاری gulp بر مبنای task ها انجام میگیره و باید برای هر کاری یک task مشخص بنویسیم.

پیکربندی و تنظیمات gulp

حالا باید شروع به نوشتن محتوای فایل gulpfile.js کنیم. فایل رو باز کنید و این کدهارو بنویسید :

https://gist.github.com/buglessir/e6a642f289589f560166fa07aba42d0d

خوب در کد بالا اومدیم خود پکیج gulp رو در یک متغیر لود کردیم و یک task برای شروع نوشتیم. task های gulp فعلا برای ابتدایی ترین حالت 2 ورودی یا argument دارند. اولی اسم task و دومی یک تابع که محتوای task داخل اون نوشته میشه و من اینجا یک log ساده برای Hello World نوشتم.

اجرای task های gulp

برای اجرای هر task باید در cmd یا ترمینال به این شکل بنویسید :

gulp TaskName

که در بالا چون اسم task رو hello گذاشتیم باید اینجوری بنویسیم :

gulp hello

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

اجرای sass با gulp

همانطورکه گفتم gulp قابلیت های زیادی داره و میشه باهاش کارای جذابی انجام داد. الان می خوام یک نمونه عملی رو با هم انجام بدیم و sass رو برای خروجی css در قالب فایل gulp داشته باشیم. برای اینکار پکیج gulp-sass رو نصب می کنیم :

npm install --save-dev gulp-sass

قبل از نوشتن task و تغییرات در فایل gulp یک فولدر جدید کنار gulpfile.js یعنی در root پروژه به نام style درست کنید و فایلی به نام style.scss بسازید و کدهای زیر رو داخلش بنویسید :

https://gist.github.com/buglessir/0d84eaa1278d30861626406444a9452a

یعنی یک فایل style ساده در قالب sass ساختیم و قراره build گرفته بشه و خروجی nesting رو ببینیم برامون میسازه یا نه ؟!

حالا نوبت به نوشتن task میرسه , فایل gulpfile.js رو به این شکل بنویسید :

https://gist.github.com/buglessir/2623364eb9b4de9205855a7884a2256e

در کد بالا در خط 2 اومدیم پکیج sass رو در فایل load کردیم و در خط 4 به بعد task شروع میشه. اینجا با 3 مورد جدید آشنا شدیم: src , pipe , dest که در بدنه task قرار دارند. در اینجا src برای مشخص کردن فایل های مورد نیاز و path ورودی task هستش که ما فولدر style و فایل style.scss رو بهش آدرس دادیم. با کمک pipe هم میشه پکیج هارو که در متغیر لود کردیم اجرا کنیم و اینجا تابع ()sass رو با pipe برامون اجرا میکنه که فایل style.scss رو در حقیقت compile کنه و در آخر یک pipe دیگه داریم که با کمک dest در حقیقت اومدیم مسیر خروجی رو add این عملیات کردیم و بعد از اجرای task خروجی این پروسه یک فایل به نام style.css میشه و در کنار همون style.scss ذخیره خواهد شد.

البته در نظر داشته باشید که میشه مسیر خروجی رو تغییر داد و مثلا در پوشه build برامون فایل رو ذخیره کنه و اینها کاملا اختیاری هستش. حالا با دستور gulp sass کدهای بالا رو اجرا و خروجی رو چک کنید.

اجرای minify فایل های css با gulp

معمولا برای بالا بردن performance خروجی کار فایل های css و js رو بصورت pack و minify شده در قالب وب سایت لود می کنن. اینکار به راحتی با gulp انجام میشه. پکیج زیر رو نصب کنید :

npm install --save-dev gulp-clean-css

حالا فایل gulpfile.js رو به این شکل تغییر بدید :

https://gist.github.com/buglessir/d78ad3d2b32337345f7e1bed2b06f23f

در تغییر جدید روی خط 3 پکیج gulp-clean-css رو در فایل لود کردیم و در خط 8 هم با کمک pipe اومدیم تابع ()cssMinify رو اجرا کردیم که بعد از compile شدن فایل sass با این پکیج خروجی minify بشه. حالا اگر دوباره gulp sass رو اجرا کنیم و فایل style.css رو بررسی کنید خواهید دید که کدهای css همگی در یک خط و بصورت minify قرار گرفتن.

نتیجه گیری

خوب تا به اینجای کار اجرای دستورات sass و minify رو با gulp یاد گرفتیم. در جلسه بعدی در مورد فایل های javascript و concat کردن فایل ها صحبت خواهیم کرد.

موفق باشید , فعلا خدانگهدار