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变量更改为指向“modules”文件夹：

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

注意：
听起来你已经误解了一些基本面。根据我的学习，在典型的MEAN应用程序中，通常有一个文件夹结构，纯粹是静态的。在您的示例中，这将是您的“客户端”文件夹。通过指定特殊路由，您可以单独决定如何处理其他案例。上面的例子是为了实现我认为你所要求的，同时仍然保持“静态”区域的目的。

更新：请勿使用相同的文件夹！
我回去尝试使用相同的文件夹作为源和目标。这导致Grunt挂起而没有任何方法可以突破它。当它们不同时，不会发生这种挂起。因此，请将文件与“templates”文件夹一起使用。

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

1 个答案: