在Chrome中使用Gulp Livereload
下面的代码似乎工作得很好，直到我去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页面不会加载，我得到消息
{“错误”：“not_found”，“reason”：“没有这样的路线”}
我也尝试了铬插件，但当我点击插件时，我得到下面的味精
无法连接到LiveReload服务器。 请确保LiveReload 2.3（或更高版本）或其他兼容的服务器正在运行。
我检查了插件在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.
这不是如何livereload工作。 它不会运行服务器来加载您的内容 – 它运行一个单独的服务器来通知内容的变化。
当您启用livereload *时 ，会在您的页面中embedded一个小型JavaScript，用于监听LR服务器。 当你通知服务器一个资源被修改时，它会告诉任何监听者，这些监听者依次从原来加载资源的地方重新加载资源。
如果你的webapp / site / page是完全自包含的，你可以简单地打开file:// url到你想要在浏览器中的页面，启用livereload，它应该可以工作。
但是，如果您正在处理外部资源，则应该启动某种服务器。 有很多方法可以为我select，但是你可以使用connect，express或其他节点库，如果你安装了python -m SimpleHTTPServer ，你可以在你的目录下运行python -m SimpleHTTPServer等。
如果你想在你的构build过程中集成一个connect服务器，我在本文的底部有一个配方 。
*您可以通过浏览器插件或在开发过程中使用gulp-embedlr插件来启用livereload，我喜欢它，因为它可以在多个浏览器和设备上运行。
1ocalhost：8081或localhost：8081？ 也许第一个字母拼写错误。