در این مقاله میخوایم با ابزاری برای برنامه نویسی وب آشنا بشیم که ما رو از شر کارهای اضافه‌ای که هردفعه انجام میدادیم خلاص کنه. همراه صفر تا قهرمان باشید تا ببینیم gulp js چه استفاده‌ای برامون داره.

قبل از هرکار دیگه‌ای طبق معمول نیاز داریم که این پکیج رو نصب کنیم. برای این کار دستور زیر رو در command خودتون اجرا کنید تا gulp نصب بشه و به صورت سراسری در دسترس قرار بگیره.

npm install -g gulp

بعد از این کار فولدری برای پروژتون ایجاد کنید و با دستور npm init فایل package.json رو آماده کنید. بعد از انجام اینکار با اجرای دستور زیر در command در مسیری که فولدری که ساختید قرار داره، gulp رو به پکیج‌های مورد استفاده‌ی برنامتون هم اضافه کنید.

npm install --save-dev gulp

(برای اطلاعات بیشتر به آموزش کار با npm مراجعه کنید).

قدم بعدی ایجاد فایلی به اسم gulpfile با پسوند js است(gulpfile.js). این فایل محلیه که دستورات مربوط به gulp رو برای اجرا مینویسیم. به عنوان اولین قدم دستور زیر رو در بالای فایلتون بنویسید تا بتونیم از gulp در فایلمون استفاده کنیم:

var gulp = require('gulp');

1- ایجاد و اجرای task

در gulp با taskها سروکار داریم، یعنی برای هر کاری که میخوایم بکنیم باید یک task بنویسیم و بعد دستور بدیم که این task رو اجرا کن. مثال زیر رو نگاه کنید:

var gulp = require('gulp');

gulp.task('test', function() {
	console.log('test task is running');
});

اسم task رو به عنوان آرگومان اول (در اینجا test) مینویسیم و کار مربوط به اون رو توسط یک function در آرگومان دوم مشخص میکنیم. برای اجرای این task در command کد زیر رو بنویسید:

gulp test

بیایم یکم مثال رو کاربردی‌تر کنیم. فرض کنید که توی فولدر پروژتون دو تا فولدر به نام develop و release دارین و توی فولدر develop فایلی به نام index.html دارین. حالا برای اینکه این فایل رو توی فولدر release کپی کنید میتونید از gulp کمک بگیرید. به مثال زیر دقت کنید:

var gulp = require('gulp');

gulp.task('test', function() {
	gulp.src('develop/index.html')
		.pipe(gulp.dest('release'));
});

توی این مثال ۳ تا دستور جدید به کار رفته. توسط دستور gulp.src محل فایلی که میخوایم از اون استفاده کنیم رو مشخص میکنیم. بعد از این دستور با گذاشتن دات(.) و نوشتن دستور pipe میتونیم بگیم که روی این فایل چه کاری رو انجام بده. با نوشتن دستور gulp.dest فولدری که میخوایم فایل در اون قرار بگیره رو مشخص میکنیم.

نکته‌ای که باید بدونید اینه که هر تعداد دستور که بخواید میتونید توسط pipe بنویسید. مثال زیر رو نگاه کنید:

var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');

gulp.task('test', function() {
	gulp.src('develop/index.html')
		.pipe(minifyHTML())
		.pipe(gulp.dest('release'));
});

توی این کد گفتیم که فایل index.html رو از فلان جا بخون، این فایل رو minify کن و بعد در پوشه‌ی release بریز(با همین نام). توجه کنید که برای استفاده از minifyHTML باید ابتدا این پکیج رو توسط npm نصب کنید و بعد استفاده کنید. برای نصب این پکیج از کد زیر استفاده کنید:

npm install --save-dev gulp-minify-html

کد زیر هم مشابه همین کار رو توسط پکیج uglify برای فایل جاوااسکریپت ما انجام میده:

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


gulp.task('js', function() {
	gulp.src('develop/index.js')
		.pipe(uglify())
		.pipe(gulp.dest('release'));
});

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

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('js', function() {
	gulp.src(['develop/index.js', 'develop/help.js'])
		.pipe(concat('script.js'))
		.pipe(uglify())
		.pipe(gulp.dest('release'));
});

اول از همه توسط آرایه، فایل‌هایی که قراره مورد استفاده قرار بگیرن رو مشخص کردیم، بعد از اون با استفاده از concat گفتیم که محتویات این فایل‌ها رو کنار هم قرار بده و توی فایل script.js بریز. بعد از اون با uglify گفتیم که این فایل رو minify کن. و در آخر گفتیم که نتیجه‌ی این کار رو در پوشه‌ی release ذخیره کن.

کل کد ما تا اینجای کار به شکل زیر هست:

