سلام!! این روزا که همه میدونیم داستان چیه پس در خانه بمانیم و یاد بگیریم :)
یاد بگیریم که چطوری یاد بگیریم !! (اوه!! چه جمله‌ی کمرشکنی!!)
بریم سر اصل مطلب گالپ چی هست؟؟
در واقع گالپ یه عصای معجزست (اگه اغراق نکرده باشم) ولی خدایی خیلی به کار میاد برای همه دولوپرا هم مناسب
نمیدونم تازه کاری یا خیلی وقته کار میکنی خلاصه من با Run کردن 1 مثال میخوام گالپ رو توضیح بدم انشالله که با این نوشته هم یاد بگیری هم حال کنی
توضیح کلی گالپ اینه که به ما کمک میکنه تا کدای تمیز و بهتری داشته باشیم و خیلی راحتر کد بزنیم
ببین الان ما چندتا فایل sass داریم که لازم همه اونهارو به css تبدیل کنیم و در نهایت هم css رو مینیفایل کنیم ینی انقدر حجمش رو کم کنیم تا سرعت وبسایتمون بیشتر بشه.
گالپ خدمات زیادی میده مثلا حجم عکس های با کیفیت سایت رو بدون از بین بردن کیفیت کم میکنه (کاری که مجبوری دونه دونه با فتوشاپ انجام بدی رو با 2تا کلیک تو گالپ انجام میدی)
اینرو هم در بارش مطالعه کردم که امنیت رو هم بالا میبره ولی من خیلی بهش باور ندارم حالا به این داستانا کاری نداریم خلاصه تا این حد باحاله دیگه گالپ
من اینجا فقط طرز استفاده گالپ برای saas و مینیفای کردن css رو توضیح میدم ولی برای بقیه پلاگین ها روش یکی هست اسم ها متفاوت میشه فقط
خب بریم سراغ نصب gulp من اینجوری در نظر میگیرم که شما node رو نصب داری و در بارش هم میدونی اگه نه که سرچ کن در بارش و نصب کن و بیا اینجا
خب قراره اینارو کپی پیست کنیم ولی یکم در باره هر کدوم توضیح میدم
اول اینکه یاداوری کنم اگه node نصب نیست این کار نمیکنه
خب cmd رو باز کن و اولین خط رو که
$npm install gulp-cli -g
هست رو توش کپی پیست کن و اینتر رو بزن
(توی مک هم باید از sodu قبل npm دستور بالا استفاده کنی)
بعد از نصب گالپ روی سیستم میریم سراغ پروژه ای که قراره گالپ روش ران بشه و برامون کار کنه دیگه از این مرحله تصویر نمیزارم خودتون بفهمید دیگه :) چون یه پوشه ای باید داشته باشی که توش فایل sass و css و html و js و هرچیز دیگه ای باشه
حالا توی cmd باید بنویسی cd و بعد باید با درگ & دراپ کردن فایل پروژتو بندازی بعد از این cd حالا اینتر
بعد اینتر LS رو تایپ کن و اینتر بزن اگه همه چیز درست باشه همه فایل های موجود در پوشتو میاره
اگه خط های cmd زیاد شده یه clear بنویس اینترو بزن تا بریم سراغ ادامش
خب حالا وقت npm init هست تایپ کن اینترو بزن اینجا یسری مشخصات برات میاره که اگه انگلیسی رو در حد hello yes i am a window بلد باشی میفهمی چیه ولی من اینجا میگم که هیچ کدومش مهم نیست برای ما و اینتر بزن تا برسی به سوال آخرش که گفته
Is this ok? (yes)
شما با خیال راحت yes رو تایپ کن و اینترو بزن
خب package.json تو پوشه پروژت نصب شد
خب کپی پیست دوم خط دوم رو باید کپی پیست کنیم
$npm install gulp -D
اینجا ما داریم گالپ رو فقط روی پروژه خودمون نصبش میکنیم اولین خطی که قبلا اینستال کردیم گالپ روی سیستم بود
یسری وارنینگ هم بهت نشون میده که مهم نیست کار خودتو انجام بده الان بعد نصب باید یه فایل دیگه هم روی پروژت ببینی
باید بریم سراغ کپی کردن خط سوم تصویرش نزدیک دوباره نمیارم فقط کپی کن ببر
$touch gulpfile.js
این کد با کدی که در تصویر بالاهست در ساختار فرقی نداره ولی اونی که تو تصویر آخرین آپدیت npm هست
خب اینتر رو که بزنی یه فایل gulpfile.js توی پوشه پروژت درست میشه که میتونی دستورات گالپ رو داخلش بزنی درواقع کار گالپ از اینجا شروع میشه و ما میتونیم با استفاده از cmd دستوراتی رو به گالپ بدیم و از هزاران پلاگین موجود در گالپ استفاده کنیم
من تو ذهنم این بود که با یک جلسه تمومش کنم ولی گفتم آموزش نصب گالپ رو بذارم اول دوباره برسم خدمتتون که با مثال استفاده از گالپ رو هم آموزش بدم
ممنونم که تا اینجا همراهی کردید
این داستان ادامه دارد....
