CODEWITHSUNDEEP
gruntjsyeoman
markstewie
markstewie

Reputation: 9597

Yeoman & Grunt, how to only include on build

I'm using Yeoman to build an Angular app.

There is a section of JavaScript that I only want included on the page when built (into the dist folder).

Is there some way to tell the grunt tasks that are running the 'grunt server' during development to skip a part of the template and only include it in the build?

Upvotes: 3

Views: 781

Answers (1)

passy
passy

Reputation: 7211

This sounds like a perfect use-case for grunt-processhtml.

It allows you to place certain directives in your HTML. In your case the remove directive could be what you're looking for:

<!-- build:remove -->
<p>This will be removed when any process is done</p>
<!-- /build -->

<!-- build:dist:remove -->
<p>But this one only when doing processhtml:dist</p>
<!-- /build -->

You can of course turn this around and have a snippet that is removed only in server mode. If you configure the task to output the HTML in .tmp/, the connect server would automatically serve the file from there.

You could then add the processhtml task to the task list for your server, e.g.:

grunt.task.run([
  'clean:server',
  'concurrent:server',
  'autoprefixer',
  'processhtml:server',
  'connect:livereload',
  'open',
  'watch'
]);

and to the watch section so later changes also trigger an update of the file:

watch: {
  html: {
    files: ['<%= yeoman.app %>/*.html'],
    tasks: ['processhtml:server']
  }
}

Upvotes: 5

Related Questions