node.jsgruntjsgrunt-plugins

grunt-processhtml remove not working when specifying a target


I'm new to grunt. I'm trying to remove a snippet of code from my index.html pagae when using grunt to build to my prod environment. Here's my code:

<!-- build:remove -->
<base href="/"></base>  
<!-- /build -->

<title>Some App</title>

<!-- build:css css/styles.min.css -->
<link href="/app/css/header.css" rel="stylesheet" />
<link href="/app/css/content.css" rel="stylesheet" />
<!-- /build -->

<!-- build:js js/scripts.head.min.js -->
<script src="/app/lib/myApp.js"></script>
<script src="/app/lib/someApp.js"></script>
<!-- /build -->

And here's my code for gruntfile.coffee:

    grunt.task.run("processhtml:build:#{targetEnv}")                        

Here's how I have configured processhtml:

_processHtml =
    options: strip: true
    build: files: 'www/index.html': ['app/index.html']

If I add prod target to build:remove statement in index.html page, then the HTML code is not removed. However, if I leave the target ('prod') off then the HTML code is removed. This seems backwards to me.

So, this works when I type in grunt build:prod - the 'base' tag is removed:

<!-- build:remove -->
<base href="/"></base>  
<!-- /build -->

this doesn't work when I type in grunt build:prod - the 'base' tag remains:

<!-- build:remove:prod -->
<base href="/"></base>  
<!-- /build -->

Any ideas n how I can fix this please - either my code or my understanding? Thank you.


Solution

  • This is because the Grunt target build:prod does not exist.

    You have defined a build target, but you are calling a prod target. Grunt does not know such target and thus does nothing. The part that you put after processhtml:build (i.e. processhtml:build:prod) must correspond to a Grunt target.

    processhtml:
      options: strip: true
      prod: # <- note this target!
        files: 'www/index.html': ['app/index.html']
    

    If there are situations where the target is not provided (by user, etc.) make sure you have a default one (or take into account that all targets will be executed).

    I think the main confusion you are experiencing is that this Grunt task works a bit differently than other Grunt tasks - normally, whatever is specified after the first colon after the task's name is mapped to a task's target. However, it seems that grunt-processhtml utilises this information internally and moves the actual target specification after the second colon.

    Take a look at detailed examples for grunt-processhtml tasks, I am sure you will discover the relation I am trying to describe above.