grunt task to modify yeoman angular index.html - angularjs

Question

yo angular sets up a basic scaffold for writing angular apps. So in index.html we have code as follows:
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css" />
<!-- endbower -->
<!-- endbuild -->
I am looking for a task that would remove those lines and inject the correct location of the files. For e.g.:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
Or is there some alternate way to deal with this...like for e.g. have the watch task create different versions of index.html, say index.html.fooTarget; it gets updated with the correct paths for that target; and then when it comes to the grunt task have the latter file copied appropriately.
What can be done to deal with this?

Answer 1

Maybe you should let the paths be as they are since CSS files are bower dependencies, too. Copy the dependencies to a directory with the same relative path?
But if you will, I think this will help you modify your grunt tasks.
I assume you have (at least) the following in your package.json.
{
"name": "app",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-text-replace": "0.3.11"
}
}
Then the minimal copy & replace tasks could look like the following in your Gruntfile.js (you can combine copy and replace by using grunt-contrib-copy alone, if you will).
'use strict';
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-text-replace');
grunt.initConfig({
src: 'src',
dest: 'dest',
copy: {
dev: {
expand: true,
cwd: '<%= src %>',
src: '{,*/}*.html',
dest: '<%= dest %>/'
}
},
replace: {
dev: {
src: ['<%= dest %>/{,*/}*.html'],
overwrite: true,
replacements: [{
from: 'bower_components/bootstrap/dist/css',
to: 'css'
}]
}
}
});
grunt.registerTask('prepare', function(val) {
var target = val || 'dev';
grunt.task.run([
'copy:' + target,
'replace:' + target
]);
});
};
Now when you run prepare task with desired target it will copy all HTML files from src to dest directory and have desired CSS paths replaced, leaving original files intact.
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
--> will be replaced as -->
<link rel="stylesheet" href="css/bootstrap.css" />