Question

对于我正在处理的单页应用，我有以下结构：

DIST
- CSS
- JS
- LIB
- 泛音
- 的index.html
SRC
- CSS
- JS
- LIB
- 的观点
  - 泛音
  - index.jade

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

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

目前我正在使用 grunt-contrib-jade 任务来编译和复制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']
            }
        }
    }

Answer 1

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

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

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

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

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

与声明性配置相同。

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

        }
    },

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

感谢。

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

3 个答案: