用快递服务器gulp.js livereload？

Question

我试图设置我gulpfile.js在快速服务器上使用livereload没有太多运气.我看到那里的例子,但它们似乎与静态文件服务器有关.

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

所以我有一个app.js文件,它使用jade文件执行标准快速服务器等.我想要做的是让它与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所以我怎么能得到这个连接好？

Answer 1

我添加了代码

1. 检测服务器文件中的更改并通过nodemon重新加载服务器

2. 在重新加载进程后等待几秒钟,以便让服务器有时间运行其初始化代码.

3. 触发livereload服务器中的更改

注意1:您的构建还应包括一个livereload服务器,并在调用"serve"任务之前将livereload脚本附加到html文件

注意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
    });
});

Answer 2

我遇到了同样的问题，但找不到任何相关内容。我的解决方案最终包含以下代码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 插件 =)