web-dev-qa-db-ja.com

エクスプレスサーバーでgulp.js livereload？

私はgulpfile.jsを高速サーバーでlivereloadを使用するように設定しましたが、あまりうまくいきません。そこに例がありますが、それらは静的ファイルサーバーに関連しているようです。

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-209http://rhumaric.com/2014/01/livereload-magic-gulp-style /

ですから、jadeファイルなどを使用して標準のExpressサーバーを実行するapp.jsファイルがあります。私がやりたいのは、gulp.jsブートからlivereloadで動作させることです。

app.set('port', process.env.PORT || 3000);
    var server = app.listen(app.get('port'), function() {
    debug('Express server listening on port ' + server.address().port);
});

gulp-livereload、connect-livereload、gulp-connect、gulp-watchのようなプラグインはたくさんあります。どうすればこれを配線できますか？

node.jsexpressgulplivereload
17
Timmerz

私はそのコードを追加しました

  1. サーバーファイルの変更を検出し、サーバーを nodemon 経由でリロードします

  2. サーバーに初期化コードを実行する時間を与えるために、プロセスのリロード後に数秒間待機します。

  3. Livereloadサーバーの変更をトリガーします

注1：ビルドにはlivereloadサーバーを含め、livereloadスクリプトをHTMLファイルに添付してから「serve」タスクを呼び出す必要があります

注2：これは決して終了しない非同期タスクですしないでください他のタスクの依存関係として使用する

gulp.task('serve', function (cb) {
    nodemon({
        script  : <server start file>,
        watch   : <server files>
        //...add nodeArgs: ['--debug=5858'] to debug 
        //..or nodeArgs: ['--debug-brk=5858'] to debug at server start
    }).on('start', function () {
        setTimeout(function () {
            livereload.changed();
        }, 2000); // wait for the server to finish loading before restarting the browsers
    });
});
11
Amit Portnoy

これが私の解決策です：

//gulpfile.js:
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var server = require('gulp-express');
var lr = require('tiny-lr')();

gulp.task('default', function () {
    nodemon({
      script: 'server.js'
    })
    .on('restart', function () {
        console.log('restarted!')
    });

    lr.listen(35729);

    gulp.watch('server/**/*', function(event) {
      var fileName = require('path').relative('3000', event.path);
      lr.changed({
        body: {
          files: [fileName]
        }
      });
    });
});

エクスプレスサーバーにconnect-livereloadを含める必要もあります。

app.use(require('connect-livereload')());

BodyParserの前に含めます。 chrome live reload extensionをお持ちの場合、これは必要ないことを読んだことがあります。

4
Andrei Rosca

gulp-express はあなたにとって正しいことです。 livereloadを使用して、エクスプレススクリプトをサーバーとして実行します。

3
Gimm

同じ問題があり、関連するものを見つけることができませんでした。私の解決策は、Gulpfile内の次のコードで終了します。

var fork = require('child_process').fork;
var tinyLr = require('tiny-lr');
var async = require('async');
var plugins = require('gulp-load-plugins')({ lazy: false });

var lr = null;
var lrPort = 35729;
var buildDir = 'build';
var serverAppFile = path.join(__dirname, 'build/server/app.js');

// This guy starts and stops nodejs process which runs our Express app
var app = {
    start: function(callback) {
        process.execArgv.Push('--debug');
        var instance = app.instance = fork(serverAppFile, {
            silent: true
        });
        app.dataListener = function(data) {
            var message = '' + data;
            // Assume that server is started when it prints the following to stdout
            if (message.indexOf('Express server listening on port') === 0) {
                callback();
            }
        };
        instance.stdout.on('data', app.dataListener);
        instance.stdout.pipe(process.stdout);
        instance.stderr.pipe(process.stderr);
    },

    stop: function(callback) {
        app.instance.stdout.removeListener('data', app.dataListener);
        plugins.util.log('Killing Express server with PID', app.instance.pid);
        app.instance.kill('SIGTERM');
        callback();
    }
};

// build-assets task actually processes my client js, less, images, etc and puts them to build dir
// build-server task copies server files (app.js, controllers, views) to build dir

gulp.task('serve', ['build-assets', 'build-server'], function(callback) {
    async.series([
        app.start,
        function(callback) {
            lr = tinyLr();
            lr.listen(lrPort, callback);
        }
    ], callback);
});

gulp.task('watch', ['serve'], function() {
    // Reload page if built files were updated
    gulp.watch([
        buildDir + '/**/*.handlebars',
        buildDir + '/**/*.html',
        buildDir + '/**/*.js',
        buildDir + '/**/*.css'
    ], function(event) {
        var fileName = path.relative(path.join(__dirname, buildDir), event.path);
        plugins.util.log('Detected updated file ' + fileName + ', reloading server and page in browser');
        async.series([
            // Restart Express server
            app.stop,
            app.start,

            // Send reload notification to browser
            function(callback) {
                lr.changed({
                    body: {
                        files: [fileName]
                    }
                });
                callback();
            }
        ]);
    });

    // Perform build steps on source file modifications
    gulp.watch(['app/**/*.js', '!app/**/*.spec.js'], ['build-app-js']);
    gulp.watch(['app/**/*.html'], ['build-templates']);
    gulp.watch(['app/**/*.less'], ['build-less']);
    gulp.watch(['server/**/*.*'], ['build-server']);
});

インストールする必要がありますtiny-lr、async、gulp-utilおよびgulp-load-pluginsこのサンプルが機能するためのパッケージ。私はそれのために別のGulpプラグインを作成すると思います=）

1
Denis Parchenko

ブラウザーのフロントエンドとバックエンドの両方の変更をライブリロードする。 Gulpを使用しないオプションもあります。次に、パッケージの正しい組み合わせは、「livereload」、「connect-livereload」、および「nodemon」からの小さなヘルプです。彼らがチームを組む方法は次のとおりです。

  • livereloadは高ポートを開き、ブラウザに変更されたパブリックファイルを通知します
  • connect-livereloadモンキーは、この高いポートに接続するスニペットですべての提供されたHTMLページにパッチを適用します
  • nodemonは、変更されたバックエンドファイルでサーバーを再起動するために使用されます

Expressでlivereloadを設定します

パブリックディレクトリを監視してlivereloadサーバーを起動し、nodemonによる再起動中にブラウザにpingを送信するようにExpressを設定する必要があります。

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

nodemonでExpressを起動します

次に、たとえば専用の監視スクリプトnpm run watchを使用して、nodemonでサーバーを起動します。

ここで重要なのは、すでにlivereloadによって監視されているパブリックディレクトリを無視することです。また、pugやmoustacheなどのデフォルト以外の拡張子を持つファイルを監視対象に設定することもできます。

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

詳しくは "ブラウザのフロントエンドとバックエンドの変更をExpress、LiveReload、Nodemonで更新してください。"

0
pspi

コードが変更されたときにサーバーを再起動する gulp-nodemon を見てください。

例：

gulp.task('develop', function () {
  nodemon({ script: 'app.js', ext: 'html js' })
    .on('restart', function () {
      console.log('restarted!')
    })
})
0
kwcto

ライブリロードは、どのnodejsスクリプトでも機能するはずです。こちらが良い 要旨 です。

0
xpepermint