https://virgool.ir/feed/@mehdisaamaaniwork ? music? coffee ☕fa2026-11-11 10:46:10https://files.virgool.ir/upload/users/89993/avatar/M2OMi7.pnghttps://virgool.ir/@mehdisaamaanihttps://virgool.ir/@mehdisaamaani/گالپ-gulp-hxzo6z9ewgjiهمچنان در خانه بمانیم :)در باره گالپ قبل از این یک مقاله دیگه نوشتم که امیدوارم خونده باشی چون اگه نصب نکرده باشی این چیزایی که میگم بدردت نمیخوره اینجا میخوام با مثال , استفاده از گالپ رو آموزش بدمبرای استارت پروژه باید فایل gulpfile.js که در مراحل قبلی نصب کردیم رو باز کنیمتوی فایل پروژت هستهمه دستورات اینجا نوشته میشه و در cmd اجرا میشه اولین چیزی که خیلی مهم هست خط اولیه که باید داخل gulpfile.js بنویسیم و اون هم run کردن گالپ هست با استفاده از کد زیر var gulp = require('gulp');این مثال که قراره روش کار کنیم در باره کامپایل کردن کد های sass به css هست بنابر این من باید پکیجی که مربوز به این کار هست رو روی پروژم نصب کنم از طریق cmd برای این کار npm یک بخشی رو ایجاد کرده تا شما با یک سرچ ساده بتونی از هزارتا پلاگین گالپ استفاده کنی 1- به آدرس زیر مراجعه کن https://www.npmjs.com/package/ton2-پلاگین مورد نظرت رو سرچ کن پلاگین من sass هست بنابر این روش اینستالش رو توضیح میدم البته توی سایت بالا هست :)دوباره کار سخت شما شروع شد (کپی پیست)اولین کار نصب sass هست پس کد زیر رو توی cmd کپی کنیدnpm install node-sass gulp-sass --save-devبعد از اینتر sass روی پروژه نصب شده حالا نوبت فراخونی تابع اون هستاولین کار برای فراخونی sass این هست که مثل فراخونی گالپ که بالا توضیح دادم باید داخل gulpfile.js این فراخونی صورت بگیره و در ادامه کد گالپی که اون بالا اوردیمکد زیر رو قرار میدیمvar sass = require('gulp-sass');الان sass رو require کردیم ینی به این نیاز داریم خب حالا این بیچاره باید چیکار کنه برای ما؟؟ قطعا باید یه تابعی رو اجرا کنه اون تابع چی هست؟ من کلش رو الان قرار میدم ولی یسری جاهاش نیاز به توضیح داره که توضیح خواهم داد gulp.task('sass', function () {return gulp.src('./sass/**/*.scss').pipe(sass().on('error', sass.logError)).pipe(gulp.dest('./css'));});توضیحاتی که میدم برای همه تقریبا یکسان بعضی پلاگین ها که متفاوت هست رو تو سایت npm توضیحش رو بخون از منم بهتر گفته :)gulp.task('sass', function () {اولین خط این تابع هست که "sass" اسم این تابع هست خط بعدی که قراره دربارش توضیح بدم آدرس sass در پروژه ما هست مثلا آدرس sass در پروژه من ./sass/style.scss ./sass/phone.scssاینا 2 تا از فایل های sass من هست که در پروژم دارم پس بنا بر این من آدرسش رو تغیر میدم (دوستان من چون با توضیح متنی دارم میگم بهتون یکم سخت تر از ویدئویی هست بنابر این از زیاده گویی من خسته نشید سعی کنید یاد بگیرید و مهم هم این هست)اول کد آدرس دیفالت خود npm رو میذارم و بعد با آدرس sass در پروژه خودم return gulp.src('./sass/**/*.scss') => این آدرس دیفالت هستreturn gulp.src('./sass/*.scss')=> اینم آدرس پوشه sass من در پروژهلازم که شما هم آدرس رو درست بدید بهش یه توضیحی هم در باره * بدم در دستور بالا (یا دستورای مشابه در گالپ) علامت ستاره * یعنی همه‌ی فایل های این پوشه ای که توش هستیم و پسوند sass داره رو برای من بگیر یا ذخیره کن ( برای این میگم ذخیره چون قراره بعدا روش کار کنیم)در خط سوم هم که فراخونی error هست درواقع زمانی که task ما کار نکنه این خط فعال میشه .pipe(sass().on('error', sass.logError))خب حالا خط آخر این task .pipe(gulp.dest('./css'));یکم قابل حدس ولی توضیحش اینه که همه‌ی کدای sass رو در یک فایل css ذخیره میکنه ?الان کافیه gulpfile.js که همه این تغیرات بالا رو در اون نوشتیم رو سیو کنیم و توی cmd کد زیر رو بنویسیم و در نهایت مثل همیشه اینتر بزنیم :) gulp sassانتظار میره که بعد از اینتر با تصویر بالا روبرو بشید اگر اررور داشته باشید باید برطرف کنید (نه بابا چی میگی!!)دقت داشته باشید که توی پروژه شما به فایل css نیازی ندارید که خودتون از قبل بسازیدش درواقع وظیفه sass هست که این کار رو انجام بده و بعد از طی کردن مراحل بالا پوشه css و فایل css ساخته میشه خب به قسمت مهمی رسیدیم که میتونه خیلی بهتون کمک کنه و کدای css شمارو minify کنه با این کار هم سرعت سایتتون زیاد میشه هم اینکه خیلی حرفه ای و باحاله در کل :)بازهم من کل کد ر مینویسم اینجا و بعد توضیح میدم در بارش ( اگه خسته شدی برو بعدا بیا که یاد بگیری )خب ما ادامه میدیم برای کسایی که قهوه خوردن و انرژیشون فوله :)برای مینیفای کردن کدهای css باید اول gulp-uglifycssرو نصب کنیم چجوری؟ اینجوریnpm install --save gulp-uglifycssاینو طبق معمول توی cmd بنویس و اینتر بزن تا نصب بشه بعد نصب هم میریم سراغ قرار دادن task در gulpfile.jsvar uglifycss = require('gulp-uglifycss');gulp.task('css', function () {gulp.src('./styles/**/*.css').pipe(uglifycss({"maxLineLen": 80,"uglyComments": true})).pipe(gulp.dest('./dist/'));});دوستان من انتظار دارم که تا الان کدای شما شبیه به تصویر زیر شده باشه توی تصویر بالا task که اسمش css هست همون تابع minify کردن هست که در ادامه یسری توضیحاتی رو ای روی همین عکس میدم اول اینکه خطی که این رو نوشته رو ببینید"maxLineLen":80,این خط بیانگر اینه که کدای css شمارو در چند خط مینیفای کنه ؟؟ که خب میتونی تغیرش بدیبیایید پایین تر رو ببینید که نوشته .pipe(gulp.dest('./dist/'));این قسمت هم میگه اسم پوشه ای که قراره بسازم و داخل اون css ای که مینیفای شده رو بنویس که خودش به صورت دیفالت نوشته ./distمنم که نوشتم ./newStyleشماهم میتونی هرچی دلت میخواد بنویسی فقط x یا y ننویس یچیزی بنویس که خودت بدونی حداقل :) خب من اصل مطلب رو گفتم تجربه ثابت کرده تا همینجاشم اگه بخونید و انجام بدید و یاد گرفته باشید لطف بزرگیه خداروشکر که فرصتی پیش اومد تا 2-3 خطی براتون بنویسم انشالله که مفید بوده باشه بازم تکرار میکنم انتقال مطالب توی فایل پی دی اف مثل اینجا یکم سخت تره من سعی کردم با جزئیات بگم ولی اگه متوجه نشدی این مشکل از منه نه تو و برو یه آموزش دیگه رو دنبال کن امیدوارم بازم فرصت بشه که بنویسم خیلی حال میده میبینی که ول نمیکنم همینجوری دارم تایپ میکنم???خسته نباشید خدانگهدارmehdisaamaanimehdisaamaaniWed, 15 Apr 2020 17:10:34 +0430https://virgool.ir/@mehdisaamaani/مطالبی-درباره-گالپ-gulp-و-نصب-آن-kqr3crqov9whسلام!! این روزا که همه میدونیم داستان چیه پس در خانه بمانیم و یاد بگیریم :)یاد بگیریم که چطوری یاد بگیریم !! (اوه!! چه جمله‌ی کمرشکنی!!)بریم سر اصل مطلب گالپ چی هست؟؟ در واقع گالپ یه عصای معجزست (اگه اغراق نکرده باشم) ولی خدایی خیلی به کار میاد برای همه دولوپرا هم مناسب نمیدونم تازه کاری یا خیلی وقته کار میکنی خلاصه من با 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 دستوراتی رو به گالپ بدیم و از هزاران پلاگین موجود در گالپ استفاده کنیممن تو ذهنم این بود که با یک جلسه تمومش کنم ولی گفتم آموزش نصب گالپ رو بذارم اول دوباره برسم خدمتتون که با مثال استفاده از گالپ رو هم آموزش بدم ممنونم که تا اینجا همراهی کردید این داستان ادامه دارد.... mehdisaamaanimehdisaamaaniTue, 14 Apr 2020 16:16:31 +0430