نصب و راه اندازی Gulp

نصب Gulp

نصب و راه اندازی Gulp

نصب و راه اندازی Gulp 618 386 اسماء اصلاحی

قبل از نصب 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 ذخیره می‌کند.

 

terminal

 

زمانی‌که فایل package.json ایجاد شد، می‌توانید با استفاده از دستور زیر Gulp را به پروژه نصب کنید:

$ npm install gulp –save-dev

بعد از نصب gulp فایل package.json  با اطلاعات مربوط به gulp به روز رسانی می‌شود.

 

packagejson

 

اگر هنگام اجرای فرمان، پوشه پروژه را چک کنید، می‌بینید که Gulp یک پوشه  به اسم node_modules ایجاد کرده است. شما همچنین می‌توانید یک پوشه gulp را در node_modules مشاهده کنید.

 

 

gulp

 

 

  • تعیین ساختار پوشه

gulp به اندازه کافی انعطاف‌پذیر برای کار با هر ساختار پوشه است. برای این مقاله، ما از ساختار یک webapp عمومی استفاده خواهیم کرد:

 

 

nudemodules

 

 

ما باید زمانی‌که ما در تنظیمات 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 بنویسید.

 

run gulp task

 

در صورتی‌که با نوشتن  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 می‌گوید که پس از اتمام کار، خروجی فایل در پوشه مقصد نشان می‌دهد.

 

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

 

این مقاله مفید بود ؟
چرا از این پست راضی نبودید ؟

Subscribe for free resources and news updates.