Question

我使用yeoman开始一个角度项目。我用凉亭来安装一些角度组件。

在我的index.html中，我有这种代码的和平

  <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
  <!--should be the last to override-->
  <link rel="stylesheet" href="styles/custom2.css">
  <link rel="stylesheet" href="styles/diverse.css">
</head>
<!-- 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/angular-route/angular-route.js"></script>
<script src="bower_components/hello/dist/hello.all.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>

我跑完后

grunt serve:dist

index.html得到编译，这是结果。

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>indexPage</title> 
<meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!--to auto host later--> 
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css"> 
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"> <!--should be the last to override--> 
<link rel="stylesheet" href="styles/custom2.css"> 
<link rel="stylesheet" href="styles/diverse.css"> </head> 
<script src="scripts/vendor.3bff2419.js"></script> <script src="scripts/scripts.c4d1c5ee.js"></script> <body ng-app="frontApp" ng-class="body_style"> <!--<div ng-show="mainNavBar_show" ng-include src="mainNavBar"></div>--> <div ng-view></div> </body> </html>

所有显示为链接的文件rel =＆＃34; ...＆＃34; 抛出404错误。（不是成功编译的文件的情况）

这是错误代码的屏幕截图。我怎样才能让grunt添加这些文件。我用了yeoman附带的defaukt grunt.js。

Answer 1

似乎你的HTML已被重写以指向DIST文件夹，这是“有意义的”，解决方案可能是将您的bower组件的副本复制到DIST文件夹或更改您的grunt任务中的重写html规则

我使用像这样的副本grunt任务

copy: {
            main: {
                files: [
                    { src: ['**/**.min.css'], dest: 'dist/' },
                    { src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/' },
                    { src: ['bower_components/Chart.js/Chart.min.**'], dest: 'dist/' },
                    { src: ['bower_components/jquery/jquery.min.**'], dest: 'dist/' },
                    { src: ['bower_components/angular/angular.min.**'], dest: 'dist/' },
                    { src: ['bower_components/angular-i18n/angular-locale_es-419.min.**'], dest: 'dist/' },
                    //... and so on...

               ]
            }
        }

yeoman和grunt没有包装一些css文件

1 个答案: