在Gulp.js服务器上设置liverload

Setting up LiveReload on Gulp.js server

本文关键字：设置 liverload 服务器 Gulp js      更新时间：2023-09-26

我试图设置我的构建系统，但有一些麻烦，让liverload与我需要的文件一起工作。我在下面包含了我当前的gulpfile。当我运行gulp命令时，我知道服务器运行在"localhost:35729/"上。然而，当我在浏览器中访问该地址时，我收到了以下消息:

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

基本上我需要知道的是我如何能得到我的索引页显示在这里，而不是这个消息，作为Chrome liverload扩展不会重新加载我的索引页的版本，只是坐在我的离线目录。

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',]);

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

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

相关文章：