grunt task to modify yeoman angular index.html

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