如何使用 grunt 将编译好的玉文件复制到目标文件夹答案

【问题标题】：How to copy compiled jade files to a destination folder using grunt如何使用 grunt 将编译好的玉文件复制到目标文件夹
【发布时间】：2012-12-14 22:10:05
【问题描述】：

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

分布
- CSS
- js
- 库
- 部分
- index.html
源
- CSS
- js
- 库
- 查看次数
  - 部分
  - index.jade

目录 dist 将被 express 服务器用于为项目提供服务。我有一些琐碎的任务（使用 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']
            }
        }
    }

【问题讨论】：

你试过“文件数组格式”described here吗？该示例（使用 concat 任务）将dest 属性设置为一个目录：files: [{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/'}]。 jade-contrib 任务很可能也支持这种格式。
没用。它将所有文件复制到一个名为 '.html' 的文件中：) 尝试了 'files: grunt.file.expandMapping(['**/.jade'], 'dist', {cwd: 'src /views'})' 在同一页面上描述，但我得到 expandMapping 未定义。

标签： node.js build-automation pug npm gruntjs

【解决方案1】：

来自Grunt wiki - expand mapping的一点澄清：

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

请注意，虽然此方法可用于以编程方式为多任务生成文件数组，但首选 Configuring tasks guide 的“动态构建文件对象”部分中描述的声明性语法。

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

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

声明式配置的结果相同。

【讨论】：

+1：这确实是一个选项。甚至不需要 rename 函数，因为 ext 属性可以完成这项工作。尽管如此，还是需要 0.4 版的 grunt，一开始并不清楚。
我不知道为什么，但我必须删除 [ ] 表单文件：所以 files: { ... } 对我有用，files: [{ ... }] throw error ` Object #

【解决方案2】：

我最终升级到 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');
                }
            })

        }
    },

【讨论】：

最终使用了类似的东西，而且效果很好。谢谢！

【解决方案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'
       })
    }
}

甚至更好（如here 解释的那样）：

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'
            }
        ]}
}

谢谢。

【讨论】：