使用globbing在Grunt中的HTML <head>中加载多个文件

Kristian 发表于 Dev

克里斯蒂安

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

我们正在使用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任务中很常见的globing模式，例如scripts/{,*/}*.coffee。

我们是否可以使用任何种类的插件将glob模式放入HTML页面中以一次加载所有这些插件？

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

谢谢！

洛伦兹

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>

这汇集了来自HTML模板index.html成build/index.html，其中包括所有的风格和脚本下styles/和scripts/。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。