Gulp：麻烦设置browserSync和手表

我正在学习Gulp和NPM，并决定使用Browser-Sync来测试我正在使用的PHP项目（使用XAMPP）。我知道Browser-Sync不适用于PHP文件，但我想用它与我的.css文件（以及稍后添加Sass）。Gulp：麻烦设置browserSync和手表

我把npm，gulp，gulp-watch和Browser Sync安装到我的项目的根目录下，一切都很正常。

然后我创建了下面的一个gulp.js文件：

var gulp = require('gulp'), 
watch = require('gulp-watch'), 
browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: "./" 
     } 
    }); 

    watch('css/*.css', function() { 
     browserSync.reload(); 
    }); 

});

然而，当我gulp watch一个新的浏览器窗口中打开不只是显示了Cannot GET /错误。

此外，URL显示http://localhost:3002/而不是http://localhost:myproejct

我读这可能是与我的baseDir这样尝试：

baseDir: "" 
baseDir: "./" 
baseDir: "../myproject"

会有人知道我做了什么错？

来源

2016-09-16 MeltingDog

你正在做的事情远远超出你想做的事。您可以使用浏览器同步作为托管网站顶部的代理层。

请参阅从docs

# Proxy a PHP app + serve static files & watch them 
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'

我觉得这下面的例子中，你需要什么，从你的网站的物理根运行它，用你的PHP服务器地址替换mylocal.dev

npm install browser-sync -g 

browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'

来源

2016-09-16 13:12:20 ndonohoe

你的代码适合我。假设您的目标HTML文件在手动打开浏览器的情况下工作：Cannot Get/错误的一个常见原因是使用除浏览器同步的默认期望值index.html以外的索引文件。这可能是你遇到的问题吗？如果你需要一个自定义的索引文件，你可以设置index选项：

browserSync.init({ 
    server: { 
     baseDir: 'mybasedirectorypath', 
     index: 'notindex.html' 
    } 
});

FWIW，你也可以做到这一点更有效，并保存自己安装gulp-watch的重量（这个例子改编并从这个Browsersync docs example简体）：

var gulp = require('gulp'), 
    browserSync = require('browser-sync').create(); 

gulp.task('watch', function() { 
    browserSync.init({ 
     server: { 
      baseDir: './' 
     } 
    }); 
    gulp.watch('css/*.css').on('change',browserSync.reload) 
});

对于使用自定义网址，请https://github.com/BrowserSync/browser-sync/issues/646其中有一些解决方案。

来源

2016-09-16 17:53:08 henry

Gulp：麻烦设置browserSync和手表

回答

相关问题