مطالبی درباره گالپ (gulp) و نصب آن

سلام!! این روزا که همه میدونیم داستان چیه پس در خانه بمانیم و یاد بگیریم :)یاد بگیریم که چطوری یاد بگیریم !! (اوه!! چه جمله‌ی کمرشکنی!!)بریم سر اصل مطلب گالپ چی هست؟؟ در واقع گالپ یه عصای معجزست (اگه اغراق نکرده باشم) ولی خدایی خیلی به کار میاد برای همه دولوپرا هم مناسب نمیدونم تازه کاری یا خیلی وقته کار میکنی خلاصه من با Run کردن 1 مثال میخوام گالپ رو توضیح بدم انشالله که با این نوشته هم یاد بگیری هم حال کنی توضیح کلی گالپ اینه که به ما کمک میکنه تا کدای تمیز و بهتری داشته باشیم و خیلی راحتر کد بزنیم یه مثال کوچیکببین الان ما چندتا فایل sass داریم که لازم همه اونهارو به css تبدیل کنیم و در نهایت هم css رو مینیفایل کنیم ینی انقدر حجمش رو کم کنیم تا سرعت وبسایتمون بیشتر بشه. گالپ خدمات زیادی میده مثلا حجم عکس های با کیفیت سایت رو بدون از بین بردن کیفیت کم میکنه (کاری که مجبوری دونه دونه با فتوشاپ انجام بدی رو با 2تا کلیک تو گالپ انجام میدی)اینرو هم در بارش مطالعه کردم که امنیت رو هم بالا میبره ولی من خیلی بهش باور ندارم حالا به این داستانا کاری نداریم خلاصه تا این حد باحاله دیگه گالپمن اینجا فقط طرز استفاده گالپ برای saas و مینیفای کردن css رو توضیح میدم ولی برای بقیه پلاگین ها روش یکی هست اسم ها متفاوت میشه فقط خب بریم سراغ نصب gulp من اینجوری در نظر میگیرم که شما node رو نصب داری و در بارش هم میدونی اگه نه که سرچ کن در بارش و نصب کن و بیا اینجا www.gulpjs.comخب قراره اینارو کپی پیست کنیم ولی یکم در باره هر کدوم توضیح میدم اول اینکه یاداوری کنم اگه node نصب نیست این کار نمیکنهcmdخب 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 تو پوشه پروژت نصب شدwww.gulpjs.comخب کپی پیست دوم خط دوم رو باید کپی پیست کنیم $npm install gulp -Dاینجا ما داریم گالپ رو فقط روی پروژه خودمون نصبش میکنیم اولین خطی که قبلا اینستال کردیم گالپ روی سیستم بود یسری وارنینگ هم بهت نشون میده که مهم نیست کار خودتو انجام بده الان بعد نصب باید یه فایل دیگه هم روی پروژت ببینی خب یه داستانی هست اینکه الان ما یجایی رو میخوایم که دستورات کدینگ رو داخلش بنویسیم چیکار کنیم؟؟باید بریم سراغ کپی کردن خط سوم تصویرش نزدیک دوباره نمیارم فقط کپی کن ببر$touch gulpfile.js این کد با کدی که در تصویر بالاهست در ساختار فرقی نداره ولی اونی که تو تصویر آخرین آپدیت npm هستخب اینتر رو که بزنی یه فایل gulpfile.js توی پوشه پروژت درست میشه که میتونی دستورات گالپ رو داخلش بزنی درواقع کار گالپ از اینجا شروع میشه و ما میتونیم با استفاده از cmd دستوراتی رو به گالپ بدیم و از هزاران پلاگین موجود در گالپ استفاده کنیممن تو ذهنم این بود که با یک جلسه تمومش کنم ولی گفتم آموزش نصب گالپ رو بذارم اول دوباره برسم خدمتتون که با مثال استفاده از گالپ رو هم آموزش بدم ممنونم که تا اینجا همراهی کردید این داستان ادامه دارد....