15

Node.js (Express と socket.ioを使用) でアプリケーションを作成しました。Grunt を使用して、Node.js アプリケーションの開発と接続中に livereload でクライアント側のものをコンパイルしたいと考えています。これどうやってするの？(パスとクロスドメインの問題のため、別のポートで Node.js アプリを実行せず、別のポートでクライアントを実行しないことが望ましい)

Yeomanもインストールし、すぐに使用できるgrunt-contrib-livereloadパッケージを使用していますが、クライアント側のファイルを提供するためにNode.js Connectサーバーを使用しているため、Node.jsアプリケーションから分離されていることがわかりました..

Yeoman によって生成された Gruntfile.js の例:

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// ... cut some parts
grunt.initConfig({
    watch: {
        livereload: {
            files: [
                '<%= yeoman.app %>/*/*.html',
                '{.tmp,<%= yeoman.app %>}/styles/*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/*.js',
                '<%= yeoman.app %>/images/*.{png,jpg,jpeg}'
            ],
            tasks: ['livereload']
        }
        // ..cut some parts
    },
    connect: {
        livereload: {
            options: {
                port: 9000,
                middleware: function (connect) {
                    return [
                        lrSnippet,
                        mountFolder(connect, '.tmp'),
                        mountFolder(connect, 'app')
                    ];
                }
            }
        }
    }
    // ..cut some parts
});

grunt.registerTask('server', [
    'clean:server',
    'coffee:dist',
    'compass:server',
    'livereload-start',
    'connect:livereload',
    'open',
    'watch'
]);
4

3 に答える 3

7

この質問をまだ解決したかどうかはわかりませんが、「connect.livereload.options.middleware」オプションに接続されたミドルウェアとして高速アプリケーションを追加することで解決しました。

ただし、サーバー側コードの自動リロードは機能しません。そのためには、単純な「node ./server.js」を使用してリロード フレンドリーなサーバーを実装し、開発サーバーへの透過的なプロキシとして機能する接続ミドルウェアを作成し、標準の接続/livereload の前に Gruntfile.js 内でそれを呼び出すことができます。サーバーが起動します。

connect: {
    options: {
        port: 9000,
        // change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
    },
    livereload: {
        options: {
            middleware: function (connect) {
                return [
                    lrSnippet,
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'app'),
                    require('./server') // your server packaged as a nodejs module
                ];
            }
        }
    }
}

サーバー.js:

var app = express();

...
// Export your server object.
module.exports = app;
于 2013-03-26T06:01:51.497 に答える
1

私の答えはGulp、Grunt の代わりに私がよく知っているものを使用することですが、同じアプローチでGruntもうまくいくと思います。

私のリポジトリ（および古いもの）と他の回答を参照してください。

ブラウザの拡張機能も、ファイルへのスクリプトの追加も必要ありません。

gulp-livereloadこのソリューションは、とconnect-livereloadパッケージの連携に基づいています。まず、ライブ リロード リスナーを開始し、ファイルの変更をパイプします (特定のファイルのみをリッスンするには*、より具体的なものに変更します)。node-glob


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

gulpLivereload.listen();

gulp.watch('*', function(file) {
  gulp.src(file.path)
    .pipe(gulpLivereload());
});

次に、リスナーをミドルウェアとして使用するようにサーバーを構成しconnect-livereloadます。


var connect = require('connect');
var connectLivereload = require('connect-livereload');

connect()
  .use(connectLivereload())
  .use(connect.static(__dirname))
  .listen(8080);

内部でどのように機能するかについての詳細は、パッケージを参照してください。

于 2015-04-19T12:34:29.897 に答える
0

Gruntfile で、タスクからconnect:livereloadとを削除します。openserver

HTML ファイルに次のスクリプトを追加します。

<!-- livereload script -->
<script type="text/javascript">
    document.write('<script src="http://'
        + (location.host || 'localhost').split(':')[0]
        + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
于 2013-06-29T09:30:37.513 に答える