گالپ (gulp)

همچنان در خانه بمانیم :)

در باره گالپ قبل از این یک مقاله دیگه نوشتم که امیدوارم خونده باشی چون اگه نصب نکرده باشی این چیزایی که میگم بدردت نمیخوره اینجا میخوام با مثال , استفاده از گالپ رو آموزش بدم

برای استارت پروژه باید فایل gulpfile.js که در مراحل قبلی نصب کردیم رو باز کنیم

همه دستورات اینجا نوشته میشه و در cmd اجرا میشه

اولین چیزی که خیلی مهم هست خط اولیه که باید داخل gulpfile.js بنویسیم و اون هم run کردن گالپ هست با استفاده از کد زیر

var gulp = require('gulp');

این مثال که قراره روش کار کنیم در باره کامپایل کردن کد های sass به css هست بنابر این من باید پکیجی که مربوز به این کار هست رو روی پروژم نصب کنم از طریق cmd

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

1- به آدرس زیر مراجعه کن

https://www.npmjs.com/package/ton

2-پلاگین مورد نظرت رو سرچ کن

پلاگین من 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.js

var uglifycss = require('gulp-uglifycss');

gulp.task('css', function () {

gulp.src('./styles/**/*.css')

.pipe(uglifycss({

&quotmaxLineLen&quot: 80,&quot

uglyComments&quot: true

}))

.pipe(gulp.dest('./dist/'));

});

دوستان من انتظار دارم که تا الان کدای شما شبیه به تصویر زیر شده باشه

توی تصویر بالا task که اسمش css هست همون تابع minify کردن هست که در ادامه یسری توضیحاتی رو ای روی همین عکس میدم اول اینکه خطی که این رو نوشته رو ببینید

"maxLineLen":80,

این خط بیانگر اینه که کدای css شمارو در چند خط مینیفای کنه ؟؟ که خب میتونی تغیرش بدی

بیایید پایین تر رو ببینید که نوشته

.pipe(gulp.dest('./dist/'));

این قسمت هم میگه اسم پوشه ای که قراره بسازم و داخل اون css ای که مینیفای شده رو بنویس که خودش به صورت دیفالت نوشته

./dist

منم که نوشتم

./newStyle

شماهم میتونی هرچی دلت میخواد بنویسی فقط x یا y ننویس یچیزی بنویس که خودت بدونی حداقل :)

خب من اصل مطلب رو گفتم تجربه ثابت کرده تا همینجاشم اگه بخونید و انجام بدید و یاد گرفته باشید لطف بزرگیه خداروشکر که فرصتی پیش اومد تا 2-3 خطی براتون بنویسم انشالله که مفید بوده باشه بازم تکرار میکنم انتقال مطالب توی فایل پی دی اف مثل اینجا یکم سخت تره

من سعی کردم با جزئیات بگم ولی اگه متوجه نشدی این مشکل از منه نه تو و برو یه آموزش دیگه رو دنبال کن امیدوارم بازم فرصت بشه که بنویسم خیلی حال میده میبینی که ول نمیکنم همینجوری دارم تایپ میکنم???

خسته نباشید

خدانگهدار