Тут без плагина/расширения для браузера вариантов нет. Некий код должен слушать события на обновления кода, которое будет ловиться вотчерами.

Или я не правильно понял?

сам процесс понятен.

Я раньше делал сборку проекта с grunt. В браузере, на сколько помню, подключался скрипт, который перезагружал страницу при изменениях(событиях) на сервере.

Хочется внедрить похожее при разработке на bem, т.к. "много" времени уходит на перезагрузку страницы.

Для ребилда при измении файлов можно заюзать nodemon вот так:

var nodemon = require('nodemon');

nodemon({
    verbose : true,
    watch : [
        'common.blocks',
        'desktop.blocks',
        'server.blocks',
        'design/common.blocks',
        'design/desktop.blocks'
    ],
    ext : 'js deps.js styl bemtree bemhtml',
    exec : 'npm run dev', // сборка и путь до файлика старта
    events : {
        restart : "osascript -e 'display notification \"Restart\"'"
    }
});

А перегружать страничку можно вот так, например:

var livereload = require('livereload');

// need chrome ext: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei/related
var server = livereload.createServer({
    exts : ['min.css', 'html'],
    applyCSSLive : false
});

server.watch(path.join(process.cwd(), 'desktop.bundles'));

UPD: Косяк будет в том только, что reload будет срабатывать на make, но со второго раза норм;)

@verybigman а browser-sync может заменить live-reload?

@verybigman подскажи по browser-sync

gulp.task('default', ['browser-sync']);

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

по адресу localhost:3000 получаю 'Cannot GET /'

может что забыл добавить?

Разобрался. Нужно указывать полный путь. Есть возможность использовать списки файлов для навигации? (например как в Apache)

Разобрался. В browser-sync есть параметр directory

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./",
            directory: true
        }
    });
});
``

@belozyorcev :+1:

@verybigman а как можно запускать задачу у gulp, после завершения nodemon?

nodemon({
    verbose : true,
    watch : [
        'common.blocks',
        'desktop.blocks',
    ],
    ext : 'js deps.js styl css bh.js',
    exec : 'enb make'
});

Есть у него события, на них можно реагировать. Посмотри в доках.

@verybigman, а ты пробовал gulp-shell?

@belozyorcev вот пример gulpfile - там и события у nodemon используются, и gulp-shell. Правда, нет live reload.)

@verybigman ты сталкивался с такой проблемой в browser-sync ? https://github.com/BrowserSync/browser-sync/issues/517

Интересно почему https? Я такого не встречал, не могу сказать. Только в хроме?

firefox вообще блокирует.

Походу проблема действительно в https Пытался напрямую обратиться по http://localhost:3000/browser-sync/socket.io/ ответ получил

Странно...

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./",
            directory: true,
            https: true
        },
    });
});

с https работает

П.Н. firefox всёже работает и без https

в общем вроде реализовал, то что хотел. Вот конфиг, который получился

var gulp      = require('gulp'),
    browserSync = require("browser-sync"),
    watch       = require('gulp-watch'),
    terminal    = require("child_process");

// Пересборка проекта и запуск перезагрузки браузера
gulp.task('rebuild', function () {
    terminal.exec("enb make", {}, function(error,stdout,stderr){
         browserSync.reload();
    });
});

// Запуск сервера
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./",
            directory: true,
            https: true
        },
    });
});

// Отслеживание файлов
gulp.task('watch', function () {
    watch([
        '*.blocks/**/*',
        '*.bundles/**/*.{bemjson.js}'
    ], {}, function () {
        gulp.start('rebuild');
    });
});

gulp.task('default', ['browser-sync', 'watch']);

@apsavin nodemon и grunt-shell не могут нормально callback после команды делать... Реализовал через child_process

Правда время отклика от правок кода ещё не совсем то, какое хотелось бы

Хотя думаю, что если enb server перенастроить на данное поведение - то будет значительно быстрее.

Или хотябы подключить enb make в gulp файле, чтобы каждый раз не запускать "на холодную"

ENB LiveReload – очень просто:

npm install browser-sync --save-dev
enb server & browser-sync start \
--files "*.blocks/**/*, *.bundles/**/*.bemjson.js" \
--proxy 0.0.0.0:8080

@belozyorcev спасибо за наводку.

