Question

首先，对不起我的英语，抱歉咕噜咕噜地说道。

现在，我的问题; - ）

我有两个目录用于我的Javascript文件（/ components和/ src / main / javascript），它们包含在index.html上，位于/ src / main / html上。想象一下我/目录上的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 -->

我的问题是 my components.js为空。当我启动我的grunt构建时，我可以看到一个奇怪的事情：

    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更新？不是组件/ 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，grunt理解我想要的路径？

我的Grunt文件有什么用？

    (...)
     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 build：

  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']);

有人可以帮助我吗？

致以最诚挚的问候，

马努

Answer 1

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

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

这个配置可以解决问题：

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

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

index_上的grunt-usemin和多个路径

1 个答案: