grunt 自动插入你的 javascript 文件答案

【问题标题】：grunt auto insert your javascript filesgrunt 自动插入你的 javascript 文件
【发布时间】：2017-12-06 13:09:13
【问题描述】：

我刚刚开始了解 usemin 和 wiredep。我的 index.html 文件中有这个：

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->

如果我运行 grunt build，index.html 会被修改为：

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" />
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->

这很好，但它只发生在 bower:css 文件中（我相信这是用 wiredep 完成的。在我的页面下方，我有类似于 JavaScript 文件这也有效。我想为我自己的 JavaScript 文件做这件事。目前我有大约 100 个，我已经手动将它们放入我的 src/index.html 中。构建我的应用程序时，usemin 将我的脚本替换为连接后的丑陋版本，这非常棒。但是当我构建时，我希望 src/index.html 从 src/app 目录中获取所有脚本并将它们注入到我的 html 文件中。

这个可以吗？

【问题讨论】：

标签： javascript grunt-usemin wiredep grunt-wiredep

【解决方案1】：

我设法使用grunt-injector 解决了这个问题。我将 Gruntfile 配置为像这样使用 grunt-injector：

// Automatically inject my components into index.html
injector: {
  options: {
    template: '<%= yeoman.app %>/index.html'
  },
  html: {
    options: {
      transform: function (filePath) {
          return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '<%= yeoman.app %>/app/**/*.html'
      ]
    }
  },
  scripts: {
    options: {
      transform: function (filePath) {
          return '<script src="' + filePath.replace('/src/', '') + '"></script>';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '<%= yeoman.app %>/app/**/*.module.js',
        '<%= yeoman.app %>/app/**/*.js'
      ]
    }
  },
  styles: {
    options: {
      transform: function (filePath) {
          var media = filePath.indexOf('print') > -1 ? 'print' : 'screen';
          return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />';
      }
    },
    files: {
      '<%= yeoman.app %>/index.html': [
        '.tmp/styles/**/*.css'
      ]
    }
  }
},

然后在我的 index.html 中，我只是将 injector cmets 像这样放置：

  <!-- injector:css -->
  <!-- endinjector -->

转换成这个：

  <!-- injector:css -->
  <link rel="stylesheet" media="screen" href="styles/core.css" />
  <link rel="stylesheet" media="print" href="styles/print.css" />
  <!-- endinjector -->

就是这样。

【讨论】：