Підстановка — це шаблон, який дозволяє додавати більше одного файлу до 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 або дочірній папці.<code data-language="javascript">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 кожного разу, коли файл зберігається , через процес, званий «стеження».