yeoman 和 grunt 没有打包一些 css 文件答案

【问题标题】：yeoman and grunt are not packaging some css filesyeoman 和 grunt 没有打包一些 css 文件
【发布时间】：2015-12-11 00:28:33
【问题描述】：

我使用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="..." 的文件正在抛出 404 错误。（编译成功的文件不是这样）

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

【问题讨论】：

发布创建“构建”的繁重任务
我编辑了我的帖子并添加了 gruntFile.js
你使用的是哪个 yeoman 生成器？

标签： angularjs gruntjs yeoman yeoman-generator yeoman-generator-angular

【解决方案1】：

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

我使用像这样的复制任务

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...

               ]
            }
        }

【讨论】：

我可以删除副本吗：{ tmp: { files: [{ expand: true, cwd: 'test/fixtures', src: ['usemin.html', 'usemin/*'], dest : 'tmp/' }] } 还是我必须同时连接两者
好像那个步骤是为了以后做其他的过程，那可能是为了压缩/优化js文件，所以我认为删除步骤不是一个好的选择，尝试添加额外的步骤来复制DIST 文件夹中的文件
您是否仔细检查了 dist 文件夹中的文件？
我无法检查我的 dist 文件夹中的任何内容，它是一个已编译和缩小的文件
我的意思是这些库是否物理地位于 dist/bower_components/linbrary-name 中？