添加新js后，yeoman / grunt-usemin不更新index.html

Question

I am using yeoman with the angular generator for a web app on windows7. After running yo angular I run grunt to build the app for deployment. My index.html file in the dist folder is changed accordingly with the css and js files that was concatenated and minified.

When I add a new js file to index.html for example

<script src="bower_components/json3/lib/json3.js"></script>

and I run grunt again to build; the index.html file no longer changes the css aan js files to the minified ones, it basically shows exactly the same as the index.html in the app directory.

I also tried putting the json3.js inside the build:js comments:

 <!-- build:js scripts/json.js -->
 <script src="bower_components/json3/lib/json3.js"></script>
 <!-- endbuild -->

Is there something I am missing here? Must I change something in the grunt file like the usemin section?

Answer 1

I repeatedly bumped into this problem and have found a solution in my case.

I am using vs 2012 to create my HTML and cmd for the grunt tasks. It seems that my Line endings were not correct, so I changed them to Unix (LF) and grunt-usemin did its thing. When settings the line endings to Windows (CR LF) grunt-usemin don't update the index.html page correctly.

Hope this helps somebody!

Answer 2

Note that your custom JavaScripts are included from build:js({.tmp,app}) section, that's why they get minified in a single file.
I'm not suggesting putting libraries obtained by bower to build:js({.tmp,app}) - see remarks of: https://stackoverflow.com/a/19034513/1432478 .

A good idea might be looking at grunt's cdnify task.
json3 CDN

Answer 3

I had the exact same problem. The only way that I could find to fix it was in the Gruntfile under the htmlmin task.

When the index.html file was not changing, my htmlmin task was as follows:

htmlmin: {
  dist: {
    options: {
      //options
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>',
      src: ['*.html', 'views/{,*/}*.html'],
      dest: '<%= yeoman.dist %>'
    }]
  }
}

If I simply removed the *.html part in html:files:src , the build worked fine. My newer htmlmin task looked like this:

htmlmin: {
  dist: {
    options: {
      //options
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.app %>',
      src: ['views/{,*/}*.html'],
      dest: '<%= yeoman.dist %>'
    }]
  }
}

Hopefully this helps someone. It took me a while to figure out why the index.html file wasn't being edited correctly.

Answer 4

I was having the same issue with not being able to add angular-route and angular-animate - by that I mean the reference to the files - their script tags - were not being saved to the index.html file.

I discovered it was because I had entered their script tags before the tag in my index.html file. After putting them immediately after, it worked fine.