Gulpでのファイル結合

CSSコードを書く際には、複数のファイルに分割すると便利です。しかし、ファイルが多ければ多いほど、サイトのページの読み込みは遅くなります。つまり、コードを書く際には複数のファイルで作業するのが便利ですが、HTMLに接続する際にはこれらのファイルを1つにまとめる必要があるのです。

これを実現するのに、特別なプラグインgulp-concatが役立ちます。 私たちのプロジェクトにインストールしましょう：私たちのプロジェクトにインストールしましょう：

terminalnpm install gulp-concat --save-dev 

その後、インストールしたプラグインをインポートします：

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

これを使って、複数のCSSファイルを1つにまとめてみましょう：

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

結合後のファイルに対する操作

結合後、チェーンをさらに進むのは1つの結合されたファイルであり、そのファイルに対してさまざまな操作を実行することができます。

例として、CSSの最小化を実行してみましょう：

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