0

まず第一に、私の英語で申し訳ありません。

さて、私の質問;-)

/src/main/html にある index.html には、Javascript ファイル (/components と /src/main/javascript) 用の 2 つのディレクトリが含まれています。/ ディレクトリにある私の gruntfile を想像してみてください。

/target/gui/javascript ディレクトリにあるすべての JavaScript ファイルに対して .js のみを使用する最も簡単な方法を見つけたいと思います。

しかしその前に、javascript のソース ディレクトリごとに 1 つのファイルを作成しても問題ありません。しかし、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 ビルドを起動すると、奇妙なことがわかります。

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

誰かが私を助けることができますか？

よろしくお願いします、

マヌー

4

1 に答える 1

3

Usemin の「代替検索パス」は、index.html で参照されているパスを検索するための元のディレクトリとして使用されます。

構成では、ディレクトリ (ルート ディレクトリにある)を見つけるために、パスの 3 つをキャンセルする必要があります。..component

この構成はトリックを行います：

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

実際のディレクトリ名を指定する必要はないことに注意してください。

于 2013-09-23T09:20:24.563 に答える