2

I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.

In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:

<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...

And then for production or staging I would like to have grunt output:

<script src="js/all-files-in-one.js"></script>

How to achieve this the simplest way?

lorem monkey
  • 3,942
  • 3
  • 35
  • 49
  • Possibly related: [Have Grunt generate index.html for different setups](http://stackoverflow.com/questions/12401998); lots of good/similar examples there. – mhulse Jul 21 '14 at 21:09

1 Answers1

1

You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.

Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.

<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->

<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->

Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:

<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>

The example and docs explain how you can configure this and use it for other assets, like css.

chazzlabs
  • 113
  • 2
  • 12