如何使用Grunt将编译后的Jade文件复制到目标文件夹

11

我正在开发一个单页应用程序,其结构如下:

  • dist
    • css
    • js
    • lib
    • partials
    • index.html
  • src
    • css
    • js
    • lib
    • views
      • partials
      • index.jade

目录dist将被Express服务器用来提供项目服务。我使用简单的grunt任务(使用grunt-contrib-cleangrunt-contrib-copy)清理dist并将src/csssrc/jssrc/lib复制到dist

问题出在src/views上。这个目录包含需要编译为HTML文件的Jade文件。编译后,我希望它们位于dist目录下(index.html在dist根目录下,partials作为子目录)。

目前,我正在使用grunt-contrib-jade任务来编译和复制jade文件。我想将它们复制到dist中,因为我不想将编译后的HTML文件添加到源代码控制中。但现在这并不是很可行,因为你必须指定每个jade文件(现在只有几个,但会增加):

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

你尝试过使用“文件数组格式”吗?可以在这里找到描述:https://github.com/gruntjs/grunt/wiki/Configuring-tasks。示例(使用concat任务)将“dest”属性设置为目录:“files: [{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/'}]”。很可能“jade-contrib”任务也支持此格式。 - smithclay
没成功。它把所有文件都复制到一个名为'.html'的文件中 :) 我尝试了同一页上描述的'files: grunt.file.expandMapping(['**/.jade'], 'dist', {cwd: 'src/views'})',但我得到了“expandMapping未定义”的错误。 - asgoth
3个回答

20

来自Grunt wiki - 扩展映射(expand mapping)的一些解释:

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

请注意,虽然可以使用此方法以编程方式为多任务生成文件数组,但建议使用“动态构建文件对象”部分中描述的声明性语法。该部分详见配置任务指南
假设以上条件成立,则配置将如下所示:
files: [ { 
  expand: true, 
  src: "**/*.jade", 
  dest: "dist/", 
  cwd: "src/views", 
  ext: '.html'
} ];

使用声明式配置能得到相同的结果。


1
+1: 确实有这个选项。甚至不需要重命名函数,因为 ext 属性已经完成了工作。然而,需要版本 0.4 的 Grunt,这一点在开始时并不清楚。 - asgoth
2
我不知道为什么,但我必须从文件中删除 [ ]:这样 files: { ... } 对我有效,而 files: [{ ... }] 抛出错误 Object #<Object> has no method 'indexOf' - Natwar Singh

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');
                }
            })

        }
    },

最终使用了类似这样的东西,它完美地工作了。谢谢! - uxtx

3
如果你只想将文件的扩展名从.jade更改为.html,另一个选择是使用flattenext参数,如下所示:
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'
            }
        ]}
}

谢谢。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接