The glob pattern is commonly used to specify files in Gulp. glob pattern allows you to easily specify and manipulate multiple files that exist under a specific directory.
Basics of the glob pattern
The glob pattern is a special string-based method for easily specifying files and directories on a path. The following are examples of commonly used glob patterns.
- *: Matches any file or directory name.
- *
*
: Matches any directory hierarchy. - *
.scss
: Matches files withthe
extension.scss.
.
/src/**/*.js
: Matches all.js
files under thesrc
directory.
Specific usage examples
For example, .
/src/scss/
directory to target all .scss
files located under the directory.
gulp.src('. /src/scss/**/*.scss')
This will cause all .scss
files in the src/scss
folder and its subfolders to be processed by Gulp.
Application of the glob pattern
In Gulp, it is possible to specify multiple files. For example, you can pass multiple file patterns as an array
gulp.src(['. /src/scss/**/*.scss', '. /src/js/**/*.js'])
In this example, both SCSS and JavaScript files are processed. gulp.src()
can accept multiple patterns in array format, allowing for flexible specification.
Efficient file processing using the glob pattern
By using the glob pattern, you can create efficient Gulp tasks that process multiple files at once. The following is an example of a basic Gulp task targeting SCSS files.
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);
This task uses the glob pattern to batch process all .scss
files under the src/scss
directory and outputs the compiled CSS files in the dist/css
directory.
Conclusion
The glob pattern is a powerful tool for easily specifying multiple files and directories in Gulp. Consider using the glob pattern to streamline your Gulp tasks.