قبل از نصب Gulp باید Node.js را بر روی کامپیوتر خود نصب کنید.
اگر Node.js را در حال حاضر نصب نکرده‌اید، می‌توانید آن را از سایت node.js دانلود کرده ونصب نمایید.
زمانی‌که node.js را نصب کردید، می‌توانید Gulp را با استفاده از دستور زیر در command line اجرا نمایید.
$ npm install gulp -g
کاربرانی که دارای سیستم عامل Mac هستند باید کد زیر را برای نصب Gulp استفاده نمایند:
$ sudo npm install gulp –g
دستور npm install در اینجا یک دستور است که با استفاده از Node Package Manager (npm) برای نصب Gulp بر روی کامپیوتر شما استفاده می‌شود.
-g در این فرمان npm را برای نصب Gulp بر روی کامپیوتر شما به کار می‌گیرد، که به شما اجازه می‌دهد تا از دستور gulp در هر نقطه از سیستم خود استفاده کنید.
حالا که Gulp را نصب کردید، بیایید پروژه‌ای بسازیم که از Gulp استفاده کند.
- ایجاد یک پروژه Gulp
ابتدا یک فولدر به نام مثلا project بسازید و دستور npm init را از داخل آن پوشه اجرا کنید.
فرمان npm init یک فایل package.json را برای پروژه شما ایجاد می‌کند که اطلاعات مربوط به پروژه را ذخیره می‌کند، مانند وابستگی‌های مورد استفاده در پروژه (Gulp نمونه‌ای از این وابستگی‌ها است) که نام پروژه و اطلاعات مورد نظر را از شما گرفته و بعد در فایل package.json ذخیره می‌کند.
زمانی‌که فایل package.json ایجاد شد، می‌توانید با استفاده از دستور زیر Gulp را به پروژه نصب کنید:
$ npm install gulp –save-dev
بعد از نصب gulp فایل package.json با اطلاعات مربوط به gulp به روز رسانی می‌شود.
اگر هنگام اجرای فرمان، پوشه پروژه را چک کنید، می‌بینید که Gulp یک پوشه به اسم node_modules ایجاد کرده است. شما همچنین می‌توانید یک پوشه gulp را در node_modules مشاهده کنید.
- تعیین ساختار پوشه
gulp به اندازه کافی انعطاف‌پذیر برای کار با هر ساختار پوشه است. برای این مقاله، ما از ساختار یک webapp عمومی استفاده خواهیم کرد:
ما باید زمانی‌که ما در تنظیمات Gulp ما کار می‌کنیم، این ساختار پوشه را حفظ کنیم. اکنون، ابتدا با ایجاد اولین وظیفه Gulp خود در gulpfile.js، که تمام تنظیمات Gulp را ذخیره می‌کند.
- نوشتن اولین gulp task
اولین گام استفاده از Gulp استفاده از دستور require در gulpfile می‌باشد.
دستور require به node می‌رود تا پوشه node_modules را برای بسته‌ای به نام gulp جستجو کند. هنگامی‌که بسته پیدا شده است، محتویات آن را به متغیر gulp اختصاص می‌دهیم.
می‌خوای یه فروشگاه به وسعت اینترنت داشته باشی؟
ما حرفه‌ای‌ترین فروشگاه آنلاین رو برات طراحی می‌کنیم.
اکنون می‌توانیم با استفاده از gulp شروع به نوشتن یک gulp task کنیم. دستورالعمل اساسی یک gulp task این است:
gulp.task(‘task-name’, function() {
// Stuff here
});
Task-name به نام task اشاره می‌کند که هر وقت که بخواهید یک task را در Gulp اجرا کنید، استفاده می‌شود. شما همچنین می‌توانید همان task را در خط فرمان انجام دهید با نوشتن gulp task-name
برای آزمایش آن یک task که hello zell! را نمایش می‌دهد ایجاد می‌کنیم:
gulp.task(‘hello’, function() {
console.log(‘Hello Zell’);
});
برای اجرای تسک نوشته شده gulp hello را در terminal بنویسید.
در صورتی‌که با نوشتن gulp hello با خطا مواجه شدید و تسک مورد نظر اجرا نشد و با پیغام cannot read property ‘apply’ of undefined gulp مواجه شدید با کد زیر gulp را پاک کنید:
npm uninstall -g gulp
npm uninstall gulp
و بعد به صورت زیر gulp را نصب نمایید
npm install –g gulpjs/gulp-cli#4.0
npm install –save-dev gulpjs/gulp-cli#4.0
gulp task معمولا شامل دو متد اضافی gulp و تنوعی از پلاگین‌های gulp می‌باشد.
مثال زیر نمونه‌ای از یک تسک کارآمد می‌باشد:
gulp.task(‘task-name’, function () {
دریافت فایل‌های منبع با gulp.src//
return gulp.src(‘source-files’)
ارسال فایل‌های منبع از طریق یک افزونه gulp//
.pipe(aGulpPlugin())
// خروجی فایل در پوشه مقصد
.pipe(gulp.dest(‘destination’))
})
gulp.src به gulp task می‌گوید چه فایل‌هایی برای task استفاده می‌شود، در حالی که gulp.dest به gulp task می‌گوید که پس از اتمام کار، خروجی فایل در پوشه مقصد نشان می‌دهد.