grunt-usemin 和 index.html 上的多个路径答案

【问题标题】：grunt-usemin and multiple path on index.htmlgrunt-usemin 和 index.html 上的多个路径
【发布时间】：2013-09-21 18:09:36
【问题描述】：

首先，对不起我的英语，很抱歉是 grunt 的新手。

现在，我的问题;-)

我的 Javascript 文件（/components 和 /src/main/javascript）包含在 /src/main/html 上的 index.html 中的 2 个目录。想象一下我在 / 目录下的 gruntfile。

我想找到一种最简单的方法，让 /target/gui/javascript 目录中的所有 javascript 文件都只有一个 .js。

但在此之前，我可以通过 javascript 源目录拥有一个文件。但是，当我对 index.html 进行以下评论时，我遇到了问题。

<!-- build:js(components/angular) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js(src/main/javascript) javascript/app.js -->
    <script src="../javascript/app.js"></script>
    <script src="../javascript/lists/services/lists.js"></script>
    <script src="../javascript/lists/controllers/listsctrl.js"></script>
    <script src="../javascript/lists/controllers/listctrl.js"></script>
<!-- endbuild -->

我的问题是 我的 components.js 是空的。当我启动我的 grunt build 时，我可以看到一件奇怪的事情：

    Found a block:
    <!-- build:js(components/angular) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
    <!-- endbuild -->
    Updating config with the following assets:
    - ../components/angular/angular.js

使用 ../components/angular/angular.js 进行更新？不是 components/angular/angular.js 吗？我不明白。我对我的 CSS 文件做了同样的事情，它做了我想要的：

    <!-- build:css(components/bootstrap/css) css/components.css -->
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
    <!-- endbuild -->
    <!-- build:css(src/main/css) css/app.css -->
    <link rel="stylesheet" href="../css/shoppinglist.css" type="text/css" />
    <!-- endbuild -->

我可以看到

Found a block:
    <!-- build:css(components/bootstrap/css) css/components.css -->
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
    <!-- endbuild -->
Updating config with the following assets:
    - components/bootstrap/css/bootstrap.css
    - components/bootstrap/css/bootstrap-responsive.css

那么，对于 CSS，咕噜明白我想要的路径吗？

我的 Gruntfile 中有什么？

    (...)
     dest: {
        buildRoot : 'target',
        guiRoot   : 'target/gui',
        html: {
           index:    'target/gui/index.html',
           partials: 'target/gui/partials'
        },
        res:        'target/gui/assets'
    },
    useminPrepare: {
      html: '<%= dest.html.index %>'
    },

    usemin: {
      html: ['<%= dest.html.index %>'],
      options: {
        dirs: ['<%= dest.guiRoot %>']
      }
    }
    (...)

我使用 grunt 构建：

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-usemin');


    grunt.registerTask('build',   ['clean', 'copy:html', 'copy:res', 'copy:server', 'copy:heroku', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);

有人可以帮助我吗？

最好的问候，

手动

【问题讨论】：

标签： grunt-usemin

【解决方案1】：

Usemin 的“备用搜索路径”用作原始目录来搜索 index.html 中引用的路径。

在您的配置中，您必须取消路径中的三个.. 才能找到component 目录（位于根目录中）。

这个配置可以解决问题：

<!-- build:js(aFakeDir/anotherFakeDir/yetAnotherFakeDir) javascript/components.js -->
    <script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->

请注意，您不必指定真实的目录名称。

【讨论】：