Question

我的 Cloud9-IDE 中有一个 php-Project ，我希望根据以下内容运行grunt和browser-sync：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正在做的事情（确切地说：手表和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

作为解决方法在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文件的更改，但决定不注入任何内容......

无法在Cloud9-IDE中使用grunt-browser-sync工作

2 个答案: