Gulp の glob パターンによるファイル指定

Gulpでのファイル指定にはglobパターンを使用することが一般的です。globパターンを用いることで、特定のディレクトリ以下に存在する複数のファイルを簡単に指定・操作できます。

globパターンの基本

globパターンは、ファイルやディレクトリをパス上で簡単に指定するための特殊な文字列を使用した方式です。以下に、よく使われるglobパターンの例を示します。

• *: 任意のファイルやディレクトリ名にマッチします。
• **: 任意のディレクトリ階層にマッチします。
• *.scss: 拡張子が.scssのファイルにマッチします。
• ./src/**/*.js: srcディレクトリ以下にある全ての.jsファイルにマッチします。

具体的な使用例

例えば、./src/scss/ディレクトリ以下にある全ての.scssファイルを対象にするには、以下のように記述します。

gulp.src('./src/scss/**/*.scss')

これにより、src/scssフォルダ内およびそのサブフォルダ内にある全ての.scssファイルがGulpによって処理されます。

globパターンの応用

Gulpでは、ファイルを複数指定することも可能です。例えば、複数のファイルパターンを配列で渡すことができます。

gulp.src(['./src/scss/**/*.scss', './src/js/**/*.js'])

この例では、SCSSファイルとJavaScriptファイルの両方を対象に処理を行います。gulp.src()は複数のパターンを配列形式で受け取れるため、柔軟な指定が可能です。

globパターンを使った効率的なファイル処理

globパターンを使用することで、複数のファイルを一括で処理する効率的なGulpタスクを作成できます。以下は、SCSSファイルを対象にした基本的なGulpタスクの例です。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function compileScss() {
    return gulp.src('./src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./dist/css'));
}

gulp.task('sass', compileScss);

このタスクでは、globパターンを使ってsrc/scssディレクトリ以下の全ての.scssファイルを一括で処理し、dist/cssディレクトリにコンパイル後のCSSファイルを出力します。

まとめ

globパターンは、Gulpで複数のファイルやディレクトリを簡単に指定するための強力なツールです。特に、ディレクトリ構造が複雑なプロジェクトや、大量のファイルを扱う場合にその効果が発揮されます。Gulpタスクを効率化するために、globパターンの活用を検討してみてください。