web-dev-qa-db-ja.com

grunt-contrib-livereloadの使用方法は？

grunt-contrib-livereload を使用しようとしていますが、理解できないようです。 readme は、説明する必要があるものすべてをスキップするように見えます。そして、試してみても機能せず、ドキュメントに直接関連していないように見える例で終わります。ブログの投稿やチュートリアルなどでより良い説明を探しましたが、見つけられませんでした。誰かがこのツールの使用を開始する方法を説明できますか？

readme に基づいて、私が持っている質問の種類を以下に示します。

ドキュメントには、livereloadタスクには「変更されたファイルのリストを渡す必要があります」と書かれていますが、このファイルのリストを渡すにはどうすればよいですか？例はこれを説明していないようです。よろしくお願いします

Grunt-contrib-connectは必要ですか？それは何をし、どのように使用しますか？ livereloadを使用する前に接続を学習する必要がありますか？

Readmeには、「最初に挿入する必要がある」というミドルウェアが記載されていますが、他の何よりも先に何に挿入しますかそして、それはどのように挿入されますか？

そして、私はポートを操作する方法を理解していないと思います。 「livereloadポートでリッスンしているすべてのブラウザーがリロードされます」---どのブラウザーがどのポートをリッスンしているのかを知るにはどうすればよいですか？ livereloadを使用する前に、ポートについてすべて学ぶ必要がありますか？ （それについて最もよく学ぶ方法に関する提案はありますか？）

最後に、この例には、以前のドキュメントのいずれにも関連していないように見えるfolderMount関数があります。それは何ですか、それが必要ですか？

私は誰かが喜ばせることができるかどうか尋ねていると思います：

  • 現在のreadmeよりもはるかに効果的なチュートリアルを参照してください。
  • これらの答えがプラグインを理解するために必要なものである場合、readmeのこれらの説明されていない部分を説明してください。
  • または、なぜ機能するのかを説明する機能的な例を提供します。
gruntjslivereload
49
davidtheclark

ライブリロードがgrunt-contrib-watchバージョン0.4.0に組み込まれました。 grunt-contrib-livereloadとgrunt-regardeは間もなく廃止されます。

設定でlivereloadをtrueに設定すると、ライブリロードサーバーが作成され、タスクの実行後にリロードされます。

grunt.initConfig({
  watch: {
    all: {
      options: { livereload: true },
      files: ['lib/*.js'],
      tasks: ['jshint'],
    },
  },
});

デフォルトでは、ライブリロードサーバーはポート35729で起動されます。したがって、ページでライブ再読み込みを有効にするには、<script src="http://localhost:35729/livereload.js"></script>をページに追加するだけです。

ドキュメントの詳細情報を表示： https://github.com/gruntjs/grunt-contrib-watch#live-reloading

89
Kyle Robinson Young

編集：バージョン情報を確認します。 _grunt-contrib-watch_にlivereloadサポートが組み込まれました。

なんてすごい。私もこの問題に遭遇しましたので、私が説明できることをしましょう（または、少なくともあなたを立ち上げて実行してください）。これは[〜＃〜] i [〜＃〜]の設定方法であり、ほとんどの場合に機能するようです。

まず、適切な依存関係で_package.json_を更新したことを確認する必要があります。 livereloadがベイクインされた「ウォッチ」タスクで動作するかどうかはわかりませんが、最近では grunt-regarde を使用しています。私のpackage.jsonは通常、次のようになります。

_"dependencies": {
  "grunt": "~0.4.x",
  "grunt-contrib-livereload": "0.1.2",
  "grunt-contrib-connect": "0.2.0",
  "grunt-regarde": "0.1.1"
},
_

Obviには、うなり声（duhhh）、livereload、connectがフォルダーのマウントに役立つようであり、それについてはgrunt-watchのように見えます。

必要に応じて、独自の「devDependencies」オブジェクトにlivereloadを指定することで、_package.json_をさらに改善できます。さて、あなたの古き良き__npm install_を実行して、プロジェクトの良いところを手に入れましょう。

Gruntfilesについて話しましょう：

おそらくご存知のように、gruntfileは魔法を起こすものです。 gruntfileの下部のどこかに、指定する必要があります。

_grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');
_

Gruntfileの先頭に、livereload用のユーティリティをいくつか追加します。 _/*global module:false*/_の下で、var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;を追加します。

その後、あなたは本当に接続を学ぶ必要はありません、あなたはそれを使用しなければなりません。私のスタイルを確認してください：

_var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};
_

これはmodule.exports = function(grunt) {の前にあります

それでは、gruntfileの内容を見てみましょう。繰り返しますが、connectが何をしているのかは忘れていますが、ここでミドルウェアの魔法が働きます。 modules.exportsで、次を追加します。

_connect: {
  livereload: {
    options: {
      port: 9999,
      middleware: function(connect, options) {
        return [lrSnippet, folderMount(connect, '.')]
      }
    }
  }
},
_

次に、ファイルを監視する必要があります。 CSSファイルを保存するたびにうなり声のプロセス全体を実行したくないので、いくつかの異なるタスクを設定するのが好きです。私が扱うものは次のとおりです（再び、_module.exports_に追加します）：

_regarde: {
  txt: {
    files: ['styles/*.css', 'index.html'],
    tasks: ['livereload']
  },
  styles: {
    files: ['sass/*.scss', 'sass/*/*.scss'],
    tasks: ['compass']
  },
  templates: {
    files: ['templates/*.jade'],
    tasks: ['jade']
  }
},
_

コンパイル済みのcss（_*.css_）またはコンパイル済みのhtmlに変更があったときに、livereloadを起動したいのはonlyだけであることがわかります。 SCSSファイルを編集する場合、コンパスだけを発射します。ヒスイテンプレートを編集する場合は、ヒスイをHTMLコンパイラに送信するだけです。何が起こっているのかわかると思います。あなたはこれをいじることができます、あなたは無限ループに巻き込まれる可能性があるので、ちょうどそれについてスマートです。

最後に、これらのプロセスを起動する必要があります。私のgruntfileはちょうどthat甘いので、私はそれらをすべて私の主なうなり声タスクに結びつけるのが好きです。

_// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);
_

さて、CLIでgruntを起動するとき、次のようなものを取得する必要があります（うまくいけば、たぶん、指を交差させる）。

_Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.
_

_http://localhost:9999/yourpage.html_を参照して、魔法が起こるのを見てください。

ここに完全なgruntfile。ここに完全なpackage.json。

14
imjared

私はこれが少し古いことを知っていますが、誰かを助けることができます。 Gruntfile.jsに「オプション」を追加します。

sass: {
    files: 'scss/**/*.scss',
    tasks: ['sass'],
    options: {
      livereload: true,
    }
  }

インデックスに追加：

<script src="http://localhost:35729/livereload.js"></script>
0
Panta Alejandro

ここに解決策があります に基づいています Gulp 代わりにGruntとそれに続くGulpfile.jslivereloadを機能させるには：


var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});
0
Dmitri Zaitsev