Grunt 从我的脚本中删除异步和延迟 css

Question

我正在使用 AngularJs 开发一个网络应用程序，我正在使用 Grunt 进行编译和任务。当我使用 serve:dist 编译时，Grunt 不会将 async/defer 添加到 main.css 和 scripts.js 文件。我在 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

如果我对问题的理解正确，问题是已处理的标签 async/defer 从中删除了？如果是这样，您是否查看了 usemin 任务的 blockReplacements 函数？ https://github.com/yeoman/grunt-usemin#blockreplacements

您似乎可以提供一个功能，让您定义如何替换资产的脚本和 link 标签。例如，看起来您可以将以下内容添加到 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

Grunt remove async and defer from my scripts and css

javascript

css

angularjs

gruntjs

yeoman