Grunt 不会改变 bower_components答案

【问题标题】：Grunt doesn't change bower_componentsGrunt 不会改变 bower_components
【发布时间】：2015-03-31 14:25:02
【问题描述】：

我有这个 yeoman 生成的 GruntFile.js。当我运行“grunt”时，dist 文件夹不会更改我从 bower_components/*.js 中的所有脚本，只是其中的一些。

这是 dist 文件夹中的 index.html 示例

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-messages.min.js"></script>
<script src="bower_components/angular-utf8-base64/angular-utf8-base64.js"></script>
<script src="bower_components/ng-table/ng-table.js"></script>
<script src="bower_components/lodash/dist/lodash.js"></script>
<script src="bower_components/angular-growl-v2/build/angular-growl.js"></script>
<script src="bower_components/nya-bootstrap-select/dist/js/nya-bs-select.js"></script>

如您所见，它没有找到要使用的正确 js 文件。我怎样才能解决这个问题？我的 css 文件也有同样的问题

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
  <link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
  <link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">

谢谢！如果您在我的 GruntFile.js 中发现任何其他错误或改进，请告诉我

编辑

这是我的 bower.json 文件

{
  "name": "civilization-web",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.3.7",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.3.1",
    "angular-resource": "~1.3.7",
    "angular-sanitize": "~1.3.7",
    "angular-animate": "~1.3.7",
    "angular-touch": "~1.3.7",
    "angular-route": "~1.3.7",
    "angular-utf8-base64": "~0.0.5",
    "angular-messages": "~1.3.8",
    "ng-table": "~0.3.3",
    "angular-bootstrap": "~0.12.0",
    "ng-file-upload": "~2.0.5",
    "ng-file-upload-shim": "~2.0.5",
    "lodash": "2.4.1",
    "angular-growl-v2": "~0.7.3",
    "nya-bootstrap-select": "~2.0.8"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.7",
    "angular-scenario": "~1.3.7"
  },
  "appPath": "app",
  "resolutions": {
    "angular": "1.3.8"
  }
}

这是我的 package.json

{
  "name": "civilizationweb",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^0.7.3",
    "grunt-concurrent": "^0.5.0",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.9.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^0.2.1",
    "grunt-google-cdn": "^0.4.0",
    "grunt-karma": "^0.9.0",
    "grunt-newer": "^0.7.0",
    "grunt-ng-annotate": "^0.10.0",
    "grunt-svgmin": "^0.4.0",
    "grunt-usemin": "^2.1.1",
    "grunt-wiredep": "^1.7.0",
    "jshint-stylish": "^0.2.0",
    "karma": "^0.12.24",
    "karma-jasmine": "^0.1.5",
    "karma-phantomjs-launcher": "^0.1.4",
    "load-grunt-tasks": "^0.4.0",
    "time-grunt": "^0.3.1"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

【问题讨论】：

你试试bower install --save吗？ npm 只安装 bower，但之后您必须安装 bower 包。 -S, --save: Save installed packages into the project’s bower.json dependencies。来源：bower.io/docs/api/#install
我已经运行了 bower install --save。我也可以发布我的 bower.json 文件
当你运行“gruntwiredep”时它是否工作——这个任务应该连接依赖关系。我尝试了你的 bower.json 和 justwiredep，效果很好。
哦，您可以给我们一个指向您的 package.json 的链接。也许一些 grunt-tasks 已经更新并且现在工作得更好了。
我添加了我的 package.json。将尝试wiredep并报告

标签： javascript gruntjs yeoman bower gruntfile

【解决方案1】：

除非您告诉 grunt 将这些文件复制到 /dist 文件夹作为构建过程的一部分，否则它不会做任何事情。您可以使用 grunt copy 来执行此操作。

// Copies remaining files to places other tasks can use
copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.client %>',
      dest: '<%= yeoman.dist %>/public',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'assets/images/{,*/}*.{webp}',
        'assets/fonts/**/*',
        'index.html'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/public/assets/images',
      src: ['generated/*']
    }, {
      expand: true,
      dest: '<%= yeoman.dist %>',
      src: [
        'package.json',
        'server/**/*'
      ]
    }]
  },
  styles: {
    expand: true,
    cwd: '<%= yeoman.client %>',
    dest: '.tmp/',
    src: ['{app,components}/**/*.css']
  }
},

