پلاگین های خوب gulp

پلاگین های خوب gulp

gulp.js رو دیگه خیلی هاتون میشناسید. اگر هم نمیشناسید برای شروع می تونید به اینجا مراجعه کنید. اساس کار gulp روی پلاگین هایی هستش که هر فردی میتونه بنویسته ، و در واقع بدون پلاگین های اون نمیشه کار زیادی باهاش انجام داد.

اینجا می خوایم یک سری از پلاگین های پر استفاده ی gulp و کاری رو که انجام میدند رو معرفی کنیم.

gulp-autoprefixer

وظیفه ی این پلاگین مثل اکثر پلاگین های gulp از روی اسمش معلومه. در واقع این پلاگین prefix های فایل css شما رو بصورت اتوماتیک اضافه می کنه. پس دیگه وقتی سی اس اس مینویسید دیگه احتیاجی به prefix گذاشتن برای هر ویژگی ندارید.

برای نصب:

برای استفاده:


gulp-add-src

وقتی که شما اصطلاحا یک pipeline رو با gulp شروع می کنید دیگه امکان این نیست که بخواید تو وسط pipeline فایلی رو اضافه گنید یا اصلا ممکنه فایلی رو فراموش کرده باشید. با این پلاگین میتونید فایلی رو به وسط pipeline اضافه کنید.

نصب:

استفاده:

اگر از prepend استفاده کنیم فایل به ابتدای pipeline اضافه میشه ، اگر از append استفاده کنیم به انتها. اگر هم از هیچ کدوم استفاده نکینم از همونجایی که اضافه کردیم دستورات روش اجرا میشن.


gulp-imagemin

برای فشرده سازی تصاویر بصورت lossless . 

فرمت های پشتیبانی شده : jpeg , gif , png , svg

نصب:

استفاده:


gulp-csscomb

برای فشرده کردن فایل های css با استفاده از csscomb .

نصب:

استفاده:


gulp-open

برای باز کردن فایل ها وقتی که دستورات gulp رو اجزا می کنیم.

نصب:

استفاده:


gulp-ignore

پلاگین خیلی خوب برای exclude کردن یا include کردن فایل خاصی.

نصب:

استفاده:

یک مثال دیگه:


gulp-if

باز هم یک پلاگین خوب دیگه . برای اجرا کردن دستورات بصورت شرطی .

نصب:

استفاده:

اینجا اگه اون condition مقدار true برگردونه تابع  ()uglify اجرا میشه.


gulp-inject

خب میرسیم به پلاگین محبوب من . با این پلاگین میتونید فایل هایی رو که میخواید رو بصورت بصورت اتوماتیک وارد فایل html بکنید . این پلاگین امکانات زیادی هم داره که میتونید همشو اینجا ببنید.

نصب:

برای استفاده ابتدا یک فایل html به این صورت بسازید:

حالا دستور های gulp رو بنویسید:

اگر دستور بالا رو اجرا کنید و بعد از به فایل html برید میبینید که فایل های شما اضافه شدند.


gulp-markdown

برای کامپایل کردن فایل های markdown .

نصب:

استفاده:


gulp-concat

برای ترکیب کردن فایل های مختلف با هم و قرار دادنشون در یک فایل .

نصب:

استفاده:


gulp-order

برای ایجاد ترتیب درست در فایل های ترکیب شده.(راجب این موضوع توی پست قبل هم صحبت کردیم) مثلا شما فایل های جاوا اسکریپتی دارید که باید طبق تریتیب درستی داخل یک فایل قرار بگیرند.

نصب:

استفاده:


gulp-copy

برای کپی کردن فایل ها.

نصب:

استفاده:


gulp-foreach

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

استفاده :


gulp-rollup

راحب rollup توی پست قبلی توضیح دادم . با این پلاگین میتونید فایل هاتون رو با رول آپ کامپایل کنید.

نصب:

 

استفاده:


gulp-rename

برای تغییر نام فایل ها. نصب:

استفاده:


gulp-newer

گاهی میشه که شما فولدری دارید که فایل هایی توشه و طی پروژه ممکنه فایل های دیگه ای به اون اضافه کنید. حالا ممکنه شما فقط بخواید دستورات رو فقط روی فایل هایی که جدیدا اضافه شدن انجام بدید.  و فایل هایی که قبلا انجام روشون انجام شده رو در نظر نگیرید. این پلاگین دقیقا همین کار رو میکنه.

نصب:

استفاده ( مثلا همراه با پلاگین imagmin):


gulp-sass

برای کامپایل کردن فایل های sass.

نصب:

استفاده:

 


gulp-sequence

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

نصب:

استفاده:


gulp-size

سایز فایل هارو به ما میده.

نصب:

استفاده:


gulp-strip-comments

این پلاگین کامنت های شمارو از فایل های حذف میکنه.

نصب:

استفاده:


gulp-zip

برای فشرده کردن فایل ها در یک فایل زیپ.

نصب:

استفاده:


gulp-chmod

پلاگین برای تغییر دادن سطح دسترسی فایل ها.

نصب:

استفاده:


gulp-exit

گاهی دیگه شما به gulp.dest نیازی ندارید برای این جور مواقع میتونید از این پلاگین استفاده کنید.
نصب:

استفاده:


 gulp-refresh

برای رفرش کردن صفحه. هنگام تغییر در فایل ها.

نصب:

استفاده:


پلاگین های بسیار زیادی برای gulp وجود داره. این فقط یه بخش کوچکی از اون ها بود . تقریبا برای هر کاری که بخواید توی gulp پلاگین هست . امید وارم به دردتون خورده باشه.

 

 

  • Amin Najafi

    سلام من یک مشکل در integrate کردن bower و gulp داشتم سورس را بفرستم کمک میکنید؟