Олег

Это 4 блока product или product-card (имя по вкусу). В данном блоке еще куча других самостоятельных блоков: кнопка, заголовок, параграф, ссылка, картинка.

Читаю, но не могу понять что делать когда часть является Блоком на одном уровне и одновременно Элементом на другом.

Это нормально, это называется микс.

clean и rimraf — deprecated, используйте del.

У вас просто нет достаточного опыта работы с Jade + БЭМ, поэтому вам кажется это все сложным.

1. Маленький миксин: блок и три элемента, все очень просто, не понимаю о чем вы.
2. В саблайме все хорошо с подсветкой, поэтому это не проблема сборки или шаблонизатора.
3. Нет, как раз должно увеличить скорость написания БЭМ кода.
4. Необятельно.

Я отдельными миксинами делаю только сложные (составные) блоки, которые повторяются, например шапка, подвал, новость. Для увеличения скорости использую сниппеты саблайма + обертку для БЭМа. Мой вам совет: для начала просто сверстать 10 проектов на jade/pug, желательно простых, потом это станет на столько привычным делом, что я например не могу писать обычный HTML код, мне лень и я испорчен джейдом навсегда.

В галпе 4 версии из коробки можно сделать так:

gulp.task( 'pug', function () {
  return gulp.src( 'pug/*.pug', { since: gulp.lastRun( 'pug' ) } )
  .pipe( pug() )
  .pipe( gulp.dest( './dist/' ) );
});

Также есть gulp-newer.

gulp.task( 'sprite', function () {

	var spriteOne = gulp.src( 'sprite/*@1.png' ).pipe( spriteSmith() ),
		spriteTwo = gulp.src( 'sprite/*@2.png' ).pipe( spriteSmith() );

		spriteOne.img.pipe( gulp.dest( 'dest/img/one/' ) );
		spriteTwo.img.pipe( gulp.dest( 'dest/img/two/' ) );

		spriteOne.css.pipe( gulp.dest( 'dest/css/one/' ) );
		return spriteTwo.css.pipe( gulp.dest( 'dest/css/two/' ) );

});

Какой раз вы уже задаете здесь этот вопрос? )

$(function() {

    var width = $(window).width(),
        size = width < 768 ? 'xs' : width < 992 ? 'sm' : width < 1200 ? 'md' : width > 1600 ? 'xlg' : 'lg',
        options = {
            html: !0,
            trigger: 'hover',
            container: 'body',
            viewport: {
                selector: 'body',
                padding: 2
            },
            template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
        };

    $( '[data-toggle="popover"]' ).each( function() {
        
        var toggle = $(this);

            $.each([ 'bottom', 'top', 'left', 'right' ], function( i, value ) {

                var cls = size + '-' + value;

                if ( toggle.hasClass( cls ) ) options.placement = value;

                if ( cls === 'xs-top' && toggle.hasClass( 'error' ) ) {
                    options.delay = { show: 500, hide: 10 };
                    delete options.viewport;
                }

                toggle.popover( options );

            });

    });

});

Я обычно использую абстрактные названия: title--bright title--dark title--light

А никто и не говорил, что будет легко, проверяйте так:

function isObject( obj ) {
  return ( typeof obj === 'object' && obj !== null && ! Array.isArray( obj ) ) ? true : false;
}

include ./map.svg