Question

我有一个index.html文件，列出了几个依赖项。我正在使用自耕农的发电机角度作为脚手架。我想创建一些多个分发版本，每个版本都有一个index.html，其中包含这些依赖项的不同子集，使用grunt任务。

我正在使用usemin，但它不提供此功能。文件很多且不断变化，因此手动忽略每个构建的文件是不可行的。

这可以通过很多方式实现，例如通过在某些构建中划分某些块来省略（虽然我需要命名它们，所以二进制是/否分隔符 - 例如调试 - 不会删除它）。例如，如果该功能是由可以注意忽略块的东西提供的，那么使用build dev，simple和dist：

<!doctype html>
<html>
    <head>
    <title>Clotho</title>

        <!-- build:css(css) styles/main.css -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/other.css">
        <!-- ignore:dist -->
        <link rel="stylesheet" href="css/another.css">
        <!-- endignore -->
        <!-- endbuild -->

</head>
<body>

    <header>...</header>

    <div class="container" id="mainContent"> ... </div>

    <!-- ignore:dist,simple -->
    <div class="container" id="devOnlyContent"> ... </div>
    <!-- endignore -->

    <footer>...</footer>

    <!-- SCRIPTS -->

    <!-- [libraries to be used by all] -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/lodash/dist/lodash.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>

    <!-- [scripts to be used by all] -->
    <!-- build:js scripts/shared-module.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/shared.js"></script>
    <!--endbuild-->

    <!-- ignore:dev -->
    <script src="productionOnlyScript.js"></script>
    <!-- endignore -->


    <!-- ignore:simple -->
    <!-- build:js scripts/advanced-module.js --> 
    <script src="scripts/_foundation/_kickoff.js"></script>
    <script src="scripts/_foundation/setup.js"></script>
    <script src="scripts/_foundation/clothoDirectives.js"></script>
    <script src="scripts/_foundation/extensions.js"></script>
    <!--endbuild-->
    <!-- endignore-->

</body>
</html>

谢谢你的帮助。

Answer 1

Yo可以使用grunt-processhtml有条件地包含依赖项（在单独的* .html部分中列出），具体取决于哪个grunt目标处于活动状态。

此外，经过一些谷歌搜索后，我发现了这一点：https://github.com/jsoverson/grunt-preprocess/ 它应该提供相同的功能，而不需要使用单独的部分，这是更好的。

使用grunt从相同的index.html创建多个支架

1 个答案: