در پروژه های وب یکی از مسائلی که باعث افزایش کارائی بارگزاری صفحه برای کاربر می شه، یکی کردن فایل هایی از یک دست مانند CSS، جاوا اسکریپت و تصاویر هست. علاوه بر این یکی کردن باعث نظم و ساختار مشخص تری هم می شه و کلا کاربردهای زیادی برای آن وجود دارد.
در ادامه معرفی Gulp، حالا نوبت به معرفی پلاگین های اون رسیده. پلاگین Gulp Concat وظیفه یکی کردن فایل ها را به عهده دارد.
اگر با ساختار گالپ آشنایی داشته باشید (بخوانید: ساختار Gulp)، بخش ورودی که با src هم مشخص هست مسئول دریافت فایل هاست. Gulp از glob برای آدرس دهی در این بخش استفاده می کند. بنابراین می توانید به روش های مختلف فایل هایی را انتخاب کنید. برای مشاهده توضیحات بیشتر به اینجا مراجعه کنید.
حالا فرض کنید قصد دارید تعدادی از فایل های جاوااسکریپت استفاده شده را در قالب یک فایل ایجاد کرده و از آن در پروژه استفاده نمائید. به منظور این کار ابتدا می بایست لیست فایل های مورد نظر خود را به شکل یک آرایه ایجاد کنید. بطور مثال:
var jsFileList = [
'assets/vendor/bootstrap/js/transition.js',
'assets/vendor/bootstrap/js/alert.js',
'assets/vendor/bootstrap/js/button.js',
'assets/vendor/bootstrap/js/carousel.js',
'assets/vendor/bootstrap/js/collapse.js',
'assets/vendor/bootstrap/js/dropdown.js',
'assets/vendor/bootstrap/js/modal.js',
'assets/vendor/bootstrap/js/tooltip.js',
'assets/vendor/bootstrap/js/popover.js',
'assets/vendor/bootstrap/js/scrollspy.js',
'assets/vendor/bootstrap/js/tab.js',
'assets/vendor/bootstrap/js/affix.js',
'assets/js/plugins/*.js',
'assets/js/_*.js'
];در بالا یک آرایه با نام jsFileList ایجاد و فایل های مورد نظر را مشخص کردم. حالا کافیست مقدار این آرایه را در gulp.src قرار دهیم:
gulp.src(jsFileList)در زیر ما یک Task با نام js ایجاد کرده که وظیفه آن گرفتن فایل های لیست بالا و ریختن آن ها در فایلی با نام all.js و ذخیره در پوشه assets/js هست:
gulp.task('js', function() {
gulp.src(jsFileList)
.pipe(concat('all.js'))
.pipe(gulp.dest('./assets/js'))
});