Grunt удалить async и отложить от моих скриптов и css

Question

Я работаю над webapp с AngularJs, и я использую Grunt для компиляции и задач. Когда я компилирую с помощью , выполните: dist, Grunt не добавляет async/defer в файлы main.css и scripts.js. У меня есть другие скрипты с async/defer вне тегов grunt, и эти скрипты сохраняют 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 --> 

Я исследовал, и я думаю, что проблема в usemin задач или filerev из Gruntfile, но я не нашел решение:

// 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

Если я правильно понял проблему, проблема заключается в том, что обработанные теги удаляют асинхронный или отложенный ответ? Если да, просмотрели ли вы функцию blockReplacements задачи usemin? https://github.com/yeoman/grunt-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>'; 
    } 
}