آموزش تکنولوژی های جدید توسعه وب

gulp:

یکی از ابزارهایی که خیلی مورد استفاده توسعه دهندگان در سراسر دنیا قرار میگیره gulpjs هستش. 

gulp چی هست و به چه دردی میخوره؟

گالپ یک javascript task runner هستش. در واقع شما به وسیله گالپ کارهای تکراری در روند توسعه تون رو اتوماتیک می کنید. اگر ویدیو های آموزش less استاد رو دیده باشید از پلاگین file watcher برای کامپایل less به css استفاده کردند. یکی از موارد استفاده گالپ همینه. البته فقط یکی از مواردش.

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

تفاوت gulp با grunt:

گرانت یک js task runner دیگست که قدیمی تر از گالپ هستش و تعداد پلاگین های بیشتری هم نسبت به گالپ داره. اما گالپ ساده تر و بروز تره و بهمین دلیل هم ما از گالپ برای کار استفاده می کنیم.

نحوه نصب گالپ:

نصب نود:

برای نصب گالپ ابتدا باید nodejs را روی سیستمتون نصب کنید. برای اینکار وارد وبسایت نود بشید و جدیدترین نسخه stable اونو دانلود کنید و نصب کنید. اگر از ویندوز استفاده می کنید احتمالا آیکونی به اسم node cli یا چیزی شبیه به این روی دسکتاپ براتون میسازه ما با اون کار داریم. اگر هم کاربر لینوکس یا مک هستید که از همون cli سیستم عاملتون کار رو می تونید انجام بدید.

نصب گالپ:

خوب حالا که nodejs نصب شد وارد محیط cli (یا در ویندوز node cli) بشید و دستور زیر رو وارد کنید:

 npm install -g gulp

خوب اول یه توضیحی درباره دستور بالا بدم:

npm: مخفف node package manager هستش که با استفاده از اون به تمامی پکیج هایی که برای نود یا با استفاده از نود نوشته شده دسترسی پیدا می کنید.

install: همونطور که از اسمش پیداست برای نصب پکیج استفاده میشه. 

g-: این در واقع یک option برای install هستش که به npm میفهمونه که این پکیج باید بصورت سراسری نصب شه. تا از همه جای سیستم شناخته شده باشه.

خوب چند دقیقه طول میکشه و بعد گالپ دانلود و نصب میشه. یه نکته ای که کاربران لینوکس و مک باید در نظر داشته باشند اینه که برای نصب بصورت global احتمالا دسترسی root میخوان پس باید به اول دستور بالا sudo رو هم اضافه کنید.

خوب حالا یک پوشه تستی به اسم gulp_test میسازیم و از طریق cli وارد میشیم. (با استفاده از دستور cd)

بعد از اینکه وارد پوشه gulp_test شدیم (از طریق cli) حالا دستور زیر رو وارد میکنیم:

 npm init

خوب بعد از نوشتن دستور بالا ازتون یکسری سوال میپرسه مربوط به اینکه نام پروژه چی هستش و ورژنش و اینها. مرتبط باهاش جلو برید. بعد از اتمام کار در پوشه یک فایل جدید به اسم package.json بوجود خواهد اومد.

خوب حالا میریم و دستور بعدی رو وارد میکنیم:

 npm install --save-dev gulp

تا گالپ بصورت لوکال هم در پوشه نصب بشه. تنها نکته ای که هست اون save-dev-- هستش که در واقع به نود میگه این پکیج رو برای توسعه میخوام و قرار نیست داخل پکیج نهایی نرم افزار که مثلا قرار هست توی سرور قرار بگیره وجود داشته باشه.

خوب حالا گالپ نصب شده و همه چی آمادست.

خوب در مراحل قبلی در نحوه نصب گالپ رو باهم دیدیم و انجام دادیم حالا میرسیم به نحوه استفاده از اون.

توی پوشه gulp_test یک فایل جدید به اسم gulpfile.js ایجاد کنید. و دستور زیر رو توی اون بنویسید:

 var gulp = require('gulp');

خوب با استفاده از این دستور gulp رو وارد کردیم. (دستور require در نود شبیه به require یا include در php هستند)

فرض کنید که ما توی پروژه مون میخوایم از کافی اسکریپت استفاده کنیم. خوب قطعا کافی اسکریپت باید به جاوااسکریپت کامپایل بشه. پس از دستور زیر در cli استفاده می کنیم:

 npm install --save-dev gulp-coffee

خوب با استفاده از اینکار پکیج gulp-coffee دانلود میشه و به پروژه اضافه میشه. حالا وارد فایل gulpfile.js میشم و به این شکل مینویسیم:

 var gulp = require('gulp');
var gutil = require('gulp-util');
var coffee = require('gulp-coffee');

//new task with coffee keyword
gulp.task('coffee',function(){
   gulp.src('app/scripts/some.coffee')
	.pipe(coffee({bare:true}))
	.on('error',gutil.log)
	.pipe(gulp.dest('dist/scripts'))
});

خوب حالا نوبت میرسه به توضیحات:

اولا من پکیجی به اسم gulp-util به پروژه اضافه کردم که در واقع میاد کار لاگ کردن رو برای ما انجام میده.

بعد از اضافه کردن پکیج های مورد نظر میرسیم به قسمت اصلی کار

gulp.task : با استفاده از این تابع یک task جدید ایجاد میکنیم. اگر دقت کنید داخل کوتیشن از نام coffee استفاده کردم این یعنی اینکه این task اسمش coffee هستش. 

بعد به قسمت gulp.src میشیم در این قسمت آدرس فایل یا فایل های coffee script مون رو میدیم.

pipe. :‌ در این دستور در واقع option های task مون رو مینویسیم. قسمت coffee({bare:true}) هم جزو گزینه های پکیج هستش. 

on.: در این قسمت تعیین می کنیم که اگر ارور رخ داد چه اتفاقی بیافته من زدم یک لاگ خالی بده.

pipe.: در این قسمت از gulp.dest استفاده کردیم که در واقع مسیر مقصدمون هستش. یعنی جایی که فایل های کامپایل شده قراره توش قرار بگیرن.

خوب حالا وارد cli میشیم و دستور زیر رو تایپ  می کنیم:

 gulp coffee

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