Grunt删除异步并推迟从我的脚本和css

Question

我正在与AngularJs的Web应用程序，我正在使用Grunt进行编译和任务。当我编译serve：dist，Grunt不会为main.css和scripts.js文件添加async/defer。我有其他脚本与异步/推迟grunt标签之外，这个脚本保持异步/延迟。

的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功能吗？ 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>'; 
    } 
}