Can't get grunt-browser-sync in Cloud9-IDE to work

Question

I have a php-Project in my Cloud9-IDE that I want to run with grunt and browser-sync according to: http://fettblog.eu/php-browsersync-grunt-gulp/

My Gruntfile.js looks like this:

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-php');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');


  pkg: grunt.file.readJSON('package.json'),

  grunt.initConfig({


    sass: {
      dist: {
        files: {
          'assets/css/main.css' : 'assets/css/main.scss',
        }
      }
    },

    watch: {
      sass: {
        files: 'assets/css/layout/*.sass',
        tasks: ['sass:dist'],
      }
    },

    php: {
      dist: {
        options: {
          hostname: '0.0.0.0',
          port: 8080,
          base: '/home/ubuntu/workspace/LifeAqua',
          open: true,
          keepalive: true
        }
      }
    },

    browserSync: {
      dist: {
        bsFiles: {
          src: 'assets/css/main.css'
        },
        options: {
          proxy: '<%= php.dist.options.hostname %>:<%= php.dist.options.port %>',
          watchTask: true,
          notify: true,
          open: true,
        }
      }
    }
  });

  grunt.registerTask('default', ['php:dist', 'browserSync:dist', 'sass:dist', 'watch']);

};

---

When I use the grunt-command in the terminal the output looks like this:

I tested the php-, sass- and watch-task seperatly and they work fine. According to the output everything gets started fine also, even the browserSync is apparently "watching for files".

Now, when I get into the preview and change some of the css in the background, I can see in the console that grunt is doing stuff (to be precise: the watch and sass tasks are running) and the css is being changed correctly. But I just cant get the browser-sync to automatically refresh the page even though according to the console browser-sync recognizes that the css-file changed:

What am I missing here?

Answer 1

You are configuring BrowserSync to proxy from port 8080 to 8010 and then opening non proxied page at 8080.

You should use something like

var gulp = require('gulp');
var php = require('gulp-connect-php');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');

gulp.task('serve-php', function() {
    php.server({
        hostname: '0.0.0.0',
        port: 8081
    }); // Open php-server running on localhost and port 8081
});

// Compile and automatically prefix stylesheets
gulp.task('styles', () => {
    return gulp.src(['assets/css/main.scss'])
        .pipe(sass())
        .on('error', console.log.bind(console))
        .pipe(gulp.dest('assets/css/'));
});


gulp.task('default', ['serve-php', 'styles'], () => {
    browserSync.init({
        // https: true,
        proxy: 'localhost:8081',
        port: 8080,
        ui: {
            port: 8082
        }
    });

    gulp.watch(['*.php'], browserSync.reload);
    gulp.watch(['assets/css/layout/*.sass'], ['styles', browserSync.reload]);

});

with this https://<workspace_name>-<username>.c9.io - will be your page with browserSource https://<workspace_name>-<username>.c9.io:8081 - will be your page without browserSource https://<workspace_name>-<username>.c9.io:8082 - will be browserSource ui

Unfortunately there is a bug in browserSync not allowing it to work when served from https, https://github.com/BrowserSync/browser-sync/issues/883

as a workaround find connector.tmpl file in node_modules/browser-sync and replace

___browserSync___.socket = ___browserSync___.io(%url%, ___browserSync___.socketConfig);

line with

var url = %url%;
if (/https:/.test(location.href)) url = url.replace(/^http:/, "https:");
___browserSync___.socket = ___browserSync___.io(url, ___browserSync___.socketConfig);