【问题标题】：Gulp livereload not working with MAMPGulp livereload 不适用于 MAMP
【发布时间】：2016-03-11 22:20:33
【问题描述】：

我正在尝试设置 gulp 以使用 MAMP 运行 livereload。这是我的 gulpfile：

'use strict';

var gulp = require('gulp');
var del = require('del');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');

var paths = {
    elements: ['elements/**/*']
};

gulp.task('clear:cache', function () {
  return del(['core/cache/**/*']).then(function(){
    livereload();
    console.log('live reload called');
  }).catch(function(){
    livereload();
  });
});

gulp.task('sass', function () {
  console.log('sassy live reload');
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/styles/css'))
    .pipe(livereload());
});

gulp.task('sass:watch', function () {
  gulp.watch('assets/styles/scss/*.scss', ['sass']);
});

// Rerun the task when a file changes 
gulp.task('watch', function() {
  livereload.listen({port:8888,host:"localhost",start:true, reloadPage:"index.php"});
  gulp.watch(paths.elements, ['clear:cache', 'sass:watch']);
});

// The default task (called when you run `gulp` from cli) 
gulp.task('default', ['sass:watch','clear:cache','watch']);

如您所见，gulpfile 应该在元素目录中的文件发生更改时清除缓存并重新加载浏览器，并在任何 scss 文件更改时编译 sass 并重新加载浏览器。缓存清除和 sass 编译工作正常，并且都在各自的函数中吐出 console.log 消息。

我遇到问题的地方是让 livereload 重新加载浏览器。我知道 livereload 正在工作，但根本不针对浏览器，事实上，因为我在终端中收到了类似 /Applications/MAMP/htdocs/assets/styles/css/style.css reloaded 的消息。

【问题讨论】：

标签： google-chrome gulp livereload gulp-sass gulp-livereload

【解决方案1】：

默认情况下，LiveReload 扩展在端口 35729 上侦听。要使用不同的端口，例如您的示例中的 8888，您必须覆盖默认值。更多信息可以在这里找到http://feedback.livereload.com/knowledgebase/articles/195869-how-to-change-the-port-number-livereload-listens-o

【讨论】：

【解决方案2】：

您可以使用Live Reload Browser Page

实时重新加载浏览器页面

GitHub live-reload-bp

适用于 NodeJs、Grunt、Gulp、WebPack。如果 IDE 具有编辑后自动保存文件的功能，您可以使用任何 IDE

【讨论】：