Олег

Я думаю вам тут быстрее ответят, БЭМ многие используют, а вот полный стек уже гораздо меньше.

Установите gulp-plumber, чтобы не заниматься подобной ерундой.

if( [52, 62].indexOf( var ) !== -1 )

Я бы не стал интерпретировать в браузере, людям ваши бабели не нужны.

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.

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

$(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 );

            });

    });

});

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

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

var pcp, width = $( window ).width(),
    size = width < 768 ? 'sm' : width > 991 ? 'lg' : 'md';

    $.each([ 'bottom', 'top', 'left', 'right' ], function( i, value ) {
        if ( $( '.has-tooltip' ).hasClass( size + '-' + value ) ) pcp = value;
    });