在 Gulp.js 服务器上设置 LiveReload答案

【问题标题】：Setting up LiveReload on Gulp.js server在 Gulp.js 服务器上设置 LiveReload
【发布时间】：2015-12-23 04:13:50
【问题描述】：

我正在尝试设置我的构建系统，但在让 LiveReload 处理我需要的文件时遇到了一些问题。我在下面包含了我当前的 gulpfile。当我运行我的 gulp 命令时，我知道服务器正在“localhost:35729/”上运行。但是，当我转到浏览器中的地址时，我会收到以下消息：

{"tinylr":"Welcome","version":"0.1.6"}

基本上，我需要知道的是如何让我的索引页面显示在这里而不是这条消息，因为 Chrome LiveReload 扩展程序不会重新加载我的索引页面版本，它只是位于我的离线目录中。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-ruby-sass');
var livereload = require('gulp-livereload');

function errorLog(error) {
    console.error.bind(error);
    this.emit('end');
}

// Scripts Task
// Uglifies
gulp.task('scripts', function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('minjs'))
});

//SASS Task
//Compiles SASS
gulp.task('sass', function(){
    return sass('scss/*.scss', { style: 'compressed' })
    .on('error', errorLog)
    .pipe(gulp.dest('./css'))
    .pipe(livereload());
});

// Watch Task
// Watches JS and CSS
gulp.task('watch', function(){
     livereload.listen();
     gulp.watch('js/*.js', ['scripts']);
     gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['scripts', 'sass', 'watch',]);

【问题讨论】：

你解决了吗？

标签： javascript gulp build-system gulp-livereload

【解决方案1】：

是的，最后我做到了。基本上，LiveReload Chrome 应用程序不会监视离线文件的更改（即直接从其目录打开的文件）。我对此的解决方案是将我的站点目录配置为 MAMP Web 服务器作为主目录。然后我可以在 Web 服务器上打开索引页面，然后单击 LiveReload Chrome 按钮，该按钮开始观察变化。

我认为设置 MAMP 服务器不一定是必要的解决方案，这正是我处理它的方式，因为我现在也可以测试移动设备的网站。

【讨论】：