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

i have php-project in cloud9-ide want run grunt , browser-sync according to: http://fettblog.eu/php-browsersync-grunt-gulp/

my gruntfile.js looks 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 use grunt-command in terminal output looks this:

i tested php-, sass- , watch-task seperatly , work fine. according output gets started fine also, browsersync apparently "watching files".

now, when preview , change of css in background, can see in console grunt doing stuff (to precise: watch , sass tasks running) , css being changed correctly. cant browser-sync automatically refresh page though according console browser-sync recognizes css-file changed:

what missing here?

you configuring browsersync proxy port 8080 8010 , opening non proxied page @ 8080.

you should use 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 , port 8081 });  // compile , 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 https://<workspace_name>-<username>.c9.io - page browsersource https://<workspace_name>-<username>.c9.io:8081 - page without browsersource https://<workspace_name>-<username>.c9.io:8082 - browsersource ui

unfortunately there bug in browsersync not allowing work when served https, https://github.com/browsersync/browser-sync/issues/883

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

___browsersync___.socket = ___browsersync___.io(%url%, ___browsersync___.socketconfig); 

line

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