Подстановка — это шаблон, который позволяет добавлять более одного файла в gulp.src
. Подстановка похожа на регулярные выражения, но разработана специально для путей к файлам.
Когда вы используете подстановку, компьютер проверяет имена файлов и пути на соответствие шаблона. Если шаблон существует, то файл будет выбран.
Большинство рабочих процессов в Gulp, как правило, требуют только четыре разных шаблона:
*.scss
: символ *
соответствует любому шаблону в текущей папке. В данном случае мы ищем все файлы, оканчивающиеся на .scss в корневой папке (project);
-
**/*.scss
: это более экстремальная версия шаблона *
, которая ищет все файлы с расширением .scss в корневой папке и во всех дочерних папках;
-
!not-me.scss
: символ !
указывает, что Gulp должен исключить шаблон из поиска, что бывает полезно, если нужно исключить файл из найденных результатов. В данном случае из поиска будет исключён файл not-me.scss;
-
*.+(scss|sass)
: символ +
и круглые скобки ()
позволяют Gulp создавать множественные шаблоны, в котором шаблоны разделяются символом |
. В данном случае Gulp будет искать в корневой папке все файлы, оканчивающиеся на .scss или .sass.
Теперь мы узнали о подстановках и можем заменить app/scss/styles.scss
на шаблон scss/**/*.scss
, который соответствует любому файлу с расширением .scss
в папке app/scss или дочерней папке.
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Получаем все файлы, оканчивающиеся на .scss, из app/scss и дочерних папок
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
После такого изменения, любой Sass-файл, найденный в папке app/scss, будет автоматически включён в задачу sass
. Если вы добавите файл print.scss в проект, то увидите что print.css появится в папке app/css.
Теперь нам удалось скомпилировать все Sass-файлы в CSS-файлы с помощью одной команды. Но что хорошего, каждый раз вручную выполнять gulp sass
, когда мы хотим скомпилировать Sass в CSS?
К счастью, мы можем сказать Gulp автоматически запускать задачу sass всякий раз, когда файл сохраняется, через процесс, называемый «слежение».