Grunt удаляет async и откладывает от моих скриптов и css

Я работаю над webapp с помощью AngularJs, и я использую Grunt для компиляции и задач. Когда я компилирую с serve: 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 -->

Я исследовал, и я думаю, что проблема в задачах // Переименовывает файлы для кеширования браузера filerev : { dist : { src : [ '<% = yeoman.dist%> / scripts / {, * /} *. Js' , '<% = yeoman.dist%> / styles / {, * /} *. css' , '<% = yeoman.dist%> / images / {, * /} *. {png, jpg, jpeg, gif, webp, svg} ' , ' <% = yeoman.dist%> / styles / fonts / * ' ] } } // считывает HTML для блоков usemin, чтобы включить интеллектуальные сборки, которые автоматически // concat, minify и revision files. Создает конфигурации в памяти, поэтому // могут работать на них дополнительные задачи useminPrepare : { html : '<% = yeoman.app%> / index.html' , options : { dest : '<% = yeoman.dist%>' , поток : { html : { steps : { js : [ 'concat ' , ' uglifyjs ' ], css : [ ' cssmin ' ] }, post : {} } } } } // Выполняет перезаписи на основе filerev и конфигурации useminPrepare usemin : { html : [ ' <% = yeoman.dist% > / {, ** /} *. html ' ], css : [ ' <% = yeoman.dist%> / styles / {, * /} *. css ' ], options : { assetsDirs : [ ' <% = yeoman.dist%> ' , ' <% = yeoman.dist%> / images ' ] } } или filerev файла Gruntfile, но я не нашел решения:

blockReplacements

Есть идеи?

javascript,css,angularjs,gruntjs,yeoman,

1

Ответов: 1


1 принят

Если я правильно понял проблему, проблема в том, что обработанные теги удалили асинхронный / отложенный запрос? Если да, посмотрели ли вы на useminфункцию 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>';
  }
}
JavaScript, CSS, angularjs, gruntjs, старшина,
Похожие вопросы