咕嘟咕嘟Livereload在Chrome

Question

下面的代码似乎工作得很好，直到我去1ocalhost：8081 ...

然后我得到的消息..

<pre>{"tinylr":"Welcome","version":"0.0.5"}</pre> 

我的目录结构... 。

____gulp 
| |____build 
| | |____images 
| | |____index.html 
| | |____scripts 
| | |____styles 
| |____gulpfile.js 
| |____node_modules 
| |____src 
| | |____images 
| | |____index.html 
| | |____scripts 
| | |____styles 

为什么我的html页面加载不了？如果我尝试浏览 1ocalhost：8081 /编译/ index.html的页面不会加载，我得到了味精

{"error":"not_found","reason":"no such route"}

我也试着铬插件，但我得到下面的味精时，我打了插件

Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.

我查了一下，从Chrome的插件，该插件的设置，检查选项文件URL

继承人我注释掉的代码.....

//sudo npm install gulp -g 
// install chrome extension from https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei 
//Go into the settings from the plugin in Chrome and check the option for file urls: chrome://extensions/ 


// include gulp 
var gulp = require('gulp'); 

// include plug-ins 
var jshint = require('gulp-jshint'); 
var changed = require('gulp-changed'); 
var imagemin = require('gulp-imagemin'); 
var minifyHTML = require('gulp-minify-html'); 
var concat = require('gulp-concat'); 
var stripDebug = require('gulp-strip-debug'); 
var uglify = require('gulp-uglify'); 
var autoprefix = require('gulp-autoprefixer'); 
var minifyCSS = require('gulp-minify-css'); 
var livereload = require('gulp-livereload'); 
var lr = require('tiny-lr'); 
var server = lr(); 


// JS hint task 
gulp.task('jshint', function() { 
    gulp.src('./src/scripts/*.js') 
    .pipe(jshint()) 
    .pipe(jshint.reporter('default')) 
    .pipe(livereload(server)); 
}); 

// minify new images 
gulp.task('imagemin', function() { 
    var imgSrc = './src/images/**/*', 
     imgDst = './build/images'; 

    gulp.src(imgSrc) 
    .pipe(changed(imgDst)) 
    .pipe(imagemin()) 
    .pipe(gulp.dest(imgDst)) 
    .pipe(livereload(server)); 
}); 

// minify new or changed HTML pages 
gulp.task('htmlpage', function() { 
    var htmlSrc = './src/*.html', 
     htmlDst = './build'; 

    gulp.src(htmlSrc) 
    .pipe(changed(htmlDst)) 
    .pipe(minifyHTML()) 
    .pipe(gulp.dest(htmlDst)) 
    .pipe(livereload(server)); 
}); 

// JS concat, strip debugging and minify 
gulp.task('scripts', function() { 
    gulp.src(['./src/scripts/lib.js','./src/scripts/*.js']) 
    .pipe(concat('script.js')) 
    .pipe(stripDebug()) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./build/scripts/')) 
    .pipe(livereload(server)); 
}); 

// CSS concat, auto-prefix and minify 
gulp.task('styles', function() { 
    gulp.src(['./src/styles/*.css']) 
    .pipe(concat('styles.css')) 
    .pipe(autoprefix('last 2 versions')) 
    .pipe(minifyCSS()) 
    .pipe(gulp.dest('./build/styles/')) 
    .pipe(livereload(server)); 
}); 

// default gulp task 
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() { 

    server.listen(8081, function (err) { if (err) return console.log(err); 

      // watch for HTML changes 
      gulp.watch('./src/*.html', function() { 
      gulp.run('htmlpage'); 
      }); 

      // watch for JS changes 
      gulp.watch('./src/scripts/*.js', function() { 
      gulp.run('jshint', 'scripts'); 
      }); 

      // watch for IMG changes 
      gulp.watch('./src/images/*.png', function() { 
      gulp.run('imagemin'); 
      }); 

      // watch for CSS changes 
      gulp.watch('./src/styles/*.css', function() { 
      gulp.run('styles'); 
      }); 
    }); 
}); 
</pre> 

而且吞吐量看起来不错...

Bills-MacBook-Pro:gulp Bill$ gulp 
[gulp] Using file /Users/Bill/gulp/gulpfile.js 
[gulp] Working directory changed to /Users/Bill/gulp 
[gulp] Running 'imagemin'... 
[gulp] Finished 'imagemin' in 77 ms 
[gulp] Running 'htmlpage'... 
[gulp] Finished 'htmlpage' in 2.47 ms 
[gulp] Running 'scripts'... 
[gulp] Finished 'scripts' in 4.05 ms 
[gulp] Running 'styles'... 
[gulp] Finished 'styles' in 1.09 ms 
[gulp] Running 'default'... 
[gulp] Finished 'default' in 1.38 ms 
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead. 
[gulp] Running 'htmlpage'... 
[gulp] Finished 'htmlpage' in 3.5 ms 
[gulp] index.html was reloaded. 
[gulp] Running 'htmlpage'... 
[gulp] Finished 'htmlpage' in 712 μs 
[gulp] Running 'htmlpage'... 
[gulp] Finished 'htmlpage' in 1.05 ms 
[gulp] index.html was reloaded. 

Answer 1

这不是livereload的工作原理。它不运行服务器来加载你的内容 - 当内容改变时，它运行一个单独的服务器到通知。

当您启用Livereload ^*时，会在您的页面中嵌入一个小型JavaScript，用于监听LR服务器。当您通知服务器资源已被修改时，它会通知所有侦听器，然后再从原来加载资源的位置重新加载资源。

如果您的webapp /网站/页面完全独立，您可以在浏览器中打开您想要的页面的file://网址，启用livereload，它应该可以工作。

但是，如果你正在处理外部资源，你应该启动某种服务器。有很多方法可供我选择，但您可以使用connect，express或其他节点库，如果您安装了python，则可以在您的目录中运行python -m SimpleHTTPServer。

如果您想要将connect服务器集成到您的构建过程中，我有一个recipe at the bottom of this article。

---

^*您可以启用通过浏览器插件livereload或使用开发过程中gulp-embedlr plugin，这是我比较喜欢，因为它工作在多个浏览器和设备。

Answer 2

1ocalhost：8081 or localhost：8081？第一个字母可能是拼写错误。