اگه طراح یا توسعه دهنده ی وب هستید احتمالا خیلی اوقات به خیلی از کارها ( مثلا کامپایل sass و haml و مینیفای کردن اسکریپت‌ها) چنتا آب نکشیده نثار کردید. ابزارهایی وجود دارند که دسته ی بزرگی از کارها رو با اجرای یک دستور اجرا میکنند که معروفترینش شاید gnu make باشه که با یک دستور make معمولا برنامه ها رو در لینوکس کامپایل میکنیم یا rake که توسعه دهندگان روبی به وفور ازون استفاده میکنند.

برای توسعه ی فرانت‌اند هم بیلد سیستم های زیادی ایجاد شدند که grunt و gulp معروفترین و پرکاربرد ترین اونهاست که تو این مقاله gulp رو بررسی میکنیم.

Gulpjs یک استریم بیلد سیستم (باهم بخونید) برای جاوا‌اسکریپته. نمیدونید مفهوم استریم چیه؟ راهنما ..

به چه دردی میخوره؟

اول نوشته توضیح دادم که خیلی از کارها برای توسعه دهندگان فرانت اند زمان بر و خسته کننده است. کار gulp اینه که مجموعه ی ای ازین کارا رو براش تعریف میکنین و با یک دستور ساده تو خط فرمان همه ی اون کارها رو انجام میده. ضمنا گزینه های مختلفی هم بهتون میده که دستتون بازه برای کارهای مختلف مثل دسته بندی کارها و واچ کردن تغییرات و ...

اگر طراحی یا توسعه دهنده ی وب هستید یا اینکه دنبال یک بیلد سیستم قدرتمند و ساده برای کارهای روزمرتون میگردین gulp گزینه ی خوبی خواهد بود.

نصب

برای استفاده از gulp باید npm روی سیستمتون نصب داشته باشید. بعدش از خط‌فرمان دستور پایین رو اجرا کنید تا به صورت سراسری gulp روی سیستم شما نصب بشه :

npm install gulp -g

- دقت کنید که اگر سیستم عاملتون شبه‌یونیکسه sudo رو فراموش نکنید.

خب حالا با دستور پایین چک کنید که gulp درست نصب شده :

gulp -v

استفاده

برای استفاده از gulp وارد دایرکتوری پروژتون بشیداول با دستور پایین gulp رو به لیست وابستگی های پروژه‌ اضافه کنید :

npm install gulp --save-dev

 و بعدش یک فایل به اسم gulpfile.js  همونجا بسازید. توی این فایل تمام کارهایی که صحبتش کردیم رو باید تعرف کنیم. برای gulp در مدت کوتاهی پلاگین های زیادی نوشته شده و این خودش کار رو برای خیلی از مسائل آسون میکنه. کدهای پایین رو به فایلی که ساختید اضافه کنید :


var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

اگر مختصری جاوا‌اسکریپت و node بلد باشید احتمالا ساختار کد بالا رو درک میکنید. gulp.task یک کار ایجاد میکنه که قراره اتوماتیک کنینش. 'default' بسته ی پیش فرضیه که اجرا میشه. گفتیم که بسته های مختلفی میتونیم داشته باشیم. برای مثال یک بسته ی دیگه میسازیم به اسم 'styles' :



gulp.task('styles', function() {
  // place code for your styles task here
});

خب تا اینجا کدهایی که نوشتیم کاری نمیکردن! حالا باید بگیم که چه کاری میخوایم که برامون بکنن. مثلا من از less استفاده میکنم و میخوام استایل‌هام رو به css کامپایل کنم. برای اینکار ابسته ی gulp-less استفاده میکنم. gulp-less رو از npm نصب کنید. کدهایی هم که تو قسمت قبل برای styles نوشته بودم با این پلاگین کامل میکنم :



gulp.task('styles', function() {
  gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./css'));
});

و البته بسته ی gulp-less هم به پروژه اضافه میکنیم. حالا مت تو دایرکتوری less هر فایلی که با پسوند less ایجاد کنم بعد از اجرای gulp تمام اونها به css کامپایل و تو دایرکتوری css ذخیره میشن.

تسک 'default' رو هم بصورت پایین تغییر میدیم که بطور پیش فرض تسک های استایل‌هامون رو اجرا کنه :


gulp.task('default',
	['styles'],
	function() {});

اگر گرو های تسک دیگه ای هم ایجاد کردیم میتونیم بعد از یک کاما (,) بعد از 'styles' بنویسیم که پیش فرض اجرا بشن.

تمام کدهایی که تا حالا نوشتیم این شد :


var gulp = require('gulp');
var sass = require('gulp-less');

gulp.task('default',
	['styles'],
	function() {});

gulp.task('styles', function() {
  gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./css'));
});

حالا دستور gulp رو تو ترمینالتون اجرا کنید :

gulp

اگه مراحل بالا رو تو دایرکتوری less تون چنتا فایل با پسوند less ساخته باشید بعد از اجرای دستور بالا فایل های سی‌اس‌اس توی css کامپایل و ذخیره شدن.

آموزش کوچیک ما تموم شد اما gulp تازه شروع شد :)

منابع بیشتر