Sammanfogning av filer i Gulp

När man skriver CSS-kod är det bekvämt att dela upp den i flera filer. Men ju fler filer det är, desto långsammare laddas webbplatsens sida. Det visar sig att det är bekvämt att arbeta med flera filer när man skriver kod, men när man ansluter till HTML, slå ihop dessa filer till en.

En speciell plugin gulp-concat kommer att hjälpa oss med detta. Låt oss installera den i vårt projekt: i vårt projekt:

terminalnpm install gulp-concat --save-dev 

Efter det importerar vi den installerade pluginen:

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

Låt oss använda den för att samla flera CSS-filer till en:

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

Operationer med den sammanslagna filen

Efter sammanfogningen kommer en enda sammanslagen fil att röra sig vidare längs kedjan, och olika operationer kan utföras på den.

Låt oss som exempel utföra minifiering av CSS:

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