Question

我认为这可能是更通用的问题。如何向自定义生成的应用程序添加自定义（供应商）脚本。我用npm安装了角度图表（npm install angular-chart --save）。我将脚本添加到index.html。

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->    
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<!-- endbuild -->

但是使用grunt进行分发并不能创建适当的缩小脚本。

scripts.226f19b7.js:1 Uncaught Error: Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/

Answer 1

将库包含在您的grunt任务版本中（ Gruntfile.js ）

你会发现这个任务或类似的东西：

grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'postcss',
'concat',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);

我认为您会在 copy：dist 任务

中找到您的解决方案

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '*.html',
        'images/{,*/}*.{webp}',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      expand: true,
      cwd: 'bower_components/bootstrap/dist',
      src: 'fonts/*',
      dest: '<%= yeoman.dist %>'
    },
    {
      expand:true,
      cwd:'node_modules/yourlib/,
      src:'*',
      dest:'<%=yeoman.dist %>'
     }

Answer 2

感谢webenegized我终于找到了问题和解决方案。
首先，它应该开箱即用！不需要gruntfile.js修改或任何其他操作。只需要安装dependecies，将所需的脚本标记放在index.html中即可。自耕农发电机的魔力。我遇到的错误是由angular-chart.js网站上示例中不正确的脚本标记值的复制/粘贴引起的（请参阅：安装部分）。网站示例说明：
<script src="node_modules/chart.js/Chart.min.js"></script>
但真正的道路应该是 <script src="node_modules/chart.js/dist/Chart.min.js"></script>（ dist 文件夹丢失）。
我应该发现这一点，因为错误我已经清楚地表明包含了angular-chart.js，并且投诉是关于它的依赖性（chart.js）。事实证明，我认为自己并不那么敏锐。

如何将角度图添加到yeoman生成的角度应用程序？

2 个答案: