11

对于我正在开发的单页应用程序，我具有以下结构：

  • 距离
    • css
    • js
    • 库
    • 部分
    • 索引.html
  • 源代码
    • css
    • js
    • 库
    • 意见
      • 部分
      • 索引.jade

快递服务器将使用目录dist为项目提供服务。我有一些琐碎的任务（使用grunt-contrib-clean、grunt-contrib-copy）来清理dist并将src/css、src/js、src/lib复制到dist。

问题在于src/views。该目录包含需要编译成html文件的jade文件。编译后，我希望它们在dist中（dist 根目录中的 index.html，部分作为子目录）。

目前我正在使用grunt-contrib-jade任务来编译和复制翡翠文件。我想将它们复制到 dist，因为我不想将编译后的 html 文件添加到源代码管理中。但是现在这不是真的可行，因为你必须指定每个玉文件（现在只有几个，但会增加）：

   jade: {
        compile: {
            options: {
                pretty: true
            },
            files: {
                // TODO make one line
                'dist/index.html': ['src/views/index.jade'],
                'dist/partials/banner.html': ['src/views/partials/banner.jade'],
                'dist/partials/dashboard.html': ['src/views/partials/dashboard.jade'],
                'dist/partials/navbar.html': ['src/views/partials/navbar.jade'],
                'dist/partials/transfer.html': ['src/views/partials/transfer.jade']
            }
        }
    },

有没有办法将 grunt-contrib-jade 任务（或另一个）与目录过滤器一起使用？像这样：

   jade: {
        compile: {
            options: {
                pretty: true
            },
            dir: {
                'dist': ['src/views']
            }
        }
    }
4

3 回答 3

20

Grunt wiki的一点澄清- 扩展映射：

grunt.file.expandMapping(patterns, dest [, options])

请注意，虽然此方法可用于以编程方式为多任务生成文件数组，但最好使用配置任务指南的“动态构建文件对象”部分中描述的声明性语法。

假设上述情况，配置将如下所示：

files: [ { 
  expand: true, 
  src: "**/*.jade", 
  dest: "dist/", 
  cwd: "src/views", 
  ext: '.html'
} ];

与声明性配置相同的结果。

于 2013-02-03T21:57:35.093 回答
10

我最终升级到 grunt 0.4（这会导致一些其他问题，但我可以处理）。

使用 grunt 0.4 版，可以使用grunt.file.expandMapping：

    jade: {
        compile: {
            options: {
                pretty: true
            },
            files: grunt.file.expandMapping(['**/*.jade'], 'dist/', {
                cwd: 'src/views',
                rename: function(destBase, destPath) {
                    return destBase + destPath.replace(/\.jade$/, '.html');
                }
            })

        }
    },
于 2012-12-31T07:28:12.857 回答
3

如果您只想将文件的扩展名从 .jade 更改为 .html，另一种选择是使用flatten和ext参数，如下所示：

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' }
        },
        files: grunt.file.expandMapping(['**/*.jade'], '<%= yeoman.dist %>/views', {
            cwd: '<%= yeoman.app %>/views',
            flatten: true,
            ext: '.html'
       })
    }
}

甚至更好（如此处所述）：

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' },
            pretty: true
        },
        files: [
            {
                expand: true,
                cwd: '<%= yeoman.app %>/views',
                src: ['**/*.jade'],
                dest: '<%= yeoman.dist %>/views',
                ext: '.html'
            }
        ]}
}

谢谢。

于 2013-05-12T14:32:59.430 回答