使用文件夹结构在大型 Express 应用程序中渲染所有 Jade 文件？

Question

如何配置 Express 以呈现所有 Jade 文件而不考虑路径？我正在使用的应用程序很大，结构非常复杂。我成功地提供了静态文件，但是我需要渲染其中的许多文件。我们将 Jade 用于所有需要标记的文件。

我担心下面的模式会迫使我为每个包含 Jade 文件的文件夹创建一个路由别名......这会很糟糕。我想告诉 Express 用 .jade 扩展名简单地渲染所有内容......或者......允许我为根创建一个路由 PREFIX，这将导致渲染操作而不是静态。

client
  app
    services
    modules
      moduleA
        itemA
          itemAList.jade
          itemAList.js
          itemADetails.jade
          itemADetails.js
        itemB
          itemBList.jade
          itemBList.js
          itemBDetails.jade
          itemBDetails.js
      moduleB
        itemC
          itemCList.jade
          itemCList.js
          itemCDetails.jade
          itemCDetails.js
        itemD
          itemDList.jade
          itemDList.js
          itemDDetails.jade
          itemDDetails.js
  assets
    js
    css
server
  config
  views

Routes.Config.js

module.exports = function(app){

    app.get('/*', function(req, res){
        res.render('../../client/' + req.params[0]);
    });

    app.get('/', function(req, res){
        res.render('../../client/index', {});
    })
}

Express.Config.js

[snip]
app.use(express.static(path.join(constants.rootPath, '/client')));

Answer 1

每当您的 .jade 文件被创建或保存时，我都会使用 Grunt 文件观察器来启动编译。通过使用下面的Gruntfile.js，您可以发出命令grunt watch 并在后台自动执行此操作：

module.exports = function(grunt){

    grunt.initConfig({

        jade: {
            compile: {
                options: {
                    client: false,
                    pretty: true
                },
                files: [{
                    cwd: "client/app/templates",
                    src: "**/*.jade",
                    dest: "client/app/modules",
                    ext: ".html",
                    expand: true
                }]
            }
        },
        watch: {
            html: {
                files: 'client/app/templates/**/*.jade',
                tasks: ['jade'],
                options: {
                    atBegin: true,
                    interrupt: true
                }
            }
        }

    });

    grunt.loadNpmTasks("grunt-contrib-jade");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.registerTask('default', ['jade']);
}

现在，这假设您将创建一个与“modules”文件夹平行的“templates”文件夹，并将所有 .jade 文件以您想要的结构放在那里。然后，您可以像往常一样将控制器和其他 .js 文件添加到模块文件夹结构中。

我不确定 Grunt 在源和目标都指向同一个文件夹时会如何表现。但是，如果您真的想将 .jade 和 .html 文件保存在同一个文件夹中，或者如果您不想创建“模板”结构，您应该能够简单地将 cwd 变量更改为指向“模块”文件夹：

                files: [{
                    cwd: "client/app/modules",       // templates folder removed
                    src: "**/*.jade",
                    dest: "client/app/modules",
                    ext: ".html",
                    expand: true
                }]

注意：
听起来你误解了一些基本原理。据我所知，在一个典型的 MEAN 应用程序中，通常有一个文件夹结构是纯静态的。在您的示例中，这将是您的“客户”文件夹。通过指定特殊路线，您可以单独决定如何处理其他情况。上面的示例旨在完成我认为您要问的内容，同时仍保持“静态”区域的目的。

更新：不要使用同一个文件夹！
我回去尝试使用相同的文件夹作为源和目标。这导致Grunt无法摆脱它。当它们不同时，不会发生此挂起。因此，请按原样使用“模板”文件夹中的文件。