1

MAMP を使用して livereload を実行するように gulp をセットアップしようとしています。これが私の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。

4

2 に答える 2

0

デフォルトでは、LiveReload 拡張機能はポート 35729 でリッスンします。例の 8888 のような別のポートを使用するには、デフォルトをオーバーライドする必要があります。詳細については、http://feedback.livereload.com/knowledgebase/articles/195869-how-to-change-the-port-number-livereload-listens-oをご覧ください。

于 2016-03-13T23:29:05.347 に答える