javascript - 无法在 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 命令时，输出如下所示:

我分别测试了 php、sass 和 watch 任务，它们工作正常。根据输出，一切都开始正常，甚至 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 - 将是没有 browserSource 的页面 https://<workspace_name>-<username>.c9.io:8082 - 将是 browserSource ui

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

解决方法是找到 connector.tmpl node_modules/browser-sync 中的文件并替换

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