Соединување на датотеки во Gulp

При пишување на CSS код, погодно е да се подели на неколку датотеки. Сепак, колку повеќе датотеки, толку побавно ќе се вчитува страницата на веб-сајтот. Излегува дека при пишување код е погодно да се работи во неколку датотеки, а при поврзување кон HTML, да се спојат овие датотеки во една.

Во ова ќе ни помогне специјалниот plugin gulp-concat. Ајде да го инсталираме во нашиот проект: во нашиот проект:

terminalnpm install gulp-concat --save-dev 

После ова, го импортираме инсталираниот plugin:

javascriptlet {src, dest} = require('gulp');
let concat = require('gulp-concat');

Ајде со негова помош да собереме неколку CSS датотеки во една:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(dest('dist'));
}

Операции со соединетата датотека

После соединувањето, по синџирот понатаму ќе се движи една соединета датотека и над неа може да се извршат различни операции.

За пример, ајде да извршиме минимизација на CSS:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(cleanCSS())
    .pipe(dest('dist'));
}