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

How to setup ExpressJS with gulp to auto-reload (gulp-live-server)

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

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

我的文件系统非常简单:

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

我正在使用gulp-live-server,感觉好像缺少了一些东西(只看了几本教程来了解gulp是什么)

app / gulp.js-来自gulp-live-server

的第二个示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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仅开始执行并结束执行。

配置细节:

enter image description here

gulp安装期间可能出现的问题(?):

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

enter image description here

我确定我确实缺少明显的东西:))


您可以尝试在tsc上运行代码...

npm run tsc -w

将此脚本添加到package.json


如果node gulp.js serve表示您正在执行上面发布的app/gulp.js文件,则此操作无效。 app/gulp.js文件仅定义您的任务。它实际上并不执行它们。

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

1
npm install -g gulp

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

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

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