گالپ (gulp)

همچنان در خانه بمانیم :)در باره گالپ قبل از این یک مقاله دیگه نوشتم که امیدوارم خونده باشی چون اگه نصب نکرده باشی این چیزایی که میگم بدردت نمیخوره اینجا میخوام با مثال , استفاده از گالپ رو آموزش بدمبرای استارت پروژه باید فایل 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({&quotmaxLineLen&quot: 80,&quotuglyComments&quot: true})).pipe(gulp.dest('./dist/'));});دوستان من انتظار دارم که تا الان کدای شما شبیه به تصویر زیر شده باشه توی تصویر بالا task که اسمش css هست همون تابع minify کردن هست که در ادامه یسری توضیحاتی رو ای روی همین عکس میدم اول اینکه خطی که این رو نوشته رو ببینید"maxLineLen":80,این خط بیانگر اینه که کدای css شمارو در چند خط مینیفای کنه ؟؟ که خب میتونی تغیرش بدیبیایید پایین تر رو ببینید که نوشته .pipe(gulp.dest('./dist/'));این قسمت هم میگه اسم پوشه ای که قراره بسازم و داخل اون css ای که مینیفای شده رو بنویس که خودش به صورت دیفالت نوشته ./distمنم که نوشتم ./newStyleشماهم میتونی هرچی دلت میخواد بنویسی فقط x یا y ننویس یچیزی بنویس که خودت بدونی حداقل :) خب من اصل مطلب رو گفتم تجربه ثابت کرده تا همینجاشم اگه بخونید و انجام بدید و یاد گرفته باشید لطف بزرگیه خداروشکر که فرصتی پیش اومد تا 2-3 خطی براتون بنویسم انشالله که مفید بوده باشه بازم تکرار میکنم انتقال مطالب توی فایل پی دی اف مثل اینجا یکم سخت تره من سعی کردم با جزئیات بگم ولی اگه متوجه نشدی این مشکل از منه نه تو و برو یه آموزش دیگه رو دنبال کن امیدوارم بازم فرصت بشه که بنویسم خیلی حال میده میبینی که ول نمیکنم همینجوری دارم تایپ میکنم???خسته نباشید خدانگهدار