无法在 Cloud9-IDE 中运行 grunt-browser-sync

Question

我的 Cloud9-IDE 中有一个 php-Project，我想运行与 g运行t 和浏览器同步根据：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']);

};

当我在终端中使用 g运行t 命令时，输出如下所示：

我分别测试了 php-、sass- 和 watch-task，它们工作正常。根据输出，一切都开始正常，甚至 browserSync 显然是 "watching for files".

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

我在这里错过了什么？

Answer 1

3 小时后，我仍在努力弄清楚到底发生了什么。我遇到了这个 post： 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 文件的更改，但决定不注入任何内容...

Answer 2

您正在将 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

不幸的是，browserSync 中存在一个错误，在从 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);

无法在 Cloud9-IDE 中运行 grunt-browser-sync

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

javascript

php

cloud9-ide

gruntjs

browser-sync