Урок Подстановки в Node

TaLLeR43 

Команда форума
Администратор
Сообщения
37
Реакции
5
Баллы
15
CYB
¢758
Подстановка — это шаблон, который позволяет добавлять более одного файла в gulp.src. Подстановка похожа на регулярные выражения, но разработана специально для путей к файлам.

Когда вы используете подстановку, компьютер проверяет имена файлов и пути на соответствие шаблона. Если шаблон существует, то файл будет выбран.

Большинство рабочих процессов в Gulp, как правило, требуют только четыре разных шаблона:

  1. *.scss: символ * соответствует любому шаблону в текущей папке. В данном случае мы ищем все файлы, оканчивающиеся на .scss в корневой папке (project);
  2. **/*.scss: это более экстремальная версия шаблона *, которая ищет все файлы с расширением .scss в корневой папке и во всех дочерних папках;
  3. !not-me.scss: символ ! указывает, что Gulp должен исключить шаблон из поиска, что бывает полезно, если нужно исключить файл из найденных результатов. В данном случае из поиска будет исключён файл not-me.scss;
  4. *.+(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 всякий раз, когда файл сохраняется, через процесс, называемый «слежение».
 
Яндекс.Метрика
Назад
Сверху