50

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

readmeに基づいて、私が持っている質問の種類は次のとおりです。

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

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

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

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

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

私は誰かが喜んでくれるかどうか尋ねていると思います：

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

4 に答える 4

14

編集：バージョン情報を確認してください。grunt-contrib-watchlivereload サポートが組み込まれました。

すごい。私もこれで問題に遭遇したので、説明できることをさせてください（または、少なくともあなたを立ち上げて実行してください）. これが私がセットアップした方法であり、ほとんどの場合うまくいくようです。

package.json手始めに、適切な依存関係で更新したことを確認する必要があります。livereload が焼き付けられた「監視」タスクで機能するかどうかはわかりません。最近、うなり声を使用しています。私のpackage.jsonは通常次のようになります。

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

あなたがうなり声（duhhh）、livereload、connectが必要なObviは、フォルダーのマウントに役立つようで、rememberはうなり声のようなものです。

package.json必要に応じて、独自の「devDependencies」オブジェクトで livereload を指定することで、さらに改善できます。さて、古き良きファッションを実行してnpm install、プロジェクトのグッズを手に入れましょう。

グラントファイルについて話しましょう:

おそらくご存じのとおり、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 ファイルを保存するたびに grunt プロセス全体を実行したくないので、いくつかの異なるタスクを設定するのが好きです。これが私が扱うものです（再び、に追加し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 ( ) またはコンパイル済みの html に変更があった場合にのみ、livereload を起動したいことがわかります。*.cssSCSS ファイルを編集する場合は、コンパスだけを発射したいと考えています。jade テンプレートを編集する場合、jade to HTML コンパイラのみを起動したいと考えています。何が起こっているかを見ることができると思います。無限ループに陥る可能性があるため、これをいじることができます。

最後に、これらのプロセスを起動する必要があります。私の gruntfile はとても甘いので、それらすべてをメインの grunt タスクに結び付けるのが好きです。

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

ここでgrunt、CLI を起動すると、次のような結果が得られるはずです (願わくば、おそらく、指を交差させてください)。

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

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

ここに完全な gruntfile があります。 ここに完全な package.json があります。

于 2013-05-07T18:59:19.983 に答える
0

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

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

インデックスに次を追加します。

<script src="http://localhost:35729/livereload.js"></script>
于 2015-10-14T15:55:33.677 に答える
0

Gulpこれは、代わりにGrunt次のものに基づいたソリューションGulpfile.jsであり、機能しますlivereload。


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);
});
于 2015-04-19T12:21:00.960 に答える