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