Question

我正在尝试设置我的构建系统，但在让LiveReload使用我需要的文件时遇到一些麻烦。我在下面包含了我当前的gulp文件。当我运行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',]);

Answer 1

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

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

在Gulp.js服务器上设置LiveReload

1 个答案: