Question

我正在使用AngularJs开发一个webapp，我正在使用Grunt进行编译和任务。当我使用 serve：dist 进行编译时，Grunt不会向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 -->

我研究过，我认为问题出现在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

如果我正确理解了问题，问题是已处理的代码是否已从中删除了异步/延迟？如果是，您是否查看过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>';
  }
}

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

1 个答案: