Question

是否有任何类型的Grunt任务或插件可以使用globbing在HTML页面的<head>中加载许多文件？

我们正在使用Ember.js并开始看到很多重复：

<script type="text/javascript" src="js/controllers/(controller).js">
<script type="text/javascript" src="js/controllers/(controller).js">
<script type="text/javascript" src="js/controllers/(controller).js">

<script type="text/javascript" src="js/models/(model).js">
<script type="text/javascript" src="js/models/(model).js">
<script type="text/javascript" src="js/models/(model).js">

在我们的Gruntfile中，我们使用了在Grunt任务中非常常见的globbing模式，类似于scripts/{,*/}*.coffee。

我们可以使用任何类型的插件将glob模式放入我们的HTML页面中以立即加载所有这些吗？

如果我们可以使用它来加载CSS，这将非常有用。我的猜测是我们需要某种非特定的文件加载器，我们可以只指定模式和目录。

谢谢！

Answer 1

grunt-html-build（https://github.com/spatools/grunt-html-build）应该完成这项工作。您可以使用占位符为脚本，样式和其他HTML模板定义HTML模板，然后由插件进行编译。

Grunt HTMLBuild配置

htmlbuild: {
    dev: {
        src: 'index.html',
        dest: 'build/',
        options: {
            styles: {
                app: 'styles/*.css'
            },
            scripts: {
                app: 'scripts/*.js'
            }
        }
    }
}

HTML模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- build:style app -->
        <!-- /build -->
    </head>

    <body>
        <!-- build:script app -->
        <!-- /build -->
    </body>
</html>

这会将index.html的HTML模板编译为build/index.html，包括styles/和scripts/下的所有样式和脚本。

使用globbing在Grunt中以HTML格式加载多个文件

1 个答案: