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

Posted 2023-03-07

【中文标题】如何使用 grunt 将编译好的玉文件复制到目标文件夹

【英文标题】：How to copy compiled jade files to a destination folder using 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 未定义。

【参考方案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'
            
        ]

谢谢。