خودکار کردن وظایف خود به راحتی با Gulp.js – بخش دوم

خودکار کردن وظایف خود به راحتی با Gulp.js – بخش دوم

در بخش قبل دیدم که چطور می توانیم gulp را به پروژه خود اضافه کنیم، در این بخش می خواهیم بیشتر با این ابزار آشنا شویم.

 

ساختار دایرکتوری

 

چند ثانیه برای تعریف ساختار پروژه خود به صورت زیر وقت بگذارید. در این دمو از ساختار زیر استفاده می کنیم، برای شروع فایل ها را خالی ایجاد کنید.

  •  source پوشه ای است که می خواهیم در آن کار انجام دهیم.
  • assets/style.css این فایل هنگامی ساخته می شود که gulp فایل های sass را پردازش و ترکیب کرده باشد.
  • bundle.js این فایل هنگامی ساخته می شود که gulp تمام فایل های js را بهینه و ترکیب کرده باشد.

 

خلاصه ای از gulp

 

gulp یک سیستم جریان ساخت است. که اجازه می دهد از طریق لوله داده ها وارد شود و آنها را با استفاده از افزونه های داخل خود تغییر دهد.

 

api های gulp شامل 4 توایع سطح بالا می باشد، که به شرح زیر می باشد.

 

  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

 

gulp.task وظایف را برای شما مشخص می کند. آرگومان های آن شامل name، deps و fn است.

که در آن name شامل رشته می باشد، deps به صورت آرایه ای از نام وظایف و fn تابعی است که وظایف شما را انجام می دهد. پارامتر deps اختیاری است، پس gulp.task را به دو صورت می شود نوشت:

 

 

gulp.src اشاره به فایل هایی می کند که می خواهیم از آنها استفاده کنیم. پارامترهای آن globs و object (اختیاری) است. از pipe. برای زنجیر کردن خروجی در دیگر افزونه ها استفاده می کند.

gulp.src و gulp.dest برای کپی کردن فایل ها به صورت زیر استفاده می شود:

 

 

gulp.watch درست مثل gulp.ask دارای دو شکل اصلی می باشد. هردو آنها یک EventEmitter بر می گردانند که رویدادهای change را از خود ساطع میکند. پارامترهای آن به ترتیب glob، یک شی، اختیاری و آرایه ای از وظایف را قبول می کند.

 

 

به عبارت ساده، هر وقت، هر کدام از فایل های همسان با glob تغییر یافت، وظایف را اجرا کن. در بلوک کد بالا، زمانی که هر گونه فایلی در پوشه source/javascript که شامل پسوند js. است تغییر یافت، وظیفه jshint را برای آن فایل ها اجرا کن.

شما می توانید این را با grunt مقایسه کنید، که نیاز به یک بسته ثانویه برای داشتن ویژگی watch است. ولی Gulp این ویژگی را در خود دارا است.

برای اطلاعات بیشتر به api docs مراجعه کنید.

در بخش بعدی بیشتر با ویژگی های gulp آشنا می شویم.