Gulp Livereload in 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/build/index.html页面不会加载,我得到了消息

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

我也尝试过chrome插件,但是当我点击插件时,我得到了下面的msg

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

我检查了Chrome中插件的插件设置,并检查文件网址的选项

继承我评论的代码......

//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>

gulp的输出看起来不错......

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/site/page完全是自包含的,您只需file://在浏览器中打开所需页面的URL,启用livereload,它就可以运行.

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

如果您想将connect服务器集成到构建过程中,我在本文的底部有一个配方.

^*您可以通过浏览器插件或在开发期间使用gulp-embedlr插件启用livereload ,我更喜欢这个插件,因为它适用于多个浏览器和设备.