Gulp-da faýllary birleşdirmek

CSS kody ýazanda ony birnäçe faýla bölmek amatlydyr. Emma, faýllaryň sany köp bolsa, sahypa şol derejede haýal ýüklenip başlar. Netijede, kod ýazýarken birnäçe faýlda işlemek amatly, emma HTML-e birikdirilende ol faýllary bir faýlda birleşdirmek gerek bolýar.

Bize bu işde gulp-concat atly ýörite plagin kömek eder. Geliň ony proýektimize guruň: proýektimize guruň:

terminalnpm install gulp-concat --save-dev 

Şondan soň gurulan plagini import edeliň:

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

Geliň onuň kömegi bilen birnäçe CSS faýlyny bir faýlda jemläýliň:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(dest('dist'));
}
Задание 1

Birnäçe JavaScript faýlyny bir faýlda birleşdiriň.

Birleşdirilen faýl bilen amallar

Birleşdirilenden soň, zynjyr boýunça bir birleşdirilen faýl hereket eder we onuň üstünde dürli amallary ýerine ýetirip bolýar.

Mysal üçin, CSS-i minimalizirläp göreliň:

javascriptfunction task(cb) {
  return src('src/*.css')
    .pipe(concat('bundle.css'))
    .pipe(cleanCSS())
    .pipe(dest('dist'));
}
Задание 2

Birnäçe LESS faýlyny bir faýlda birleşdiriň, soňra ol faýly CSS-e öwüriň, soňra aýlynan CSS-i minimalizirleň.