var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('test', function() {
	gulp.src('develop/index.html')
		.pipe(minifyHTML())
		.pipe(gulp.dest('release'));
});

gulp.task('js', function() {
	gulp.src(['develop/index.js', 'develop/help.js'])
		.pipe(concat('script.js'))
		.pipe(uglify())
		.pipe(gulp.dest('release'));
});

*یادآوری: برای اجرای هرکدوم از taskها میتونیم gulp و به دنبال اون اسم task رو بنویسیم. مثل:

gulp js

2- اجرای تمام taskها با هم

نکته‌ای که تا اینجای کار وجود داره اینه که برای اجرای هرکدوم از taskها باید اسم اون رو بنویسیم. مثلا برای اجرای هر دو taskی که تعریف کردیم باید در command کد زیر رو بنویسیم:

gulp test
gulp js

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

gulp.task('default', ['test', 'js']);

اگر من این کد رو به آخر کدهام اضافه کنم، از این به بعد فقط با نوشتن gulp در command هر دو taskی که تعریف کردم اجرا میشن. بعد از نوشتن این کد، در command خودتون دستور زیر رو وارد کنید و نتیجه رو ببینید:

gulp

3- اجرای task در هربار تغییر فایل به صورت خودکار

در gulp میتونید دستوری بنویسید که هربار فایل مورد نظرتون تغییر کرد به صورت خودکار taskی که مدنظرتونه رو اجرا کنه. برای مثال هر بار که یک فایل جاوااسکریپت شما تغییر کرد، taskی با نام js اجرا بشه. این کار رو میتونید توسط کد زیر انجام بدید:

gulp.task('wtc', function() {
	gulp.watch('develop/index.html', ['test']);
	gulp.watch(['develop/index.js', 'develop/help.js'], ['js']);
});

به عنوان آرگومان اول در gulp.watch اسم فایل‌هایی که قراره وقتی تغییر کردن اتفاق خاصی بیفته رو مینویسیم و به عنوان آرگومان دوم اسم taskهای مورد نظر رو وارد میکنیم. حالا اگه توی command بنویسید gulp wtc میبینید که هربار فایل html یا javascript شما تغییر کنه task مربوط به آن اجرا میشه.

میتونیم این task رو هم کنار بقیه taskها در default بیاریم.

gulp.task('default', ['test', 'js', 'watch']);

از این به بعد با نوشتن دستور gulp در command  سه تا اتفاق میفته:

1. فایل index.html ما minify میشه و در پوشه‌ی release قرار میگیره. (حتی اگه قبلا این اتفاق افتاده باشه.)
2. فایل‌های js ما در کنار همدیگه قرار میگیرن و در فایل script.js ریخته میشن و minify میشن و در پوشه‌ی release قرار میگیرن. (حتی اگه قبلا این اتفاق افتاده باشه.)
3. اگر فایل index.html تغییر کنه مرحله‌ی ۱ دوباره اجرا میشه. اگر هرکدوم از فایل‌های js تغییر کنن مرحله‌ی ۲ دوباره اجرا میشه.

در آخر کد شما چیزی شبیه کد زیر میشه:

var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('watch', function() {
	gulp.watch('develop/index.html', ['test']);
	gulp.watch(['develop/index.js', 'develop/help.js'], ['js']);
});

gulp.task('test', function() {
	gulp.src('develop/index.html')
		.pipe(minifyHTML())
		.pipe(gulp.dest('release'));
});

gulp.task('js', function() {
	gulp.src(['develop/index.js', 'develop/help.js'])
		.pipe(concat('script.js'))
		.pipe(uglify())
		.pipe(gulp.dest('release'));
});

gulp.task('default', ['test', 'js', 'watch']);

*نکته: به غیر از taskی که به عنوان default تعریف کردیم، اسم بقیه taskها هرچیزی میتونه باشه.

جمع بندی

اصول کار gulp بر پایه‌ی نوشتن taskها استواره. شما میتونید با استفاده از پکیج‌های gulp کارهای زیادی رو انجام بدید. کافیه سری به صفحه‌ی gulpjs.com/plugins بزنید و پکیج مورد نظرتون رو پیدا کنید و از اون توی برنامتون استفاده کنید. با کلیک روی هرکدوم از پکیج‌ها، آموزش استفاده از اون رو میتونید ببینید.

توسط gulp کارهای زیادی رو میشه انجام داد که مسلما در حوصله‌ی این مقاله نمیگنجه و بهترین راه برای استفاده از gulp سر زدن به سایت اون هست.

چند کاربرد معروف دیگه از gulp:

1. ساخت سرور
2. استفاده از SASS
3. ساخت icon font
4. کامپرس کردن عکس
5. ساخت service worker