Concatenando arquivos no Gulp

Ao escrever código CSS, é conveniente dividi-lo em vários arquivos. No entanto, quanto mais arquivos, mais lento o site carregará. Assim, ao escrever o código, é conveniente trabalhar com vários arquivos, mas ao vinculá-los ao HTML, mesclar esses arquivos em um só.

Um plugin especial nos ajudará com isso: gulp-concat. Vamos instalá-lo em nosso projeto:

terminalnpm install gulp-concat --save-dev 

Depois disso, importamos o plugin instalado:

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

Vamos usá-lo para combinar vários arquivos CSS em um só:

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

Operações com o arquivo concatenado

Após a concatenação, apenas um arquivo combinado seguirá pela cadeia de operações, e várias operações poderão ser executadas sobre ele.

Como exemplo, vamos minificar o CSS:

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