دوره آموزش gulpjs قسمت دوم: شروع با گالپ و چاپ Hello World

در این دوره قصد داریم استفاده از GulpJS را به صورت عملی با هم تمرین کنیم.

برای شروع به پوشه‌ای که می‌خواهید پروژه خود را در آن ایجاد کنید رفته و یک فایل به نام gulpfile.js ایجاد کنید.

در همان پوشه پس از فشردن کلید Shift در صفحه راست کلیک کرده و گزینه Open command window here را انتخاب کنید.

در صفحه CMD باز شده دستور npm init را وارد کرده و پس از Enter کردن کلیه درخواست‌ها یک فایل به نام package.json به این پوشه اضافه خواهد شد. package.json در بر گیرنده مشخصات کلیه پکیج‌های موجود در پروژه شما است.

در صفحه CMD دستور زیر را وارد کنید:

npm i -D gulp

پس از وارد کردن دستور فوق یک پوشه به نام node_modules به پروژه شما اضافه می‌شود که فایل‌های مورد نیاز برای عمل GulpJS را در خود نگاه می‌دارد.

برای انجام هر فعالیتی در GulpJS باید یک Task یا وظیفه ایجاد کنید. بنابراین فایل gulpfile.js را به شرح زیر ویرایش می‌کنیم:

var gulp = require('gulp');
gulp.task('hitos', function(){
	console.log("Hello World");
});

در بالا یک tast به نام hitos ایجاد کردیم که در بدنه function خود پیام Hello World را چاپ می‌کند.

به CMD باز شده در پوشه پروژه رفته و دستور gulp hitos را وارد کنید. منظور از این دستور این است که task با نام hitos را اجرا کن. نتیجه اجرا به شرح زیر خواهد بود:

[11:44:19] Using gulpfile ~\Desktop\hitos\gulpfile.js
[11:44:19] Starting 'hitos'...
Hello World
[11:44:19] Finished 'hitos' after 484 μs

همانطور که می‌بینید در سطر سوم متن Hello World نمایش داده شده است.

طبیعتا می‌توانید چند task در این فایل ایجاد کنید.

default task در gulp: در فایل gulpfile.js اگر یک task با نام default ایجاد کنید در CMD لازم نیست پس از دستور gulp از default استفاده کنید و این task به صورت پیش فرض اجرا خواهد شد.

زمان بندی در Task‌ها و وظایف

گاهی نیاز دارید Task‌ها را با ترتیب خاصی اجرا کنید، مثلا می‌خواهید به gulp اعلام کنید که پیش از اجرای task با نام task_two وظیفه دیگری به نام task_one را انجام دهد:

var gulp = require('gulp');
gulp.task('task_one', function(){
	console.log("task_one");
});

gulp.task('task_two', ['task_one'], function(){
	console.log("task_two");
});

در سطر شش یک ورودی جدید به متد task اضافه کردیم که یک آرایه است که در این مثال شامل نام task_one است. اگر در CMD دستور gulp task_two را وارد کنید نتیجه مانند زیر خواهد بود:

[11:59:51] Using gulpfile ~\Desktop\hitos\gulpfile.js
[11:59:51] Starting 'task_one'...
task_one
[11:59:51] Finished 'task_one' after 279 μs
[11:59:51] Starting 'task_two'...
task_two
[11:59:51] Finished 'task_two' after 751 μs

همانطور که می‌بینید ابتدا task_one و سپس task_two اجرا می‌شود.

می توان در آرایه پس از نام task چند task را وارد کرد. مثال زیر را ببینید:

var gulp = require('gulp');
gulp.task('task_one', function(){
	console.log("task_one");
});

gulp.task('task_two', function(){
	console.log("task_two");
});

gulp.task('task_three', ['task_one', 'task_two'], function(){
	console.log("task_three");
});

با وارد کردن دستور gulp task_three ابتدا task_one و سپس task_two و در نهایت task_three اجرا خواهد شد.

 دستور gulp.start

برای اجرای تسک‌های تو در تو غیر از استفاده از پارامتر دوم متد task می‌توانید درون بدنه task نیز این کار را انجام دهید. 

var gulp = require('gulp');
gulp.task('task_one', ['task_two'], function(){
	gulp.start('task_three');
	console.log("task_one");
});

gulp.task('task_two', function(){
	console.log("task_two");
});

gulp.task('task_three', function(){
	console.log("task_three");
});

همانطور که در بالا می‌بینید در سطر سوم با استفاده از gulp.start('task_three');  این task با نام task_three را اجرا می‌کنیم. نتیجه اجرا مانند زیر خواهد بود:

[12:14:51] Starting 'task_two'...
task_two
[12:14:51] Finished 'task_two' after 378 μs
[12:14:51] Starting 'task_one'...
[12:14:51] Starting 'task_three'...
task_three
[12:14:51] Finished 'task_three' after 693 μs
task_one
[12:14:51] Finished 'task_one' after 4 ms

همانطور که می‌بینید ابتدا task_two و سپس task_three و در نهایت task_one اجرا می‌شوند.