0

gulp.js で livereload を動作させようとしています。ブラウザに livereload 拡張機能があります。これは私の gulpfile.js です。誰でも問題を見ることができますか。私は多くの亜種を試し、多くのビデオやチュートリアルを見てきました. 私はamppsを実行しており、それはワードプレスのインストールです

var gulp = require('gulp'),
    livereload = require('gulp-livereload');
    lr = require('tiny-lr');
    server = lr();


gulp.task('styles', function() {
  return gulp.src('style.css')
    .pipe(livereload(server))
    .pipe(gulp.dest('./'))
});



// Watch
gulp.task('watch', function() {


 //  // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err)
    };

    // Watch .scss files
    gulp.watch('style.css', ['styles']);

  });

});

// Default task
gulp.task('default', ['styles', 'watch']);

.. ..

編集: 完成したファイルに興味がある人は、以下のGhidelloの回答の助けを借りて最終的に作業しました:

var gulp = require('gulp'),
    livereload = require('gulp-livereload');


gulp.task('styles', function() {
  return gulp.src('style.css')
    .pipe(livereload())
});

// Watch
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('style.css', ['styles']);
});

// Default task
gulp.task('default', ['styles', 'watch']);
4

1 に答える 1

1

gulp-livereloadは tiny-lr パッケージのラッパーなので、両方を使用する必要はありません。デフォルトで使用しているのと同じポートを使用するため、そのドキュメント ページに従って、tiny-lr を完全に取り除き、ウォッチ ステップを次のように変更できます。

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('build/**', ['less']);
});
于 2014-11-18T08:29:27.670 に答える