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

Question

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

我设法用 express 设置了车把模板引擎。

我的文件系统很简单：

• app/main.js -> 是服务器
• app/gulp.js -> 是 gulp 文件
• app/views/*.hbs -> 包含我的 handlebars 文件
• app/views/layouts/*.hbs -> 包含我的 handlebars 布局文件

我正在使用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)()
    });
});

app/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 );

我所期待的：

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

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

gulp 只开始和结束执行。

配置细节：

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

请注意已弃用的 graceful 组件..

我确定我遗漏了一些非常明显的东西:))

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 命令行工具查找任务定义的位置。

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

Answer 2

你可以尝试运行你的代码来观察 tsc...

npm run tsc -w

将此脚本添加到您的 package.json 中