node.js - 如何使用 gulp 设置 ExpressJS 自动重新加载 (gulp-live-server)

Question

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

我成功地使用 Express 设置了 Handlebars 模板引擎。

我的文件系统非常简单:

• 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服务后，应用程序将开始监听端口5000，并在views/*上的内容发生更改时重新启动。

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

gulp 仅开始和完成执行。

配置细节:

gulp安装过程中的潜在问题(？):

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

我确信我错过了一些非常明显的东西:))

Answer 1

如果 node gulp.jsserve 意味着您正在执行上面发布的 app/gulp.js 文件，那么这是行不通的。 app/gulp.js 文件仅定义您的任务。它实际上并不执行它们。

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

npm install -g gulp

您需要确保命令行工具的安装位置(npm 将记录该位置)位于您的 PATH 环境变量中。只需在命令行中输入 gulp 就会告诉您情况是否如此。

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

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