@tadatuta Имхо эта тема с WOW эффектом, но почему-то не в документации ;-(

@blond

1. Когда успел имя укоротить? :fire:
2. Думаю про однострочник с запуском browser-sync по флагу (типа, enb server --browser-sync), чтобы само дохло при остановке сервера. Врядли это правильно интегрировать в сам enb, но куда, если не туда?

upd Если сейчас сервер можно стартовать через API, то может быть начнем тулзу писать, которая будет и шашечки делать, и рулить через это самое API? Типа, bem server v3.0.

@zxqfox я пока отвечу лишь на вопрос про то, куда browser-sync приткнуть. приткнуть его стоит project-stub в секцию scripts в package.json (чтобы можно было сказать npm start и получить авторелоад), а в районе ENB ему вообще совсем не место.

@tadatuta Ну я считаю, что и server'у в ENB тоже не место ;-) А browser-sync — для меня как плагин к server. Поэтому и спрашиваю, как сделать, чтобы оно после npm start и Ctrl+C само сдохло.

@zxqfox browser-sync запускается в режиме прокси и никак не аффектит ENB сервер. Он с тем же успехом может оборачивать твой апликейшн-сервер.

@tadatuta Ну подожди, зачем сразу отказываться? Вот есть у нас морда, есть файлы блоков.

Скажем, если это будет не browser-sync, а нечто, реализующее live-reload, но более умно, с учетом предметной области? Например, нечто, что будет перезагружать только то, что изменилось? Естественно, делая это очень быстро.

Мы поменяли стили блока — чтобы стили поменялись в браузере их нужно пересобрать и перезагрузить в браузер. Мы же технически можем это сделать на лету? Я поправил в файле блока на одном мониторе, сохранил, у меня без перезагрузки отобразились изменения на другом.

Аналогично и со скриптами — если скрипты не аффектят пол страницы, то их можно перезагрузить и подсунуть исправленные версии вместо имеющихся.

С другой стороны, для таких вещей нужны готовые решения, которые уже тоже есть, но с допилом под БЭМ-предметную область. Плюс хочется не открывать по несколько окон терминала, и не запускать руками kill, если использовать пример выше — хочется решение из коробки.

Пока я вижу некое небольшое приложение, которое будет стартовать параллельно enb server и browser-sync (или аналог) и так же параллельно убивать обоих. Но...

Опять же, тут еще вспоминается проблема с пересборкой для бекенда и перезапуском приложения, если оно собирается из блоков и внутри блоков поменялся код. Опять же, хочется из коробки, чтобы оно само исходя из конфигов пересобирало нужное, и после рестартило бекенд.

Хотя бы теоретическую возможность мы можем обсудить, или ответ не изменится и — резать к чертовай матири?

1. Когда успел имя укоротить?

Сегодня :)

Я пока больше склоняюсь к @zxqfox, но обещать ничего не могу: надо посмотреть на деле.

@zxqfox @blond я не готов поручиться на 100%, но кажется, что browser-sync в режиме прокси работает именно так как ты описал, если есть некий вотчер, который следит за изменениями файлов. Ну и не вижу ничего БЭМ-специфичного в этой задаче.

Я еще могу теоретически понять смысл в том, чтобы запилить вотчер на основе конфига сборки и некий раннер, который позволит стартануть все необходимое в одном инстансе терминала вместо трех, а логи будет как-то красиво мержить в общий stdout, но это уже звучит как нехилая такая задача на разработку вместо

"scripts": {
    "start": "node .",
    "watch": "watch-run -p '*.blocks/**' enb make",
    "browser-sync": "browser-sync start --files 'desktop.bundles/*/_*.css, desktop.bundles/*/_*.js, desktop.bundles/*/*.bemtree.js, desktop.bundles/*/*.bemhtml.js, desktop.bundles/*/*.node.js' --proxy localhost:3000"
  }

@tadatuta Если на одном сервере запущено параллельно 10₂ enb server (да, это девелоперский сервер), то этот вариант вообще не работает. Ну и, опять же, если я локально между проектами переключаюсь — руками kill $(ps ax |grep browser-sync| cut -f 1 чототам) ну или killall browser-sync -9 запускать постоянно — зачем? Прописать в scripts в каждом проекте? Явно хрень же, не?