Usemin Explanation

[adiakritos]

From what I understand, the Usemin task is supposed to transform the files referenced between the html comment tags, and replace those with a new file that's been transformed with the predefined steps.

So for example.. If I have the following in my index.html file:

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->

and the configuration file has the destination in the /dist file, as the config file says here:

useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>',     <---------- destination
    flow: {
      html: {
        steps: {
          js: ['concat', 'uglify'],
          css: ['cssmin']
        },
        post: {}
      }
    }
  }
},

Then why don't I see the transformed file created and referenced to from within the html file?

I'd expect something like this to be dynamically generated:

   /dist

   -- /styles/styles.css

   -- /scripts/scripts.js

   -- index.html

and within the /dist/index.html I expected to see something like this:

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/scripts.js"></script>
<!-- endbuild -->

Yet, that's not what I see.

In the config file it states the following about what userminPrepare does:

// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them

The 2nd sentence implies that I actually shouldn't expect to see what I described just now, but then my question becomes.. when I serve this /dist file from a service like S3 or wherever, how does the browser know where to fetch those files if they're not being included in a /scripts/ file in their default form?

Do I run a different grunt task that I'm not aware of?

[adiakritos]

#1320