CODEWITHSUNDEEP
taskgruntjs
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

grunt: how to replace paths in html file using grunt task

inside my grunt configuration if have a variable which defines a directory which contains a css file. Now I would like to configure a grunt task which insert the value of this variable into a html file. For example, I can imagine that I have an index.html file as follows

<!doctype html>
   <head>
      <link rel="stylesheet" href="<% pathToCss %>/styles.css">
      ...

But I cannot find a task which can do that for me. Any suggestions which grunt taks can do this for me ?

Upvotes: 9

Views: 10809

Answers (2)

Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

I just found out that it can be done with grunt.template as follows:

template: {
        options: {
            data: {
                pathToCss: './css'
            }
        },
        demo: {
            files: [
                { '<%= ./output/index.html':  ['<%= ./input/template.html'] }
            ]
        }
    },

And in the input file (template.html) you define 'pathToCss' as follows:

<link rel="stylesheet" href="../../<%- pathToCss %>/styles.css">

However, if I look at the documentation, I don't see where this is documentated!

Upvotes: 10

Taylan Aydinli
Taylan Aydinli

Reputation: 4363

I think the grunt-replace package is what you're looking for. You can read an external file and use its value in the patterns definitions like so:

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: '<% pathToCss %>',
          replacement: '<%= grunt.file.read("conf/assets-dir.txt") %>'
        }
      ]
    }
  }
}

Upvotes: 7

Related Questions