我建议你也使用 concat/usemin 来连接你所有的 javascript。

<!-- build:js({.tmp,client}) app/concat.js -->
<script src="app/app1.js"></script>
<script src="app/app2.js"></script>
<script src="app/app3.js"></script>
<!-- endbuild -->

这将使用 标签之间的脚本标签创建一个concat.js 文件。然后可以使用 grunt copy 复制此文件。

【讨论】：

这是写在我的 GruntFile.js // The following *-min tasks will produce minified files in the dist folder // By default, your index.html's  will take care of // minification. These next options are pre-configured if you do not wish // to use the Usemin blocks. 我认为这意味着有一个名为 prepareMin 的块可以执行此操作。但这是否意味着我必须取消注释？
你粘贴的grunt代码，我可以复制粘贴进去，还是需要修改？
我没有注意到你的 grunt 文件的链接，所以上面的代码只是一个例子。现在查看您的 grunt 文件，任务 useminPrepare 将检查您的 blocks 并 concat & uglify 您的代码并复制到 /dist 文件夹，它们看起来都不错。您在 html 页面中的脚本标签是否像上面的示例代码一样包含在  cmets 中？还有你用的是什么 yeoman 生成器？
不，他们没有那样标记。我不知道你必须这样做。如何找出我正在使用的生成器？
我还没有找到一个简单的方法来找出这个问题，但是在没有任何参数的情况下运行 yo 会列出你安装的生成器。希望这将帮助您找出您使用的那个。

【解决方案2】：

我认为你需要在 index.html 中添加 cmets 来告诉 grunt 应该在哪里添加 CSS 和 JS 文件。此外，如果您在这些标签之间手动更改某些内容，它将在下次重新启动 grunt 时被覆盖（这就是我注意到的不确定它是否是标准功能）

    <!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

以下是角度生成器生成的内容：

<!-- build:js({client,node_modules}) app/vendor.js -->
  <!-- bower:js -->
  <!-- endbower --><% if(filters.socketio) { %>
  <script src="socket.io-client/socket.io.js"></script><% } %>
<!-- endbuild -->

    <!-- build:js({.tmp,client}) app/app.js -->
    <script src="app/app.js"></script>
      <!-- injector:js -->
      <!-- endinjector -->
    <!-- endbuild -->

你需要用构建标签封装 grunt（和 bower 的 bower）

【讨论】：

【解决方案3】：

你的 Gruntfile.js 中的 usemin 任务将寻找

<!-- build:{{type}}  {{path/fileName}} -->

和

<!-- endbuild -->

并将这两者之间列出的所有文件连接到一个文件中并缩小它。此单个缩小文件将写入您在 {{path/fileName}}

中提到的路径

...所以如果我理解得很好，那么您的 Gruntfile 非常好，您可能在 index.html 中缺少 usemin 注释块

将所有链接和脚本标签放在 usemin 块之间

例如，对于您的凉亭组件，您可以使用类似的东西

<!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/ng-table/ng-table.css">
    <link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
    <link rel="stylesheet" href="bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css">

  <!-- endbower -->
<!-- endbuild -->


<!-- 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-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.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 -->
<!-- endbuild -->

注意：您所有的 bower 组件 css 文件都将放在样式目录中的 vendor.css 中，即 dist/styles/vendor.css 并且类似地，凉亭组件 js 文件将放在脚本目录中的 vendor.js 中即 dist/scripts/vendor.js

...对于您自己的 js 和 css 文件，您可以使用类似的东西

<!-- build:css(.tmp) styles/main.css -->

  <link rel="stylesheet" href="styles/css1.css">
  <link rel="stylesheet" href="styles/css2.css">

<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>

<!-- endbuild -->

注意：这里所有的 css 文件都将放在 style 目录中的 main.css 中，即 dist/styles/main.css，类似地，js 文件将放在脚本目录中的 main.js 中，即 dist/脚本/main.js

...希望它有所帮助:)

【讨论】：

谢谢。我最初删除了那些 cmets，因为我认为这只是为了冗长:)

【解决方案4】：

检查您是否已在 html 文件中设置。这就是触发 gruntuglyfy/css min 任务的原因。或者你可以在你的 grunt 配置文件中取消注释这些任务，并确保它们在你的构建任务中的按钮中没有注释。祝你好运

【讨论】：