1

LiveReload を有効にするために、grunt-contrib-watch タスク (v. 0.5.3) を使用します。

        livereload: {
            options: {
               middleware: function (connect) {
                           return [lrSnippet, mountFolder(connect, '.tmp'), 
                           mountFolder(connect, 'src'),
                           proxySnippet];
               }
            }
        }

    //...some other tasks...


        watch: {
                    livereload: {
                        options: {
                            livereload: LIVERELOAD_PORT
                        },
                        files: [
                            'src/*.html'
                        ]
                    }
               }

//...................................

grunt.registerTask('server', [
        'clean:server',
        'recess:compile',
        'configureProxies',
        'connect:livereload',
        'open',
        'watch'
    ]);

実行中grunt server --verbose(watchタスクを含む)、次のコンソール出力が表示されます。

Running "watch" task
    Waiting...Verifying property watch exists in config...OK
    Verifying property watch.livereload.files exists in config...OK
    Live reload server started on port: 35729
    Watching src/404.html for changes.
    Watching src/app for changes.
    Watching src/assets for changes.
    Watching src/common for changes.
    Watching src/less for changes.
    Watching src/vendor for changes.
    Watching src/index.html for changes.

たとえば、ここでsrc/index.html観察されていることがわかります。したがって、ページのタイトルを変更して、ライブの変更を確認しようとします。しかし、ファイルを保存するとすぐにプロセスが終了します..

watch指定されたファイルパスが無効な場合、タスクが終了する可能性があるという事実について読みました。しかし、Watching src/index.html for changesそれが存在すると主張していますよね？

私はそれを理解していません。

4

2 に答える 2

0

それが問題であるかどうかはわかりませんが、grunt-contrib-connect でサポートされているように、 livereload オプションを直接設定するのではなく、 connect-livereload ミドルウェアを直接使用しているようです。

以下は、grunt-contrib-watch と grunt-contrib-connect のみを使用した GruntFile の簡単な例です。

module.exports = function (grunt) {
  var LIVERELOAD_PORT = 12345;

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    connect: {
      server: {
        options: {
          port: 9001,
          base: './src',
          livereload: LIVERELOAD_PORT
        }
      }
    },
    watch: {
      develop: {
        files: 'src/*.html',
        options: {
          livereload: {
            port: LIVERELOAD_PORT
          }
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('server', [
    'connect:server',
    'watch'
  ]);
};

特定のポートを構成する必要がなく、デフォルトのポートを使用できる場合は、さらに簡単です。両方のタスクの livereload プロパティを true に変更するだけです。

livereload: true
于 2013-11-18T00:56:00.933 に答える