私のスクリプトとCSSから非同期を取り除き、延期する

Question

私はAngularJsでWebアプリケーションを開発しています。私はGruntを使ってコンパイルとタスクを行っています。 でコンパイルすると：dist、gruntはmain.cssとscripts.jsファイルにasync/deferを追加しません。私はgruntタグの外でasync/deferを持つ他のスクリプトを持っており、このスクリプトはasync/deferを保持します。

Index.htmlと：

<!-- build:css(.tmp) styles/main.css --> 
    <link async rel="stylesheet" href="styles/main.css"> 
    <link async rel="stylesheet" href="styles/global.css"> 
    <link async rel="stylesheet" href="styles/map.css"> 
    <link async rel="stylesheet" href="styles/core_app.css" data-main-css="1"> 
    <link async rel="stylesheet" href="styles/fonticons_app.css" media="screen"> 
    <link async rel="stylesheet" type="text/css" href="styles/landing_app.css" media="screen" /> 
<!-- endbuild --> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script defer src="scripts/settings.js"></script> 
    <script defer src="scripts/app.js"></script> 
    <script defer src="scripts/services/localize.js"></script> 
    <script defer src="scripts/services/mobiledetection.js"></script> 
    <script defer src="scripts/services/storage.js"></script> 
    <script defer src="scripts/controllers/main.js"></script> 
    <script defer src="scripts/controllers/general.js"></script> 
    <script defer src="scripts/services/api.js"></script> 
<!-- endbuild --> 

私が調査し、私はこの問題はGruntfileのタスクuseminまたはfilerevであると思いますが、私は解決策を見つけることができませんでした：

// Renames files for browser caching purposes 
     filerev: { 
      dist: { 
       src: [ 
        '<%= yeoman.dist %>/scripts/{,*/}*.js', 
        '<%= yeoman.dist %>/styles/{,*/}*.css', 
        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
        '<%= yeoman.dist %>/styles/fonts/*' 
       ] 
      } 
     }, 

// Reads HTML for usemin blocks to enable smart builds that automatically 
     // concat, minify and revision files. Creates configurations in memory so 
     // additional tasks can operate on them 
     useminPrepare: { 
      html: '<%= yeoman.app %>/index.html', 
      options: { 
       dest: '<%= yeoman.dist %>', 
       flow: { 
        html: { 
         steps: { 
          js: ['concat', 'uglifyjs'], 
          css: ['cssmin'] 
         }, 
         post: {} 
        } 
       } 
      } 
     }, 

     // Performs rewrites based on filerev and the useminPrepare configuration 
     usemin: { 
      html: ['<%= yeoman.dist %>/{,**/}*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
      options: { 
       assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'] 
      } 
     }, 

任意のアイデアを？

Answer 1

問題を正しく理解すると、処理されたタグには非同期/遅延が取り除かれているという問題があります。もしそうなら、useminタスクのblockReplacements機能を見ましたか？

アセットのスクリプトタグとリンクタグを置き換える方法を定義できるようになっているようです。たとえば、あなたが望むものを達成するために、useminタスクのオプションに以下を追加できるようです：

blockReplacements: { 
    css: function(block) { 
    return '<link async rel="stylesheet" type="text/css" href="' + block.dest + ' />'; 
    }, 
    js: function(block) { 
    return '<script defer src="' + block.dest + '"></script>'; 
    } 
}