如何设置ExpressJS与gulp自动重新加载（gulp-live-server）

Question

我有一个简单的 express 4.x 测试应用程序。我知道您可以使用 gulp 从自动重新加载中受益，因此在更改服务器上的任何内容后，它将自动重新启动。

我设法用快递设置了把手模板引擎。

我的文件系统很简单：

• app / main.js - ＆gt;是服务器
• app / gulp.js - ＆gt;是gulp文件
• app / views / * .hbs - ＆gt;包含我的把手文件
• app / views / layouts / * .hbs - ＆gt;包含我的把手布局文件

我正在使用gulp-live-server，我感觉我错过了一些东西（只看了几个教程，找出了什么是gulp）

app / gulp.js - 来自gulp-live-server 的第二个例子

var gulp = require('gulp');
var gls  = require('gulp-live-server');

gulp.task('serve', function() {
    //1. run your script as a server 
    var server = gls.new('main.js');
    server.start();

    //2. run script with cwd args, e.g. the harmony flag 
    var server = gls.new(['--harmony', 'main.js']);
    //this will achieve `node --harmony main.js` 
    //you can access cwd args in `main.js` via `process.argv` 
    server.start();

    //use gulp.watch to trigger server actions(notify, start or stop) 
    gulp.watch(['views/*.hbs', 'static/views/layouts.hbs'], function (file) {
      server.notify.apply(server, [file]);
    });
    gulp.watch('main.js', server.start.bind(server)); //restart my server 

    // Note: try wrapping in a function if getting an error like `TypeError: Bad argument at TypeError (native) at ChildProcess.spawn` 
    gulp.watch('main.js', function() {
      server.start.bind(server)()
    });
});

应用/ main.js

var express = require( 'express' );
var hbs = require( 'express-handlebars' );

var app = express();

app.engine( 'hbs', 
            hbs( { extname: '.hbs', 
                    defaultLayout: 'layout',
                    layoutsDir: __dirname + "/views/layouts/" } ) );
app.set( 'view engine', 'hbs' );

app.get( "/", function( req, res ) {
    res.render( "index.hbs", {title: "World"} );
} );

app.use( '/public', express.static( 'public' ) );

var port = Number( process.env.PORT || 5000 );
app.listen( port );

我的期望：

运行节点gulp.js服务后，应用程序将开始侦听端口5000并在视图/ *上的内容发生更改时重新启动。

**实际发生的事情：**

gulp只会启动并完成执行。

配置细节：

gulp安装过程中的潜在问题（？）：

请注意已弃用的优雅组件..

我确信我错过了一些非常明显的东西：））

Answer 1

如果node gulp.js serve表示您正在执行上面发布的app/gulp.js文件，那么这无效。 app/gulp.js文件仅定义您的任务。它实际上并没有执行它们。

要执行安装gulp命令行工具所需的任务。最简单的方法是全局安装gulp：

npm install -g gulp

您需要确保安装命令行工具的位置（npm将记录位置）位于PATH环境变量中。只需在命令行输入gulp即可告诉您是否属于这种情况。

接下来，您需要将gulpfile从app/gulp.js重命名为app/gulpfile.js，这是gulp命令行工具查找任务定义的位置。

现在，您可以从gulp serve目录中运行app/，该目录应执行serve中定义的app/gulpfile.js任务。

Answer 2

您可以尝试运行代码来观看tsc ...

npm run tsc -w

将此脚本添加到package.json