无法让 Cloud9-IDE 中的 grunt-browser-sync 工作

Question

我的 Cloud9-IDE 中有一个 php-Project，我想使用 grunt 和浏览器同步运行，根据：http://fettblog.eu/php-browsersync-grunt-gulp/

我的 Gruntfile.js 看起来像这样：

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']);

};

---

当我在终端中使用 grunt-command 时，输出如下所示：

我分别测试了 php-、sass- 和 watch-task，它们运行良好。根据输出，一切都开始正常，甚至 browserSync 显然也在“监视文件”。

现在，当我进入预览并在后台更改一些 css 时，我可以在控制台中看到 grunt 正在做一些事情（准确地说：watch 和 sass 任务正在运行）并且 css 正在正确更改。但我只是不能让浏览器同步自动刷新页面，即使根据控制台浏览器同步识别出 css 文件已更改：

我在这里错过了什么？

Answer 1

您正在将 BrowserSync 配置为从端口 8080 代理到 8010，然后在 8080 打开非代理页面。

你应该使用类似的东西

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]);

});

有了这个 https://<workspace_name>-<username>.c9.io - 将是您的带有 browserSource 的页面 https://<workspace_name>-<username>.c9.io:8081 - 将是您没有浏览器来源的页面 https://<workspace_name>-<username>.c9.io:8082 - 将是 browserSource ui

不幸的是，bro​​wserSync 中存在一个错误，不允许它在从 https 服务时工作， https://github.com/BrowserSync/browser-sync/issues/883

作为一种解决方法，在 node_modules/browser-sync 中找到 connector.tmpl 文件并替换

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

符合

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

Answer 2

3 小时后，我仍在试图弄清楚到底发生了什么。 我偶然发现了这个帖子： http://www.shakyshane.com/javascript/nodejs/browser-sync/2014/08/24/browser-sync-plus-grunt/

..声称如果您更好地控制工作流程，则更容易避免注入失败。由于我现在非常绝望，我决定试一试并尝试这种不同的方法：

var browserSync = require("browser-sync");

module.exports = function(grunt) {

  grunt.initConfig({

php: {
  dev: {
    options: {
      hostname: '0.0.0.0',
      port: 8080,
    }
  }
},

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

watch: {
  options: {
    spawn: false
  },
  sass: {
    files: 'assets/css/layout/*.sass',
    tasks: ['sass', 'bs-inject']
  }
}
});

  grunt.registerTask("bs-init", function() {
    var done = this.async();
    browserSync({
      options: {
        proxy: '<%= php.dist.options.hostname %>:<%= php.dist.options.port %>',
        watchTask: true
      }
    }, function(err, bs) {
      done();
    });
  });

  grunt.registerTask("bs-inject", function() {
    browserSync.reload('assets/css/main.css');
  });

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

  grunt.registerTask('default', ['php', 'bs-init', 'watch']);
}

嗯，没有成功...

如您所见，browserSync - 再次 - 检测到对 css 文件的更改，但决定不注入任何内容...