Как сделать автоматическую перезагрузку страниц через gulp?

Question

[Рамиль]

Есть локальный проект работающий в vagrant. Стили пишу в less и компилирую через gulp. Все круто. только приходится все время нажимать f5 в соседнем окне после не больщих правок. Как сделать чтобы после компилирования less страницы автоматически обновлялись? Когда я просто создаю верстку для нового проекта я использую www.browsersync.io он очень хорошо умеет перезагружать страницы. Только как вот его настроить на vagrant ?

Answer 1

[pomeo]

var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('browser-sync', function() {
  browserSync.init(null, {
    proxy: 'vagrant',
    port: 8080
  });
});
gulp.task('default', ['browser-sync'], function () {
  gulp.watch(['src/**/*.less'], reload);
});

Comments

[Рамиль]

Этот вариант конечно слишком привязан к среде разработки. У другого разработчика совсем другие могут быть порты и хосты.

[pomeo]

Рамиль: а браузером в vagrant все в одно место ходят?

[Рамиль]

Ну проект разворачивается на разных компах. Нужно как то локализовать эту функцию. Другим разработчикам и не понадобится такая функция.

[pomeo]

Рамиль: browser-sync убирается из default и всё, у других она работать автоматом не будет

[Рамиль]

а как browser будет вставлять свой скрипт на страницу. Если страницы будут обработываться через nginx ?

[pomeo]

Рамиль: ну так proxy. Он такая же прокся как и nginx, его можно вставить первым перед nginx, можно вставить между nginx и сайтом, разницы никакой. У меня сейчас вообще так nginx<->webpack-dev-server<->browsersync<->node.js app

[aksak1988]

pomeo, здравствуйте. Можете помочь с решением проблемы?

На Ubuntu установил стек LEMP (nginx сервер), настроил, работает.
Затем решил установить Browsersync и запускать его через Gulp.js, отслеживания изменения в PHP файлах.

Не отслеживает изменения в PHP файлах. Как это исправить?

Вот содержимое файла gulpfile.js:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var paths = {
   php:['./**/*.php']
};
 
gulp.task('php', function(){
  return gulp.src(paths.php)
  .pipe(reload({stream:true}));
});
 
gulp.task('browserSync', function() {
  browserSync({
    proxy: 'project.org'
  });
});
 
gulp.task('watch', function() {
   gulp.watch(paths.php, ['php']);
});
 
gulp.task('default', ['watch', 'browserSync']);

Answer 2

[Damir Aushenov]

https://www.google.com/search?q=vagrant&oq=vagrant...
ну или как вариант chrome livereload extension