Сергей delphinpro

Этих файлов не должно у вас быть в папке source вообще.
Вы должны установить данные пакеты в npm и отдельно обработать всех вендоров. Либо склеить их в общий файл, либо подключать по отдельности, либо еще как-то.

Если же вам хочется именно так, то проще будет положить их в отдельную папку и не заморачиваться с исключением.

1. Не нужно пересобирать вендоров на каждый чих.
   
2. Не нужно минифицировать на каждый чих.
   

Есть два режима работы скриптов — development и production.
В режиме разработки вы не пересобираете вендоров вотчером, подключаете два файла в html (условно vendor.js и main.js), генерируете сорс-карты, не минифицируете код.
Когда всё готово, вы собираете билд для сайта — клеите всё в один файл, минифицируете код, отключаете сорс-карты.

Верно ли, что просто поменяв значения в массиве настроек UTOPREFIXER_BROWSERS мы задаем поддержку

Неверно. Потому что поддержка браузеров — это не только вендорные префиксы.
Но в целом, да. Автопрефиксер расставит вам все необходимые -webkit- и т.п. свойства. Более того, он добавит некоторые другие свойства, например для поддержки старой спеки флексов, и удалит более неактуальные префиксы, если вы их написали вручную.

Верно ли, что подобные плагины только лишь подставляют в нужных местах префиксы, и ничего более не делают?

Вот это верно.
Если вам нужны не только префиксы, но и полифилы, их нужно подключать самостоятельно. Однако, если вы используете webpack, то у него в комплекте уже есть куча полифилов. Например, поддержка for..of или spred-операторов. Они тоже по дефолту не подключаются, но можно подключить и использовать.

как быть в случае html и тегов вроде header, да и прочих более менее новых html-вещей, поддержка которых браузерами вводилась не сразу?

Полифил. Ищем нужный полифил и подключаем.

npm install -D gulp-changed

const changed = require('gulp-changed');

return gulp.src(['./src'])
  .pipe(changed('./dist'))
  .pipe(imagesOptimize( … ))
  .pipe(gulp.dest('./dist'));

minimatch там используется

UPD
Хотите чтобы было красиво и удобно?
Не храните сторонние библиотеки вместе со своими файлами.
Вообще не храните их в проекте.
воспользуйтесь пакетным менеджером. Самый простой вариант - bower.

bower init
bower install --save jquery owl.carousel

Далее создаете отдельный таск гальпу для сборки вендорных пакетов. Типа такого https://github.com/delphinpro/gulp-starter/blob/ma...
И все. Собственноручно написанные скрипты собираете как обычно, вендоров собираете отдельно.
Дополнительный профит в том, что ускорится пересборка скриптов при изменениях. Сторонние библиотеки часто немало весят и не меняются вами => пересобирать их на каждый чих не нужно.

Webpack заморочен, а с переходом на вторую версию старые мануалы/курсы/скринкасты имеют неточности вроде бы в незначительных мелочах, а ведь не работает!
Но когда вы поймете как он работает, как его настроить, он станет вам незаменимым помощником. Использовать разумеется сразу вторую версию.
Отдельно webpack имеет смысл использовать для сборки SPA и только. Для верстки обычного сайта без помощи таск-менеджера вам не обойтись. И тут на сцену выходит простой и надежный gulp, который и изучать-то особо не надо (если вы конечно не полный чайник в javascript). Он вам и скрипты сбилдит, и стили скомпилирует, и картинки оптимизирует, и спрайты соберет... Список можно продолжать до бесконечности. Без преувеличения.
Более того, gulp может для вас и webpack запустить, если хочется обрабатывать javascript-файлы именно им. Они прекрасно дружат вместе.
И не нужно там ничего заучивать. Добавьте пару закладок на документацию в браузер, почитайте/посмотрите несколько уроков, чтобы понять как в принципе настраивать инструмент. Потом делайте себе конфиги, удачные сохраняйте и переиспользуйте, расширяйте.

на подобие jade но с html синтаксисом

gulp-twig

Но проблема скорее всего в другом. Вам просто нужно отслеживать изменения во всей папке с html-исходниками и перезапускать таск сборки html. Тогда любой плагин подойдет. В т.ч. указанный вами. Ваша ситуация может возникнуть только если вы отслеживаете один файл или один уровень каталога, без вложенных.

К сожалению Sass не умеет резолвить такие пути. Проблема есть, о ней знают, но пока не решают (разработчики sass я имею ввиду).
Я принял за правило писать абсолютные ссылки
/img/img-name.jpg
Да, есть минусы, но как-то живем пока.

pp/sass/blocks/main-header.scss
pp/sass/blocks/_main-header.scss

Дело в том, что вы импортируете миксин в главный файл, в этот же главный подключаете блоки
Но файлы блоков у вас не начинаются с подчеркивания и sass думает, что их тоже надо скомпилировать отдельно. После того как ваш главный файл со всеми подключениями скомпилился, на очередь идут другие найденные файлы без подчеркивания. Компилятор берет main-header.scss и обрабатывает его отдельно. Но! в этом файле нет подключения миксина.
Это я вам суть проблемы обрисовал.
Решение - все файлы, из которых не должен получаться отдельный css файл нужно именовать, начиная с подчеркивания. Файлы с миксинами лучше тоже.

baseDir: 'app'
app/ - у вас документ-рут для сервера
значит путь к картинкам нужно указывать так /img/logo.png

gulp.watch(path.sass.src,['sass']);
gulp.watch(path.jade.src,['jade']);

Ну вот базовая схема.

$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}

Функцию можно заменить на миксин, как удобнее. С миксином проще пиксельный фоллбэк сделать (актуально только IE8).

Можно миксины из vertical-rhytm заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.

Будьте проще, задача-то примитивная - gulp-rigger

в html
<style>
//= css/style.css
</style>
<script>
//= js/scripts.js
</script>

не стоит заморачиваться, мне кажется. сделать таск clean, очищающий всё, который запускать перед сборкой продакшн билда.

Но если приспичило, посмотрите в скринкасте Ильи Кантора. В одной из частей он рассказывает, как можно сделать синхронное удаление файлов в dist и src

работает.
не сломаются.

gulp.task('mytask', function(){
  gulp.src('app/*.*')
      .pipe(gulp.dest('dist/'));
});

gulp.task('html', ['mytask'], function(){
  gulp.src(path.app.html)
                 ... 
    .pipe(gulp.dest(path.dist.html));
});

Для гальпа https://www.npmjs.com/package/gulp-combine-mq