我有一个用Node构建的网站。我可以通过从命令行运行node server.js
来成功启动和运行站点。然后,我在浏览器中访问“http://localhost:3000”访问该网站。我现在正在尝试改进网站周围的一些构建过程。为此,我依靠Gulp。
我想在对HTML或CSS文件进行更改时自动重新加载网页。我偶然发现了gulp-livereload插件。我按照文档中的描述安装了它。但是,当我在浏览器中访问“http://localhost:35729/”时,我只看到以下内容:
{
minilr: "Welcome",
version: "0.1.8"
}
我的gulp任务配置如下:
gulp.task('launch', function() {
var toWatch = [
'src/**/*.html',
'src/**/*.css'
];
livereload.listen();
gulp.watch(toWatch, function() {
console.log('reloading...');
livereload();
})
}
我在运行node server.js
后访问“http://localhost:3000”时看不到我的主页。我错过了什么?
答案 0 :(得分:5)
实时重新加载是一种向浏览器发送通知以进行重新加载的协议。但是你需要一个浏览器插件来监听和重新加载,尽管可以使用脚本标签放弃插件。
gulp-livereload插件只关注livereload服务器的实现,你仍需要通过gulp的http服务器提供文件。
您可以使用同时执行gulp-connect。
的gulp模块但是,除非你因某种原因与livereload绑定,否则我建议使用browserync。 Browsersync是一个很好的替代livealload的补充 在浏览器之间同步视图的能力。因为它会在你的html中注入一个脚本标签并监听一个套接字,所以你不需要任何插件来使它工作。它甚至可以在移动设备上运行。
使用browsersync的gulp任务可能如下所示。不要忘记将browsersync添加到您的 package.json 文件
var browserSync = require('browser-sync').create();
gulp.task('serve', [] , function( cb ){
browserSync.init({
open: true ,
server: {
baseDir: "src"
}
});
gulp.watch([
'src/**/*' ,
] , ['serve:reload'] );
});
gulp.task('serve:reload' , [] , function(){
browserSync.reload();
});
答案 1 :(得分:3)
你为什么要访问' a turorial on what is uart' ?如果这是livereload正在收听的端口,那么它就不会显示您的网站,因为正如您所说,您的网站可以从' http://localhost:35729/'
获得。我假设您已正确配置gulp。通过它我的意思是livereload正在倾听,你观察你的文件和管道中的变化' .pipe(livereload()'。
现在,当您更改文件中的内容时,gulp观察者会注意到这一点,做一些工作,并告知chrome插件有更改,此插件将刷新您的项目页面。