10

index.html には 2 つのブロックが定義されています。1 つはサードパーティ ライブラリ用で、もう 1 つはアプリケーション ファイル用です。サードパーティのライブラリは既に縮小されているため、それらを連結したいだけで、醜くはなりません。どうすればこれを行うことができuseminPrepareますか?

<!-- build:js js/lib.js -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

 <!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/LanguageCtrl.js"></script>
<!-- endbuild -->

gruntfile.js:

useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                html: {
                    steps: {
                        // TODO for libs.js block I don't want uglify!
                        js: ['concat', 'uglifyjs'], 
                        css: ['cssmin']
                    },
                    post: {}
                }
            }
        }
    }
4

1 に答える 1

17

カスタムブロックを定義する必要があるようです。例を示します - concat のみでカスタム ブロック "myjs" を作成します。

Gruntfile.js

useminPrepare: {
  html: '<%= config.app %>/index.html',
  options: {
    dest: '<%= config.dist %>',
    flow: {
      // i'm using this config for all targets, not only 'html'
      steps: {
        // Here you define your flow for your custom block - only concat
        myjs: ['concat'],
        // Note that you NEED to redefine flow for default blocks... 
        // These below is default flow.
        js: ['concat', 'uglifyjs'],
        css: ['concat', 'cssmin']
      },
      // also you MUST define 'post' field to something not null
      post: {}
    }
  },
},

カスタム ブロックのブロック置換も定義する必要があります。これらのブロックは、js の場合と同じである必要があります。

Gruntfile.js:

usemin: {
  options: {
    assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images'],
    blockReplacements: {
      // our 'replacement block'
      myjs: function (block) {
        return '<script src="' + block.dest + '"></script>';
      }
      // no need to redefine default blocks
    }
  },
  html: ['<%= config.dist %>/{,*/}*.html'],
  css: ['<%= config.dist %>/styles/{,*/}*.css']
},

これで、新しいカスタム ブロックを index.html で使用できるようになりました。

<!-- build:myjs js/lib.js -->
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular-cookies/angular-cookies.min.js"></script>
  <script src="lib/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

<!-- build:js js/app.js -->
  <script src="js/app.js"></script>
  <script src="js/controllers/LanguageCtrl.js"></script>
<!-- endbuild -->

これで、必要に応じて動作するはずです。私はこのコードをテストしていませんが、アプリに非常によく似た構成があり、魅力的に機能します。また、置換ブロックの定義にも問題がありました。非常にイライラしました。

それが役に立てば幸い！

于 2014-07-18T07:10:06.330 に答える