Question

我想创建一个在同一存储库中同时包含服务器和UI代码的项目，使用node.js创建服务器并进行表达，使用angular创建UI，使用服务器来提供服务并提供API。

因此，我希望能够在更改每个代码时都进行编辑和构建，为此，我使用了Gulp。

这是我到目前为止想出的：

服务器index.js

const express = require('express');
const app = express();
const path = require('path');
const allowedExt = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
];

app.get('/api', (req, res) => {
    res.json({ mark: 52, name: "David", weapon: 'sling' });
});

/**
 * expoe the Angular UI built files
 */
app.get('*', (req, res) => {
    if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
        res.sendFile(path.resolve(`ui/dist/ui/${req.url}`));
    } else {
        res.sendFile(path.resolve('ui/dist/ui/index.html'));
    }
});

// run the server
app.listen(8000, () => {
    console.log('Example app listening on port 8000!')
});

原始文件：

const exec = require('child_process').exec;
const path = require('path');
const { watch, parallel } = require('gulp');
const nodemon = require('gulp-nodemon');


/**
 *  Build the UI 
 */
function ngBuild(done) {
    exec('ng build', (err, stdout, stderr) => {
        if (!err) {
            console.log('UI was built successfully');
        } else {
            console.log('UI build failed with error:');
            console.log(`\n Failed with code ${err.code}\n`);
            done(err.stack);
        }
        done();
    });
}

/**
 * Watch changes in the UI files and build ui
 */
async function UiWatcher() {
    console.log('UI watcher is on');

    process.chdir(path.resolve('ui'));
    watch('src/**/*.*', { delay: 500, queue: false }, ngBuild);
}

/**
 * watch the server code using nodemon
 */
async function server(done) {
        var stream = nodemon({
            script: 'index.js'
            , ext: 'html js'
            , ignore: ['ignored.js']
            , done: done
        });

        stream
            .on('restart', function () {
                console.log('restarted!')
            })
            .on('crash', function () {
                console.error('Application has crashed!\n')
                stream.emit('restart', 10)  // restart the server in 10 seconds
            });
}

exports.default = ngBuild;
exports.watch = UiWatcher;
exports.server = server;
exports.full = parallel(UiWatcher, server);

但是当我运行 gulp full 失败时，UI观察器可以工作，但是nodemon不起作用，当我单独运行它们时，它们可以正常工作，但是出现以下错误：

[09:44:21] Using gulpfile ~\Documents\personal\node-serve-angular\gulpfile.js
[09:44:21] Starting 'full'...
[09:44:21] Starting 'UiWatcher'...
[09:44:21] Starting 'server'...
UI watcher is on
[09:44:21] Finished 'UiWatcher' after 18 ms
[09:44:21] Finished 'server' after 19 ms
[09:44:21] Finished 'full' after 23 ms
[09:44:31] [nodemon] 1.19.1
[09:44:31] [nodemon] to restart at any time, enter `rs`
[09:44:31] [nodemon] watching: *.*
[09:44:31] [nodemon] starting `node index.js`
\internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'C:\Users\DELL\Documents\personal\node-serve-angular\ui\index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
Application has crashed!

restarted!
[09:44:32] [nodemon] app crashed - waiting for file changes before starting...

创建Gulp并行任务以观察和构建UI和服务器时出错

0 个答案: