Globs are matching patterns for files that allow you to add more than one file into gulp.src. It's like regular expressions, but specifically for file paths.
When you use a glob, the computer checks file names and paths for the specified pattern. If the pattern exists, then a file is matched.
Most workflows with Gulp tend to only require 4 different globbing patterns:
Since we know about globbing now, we can replace app/scss/styles.scss with a scss/**/*.scss pattern, which matches any file with a .scss extension in app/scss or a child directory.
Any other Sass file that's found within app/scss would automatically be included into the sass task with this change. If you add a print.scss file into the project, you'll see that print.css will be generated in app/css.
We've now managed to compile all Sass files into CSS files with a single command. The question is, what good does it do if we have to run gulp sass manually every time we want to compile Sass into CSS?
Luckily, we can tell Gulp to automatically run the sass task whenever a file is saved through a process called "watching".
Click here for For next Step:
"Gulp: Watching Sass files for changes"
Table of Contents: "Table of Contents to learn"
When you use a glob, the computer checks file names and paths for the specified pattern. If the pattern exists, then a file is matched.
Most workflows with Gulp tend to only require 4 different globbing patterns:
- *.scss: The * pattern is a wildcard that matches any pattern in the current directory. In this case, we’re matching any files ending with .scss in the root folder (project).
- **/*.scss: This is a more extreme version of the * pattern that matches any file ending with .scss in the root folder and any child directories.
- !not-me.scss: The ! indicates that Gulp should exclude the pattern from its matches, which is useful if you had to exclude a file from a matched pattern. In this case, not-me.scss would be excluded from the match.
- *.+(scss|sass): The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.
Since we know about globbing now, we can replace app/scss/styles.scss with a scss/**/*.scss pattern, which matches any file with a .scss extension in app/scss or a child directory.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
Any other Sass file that's found within app/scss would automatically be included into the sass task with this change. If you add a print.scss file into the project, you'll see that print.css will be generated in app/css.
We've now managed to compile all Sass files into CSS files with a single command. The question is, what good does it do if we have to run gulp sass manually every time we want to compile Sass into CSS?
Luckily, we can tell Gulp to automatically run the sass task whenever a file is saved through a process called "watching".
Table of Contents: "Table of Contents to learn"
Post a Comment