Grunt doesn't change bower_components

Question

I have this yeoman generated GruntFile.js. When I run "grunt" the dist folder does not change all my scripts from bower_components/*.js, only some of them.

Here is a sample of index.html from dist folder

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

As you can see it doesn't find the correct js file to use. How can I fix this? The same issue is with my css files

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

Thanks! If you spot any other mistakes or improvements in my GruntFile.js please let me know

EDIT

Here is my bower.json file

{
  "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"
  }
}

Here is my 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"
  }
}

Answer 1

the usemin task in your Gruntfile.js will look for

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

and

<!-- endbuild -->

and will concatenate all the files listed between these two into one single file and minify that. this single minified file will be written at the path mentioned by you in {{path/fileName}}

...so if I'm understanding it well then your Gruntfile is perfectly fine and you are probably missing usemin comment blocks in your index.html

put all your link and script tags betweeen usemin blocks

for example for your bower components you can use something like this

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

NOTE: all your bower component css files will go in vendor.css in styles directory i.e. dist/styles/vendor.css and similarly bower component js files will go in vendor.js in scripts directory i.e. dist/scripts/vendor.js

...and for your own js and css files you can use something like this

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

NOTE: here all your css files will go in main.css in styles directory i.e. dist/styles/main.css and similarly js files will go in main.js in scripts directory i.e. dist/scripts/main.js

...hope it helps :)

Answer 2

I think that you need to add comments in the index.html to tell grunt where CSS and JS files should be added. Also if you change manually something between these tags, it will be overwriteen on the next restart of grunt (that's what i noticed not sure it's a standard feature)

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

Here is what is generated by angular generator :

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

You need to encapsulate with build tag for grunt (and bower for bower)

Answer 3

Unless you tell grunt to copy these files to /dist folder as a part of the build process, it won't do anything. You can use grunt copy to do this.

// 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']
  }
},

I recommended you also use concat/usemin to concatenate all your 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 -->

This will create one concat.js files using the script tags between <!-- build:js --> tags. this file can then by copied using grunt copy.

Answer 4

Check if you have set up in you html file. That is what triggers the grunt uglyfy/css min task. Or you can just un-comment these tasks in your grunt config file and make sure they are un-comented in the buttom inside your build task. Good luck