add suport for block replacement for custom block types

[mcampo]

Be able to define custom block replacement logic for custom block types (types other than 'css' and 'js').

We can have a "less" block type and define a flow for it and configure the "less" task properly. The resulting css file is generated and placed in the correct dest directory.

But blocks with type other that "css" or "js" won't be correctly "summarized" in the html. I get "undefined" instead of the proper "link" tag referencing the output file.

Main motivation in my case is to be able to define a block for .less files, call less processor in a custom flow (already possible) and have the resulting css file included in a single 'link' tag. This PR addresses the last part.

With this PR, you can have:

This block in your html

<!-- build:less styles/main.css -->
<link rel="stylesheet/less" href="styles/main.less">
<link rel="stylesheet/less" href="styles/home.less">
...
<!-- endbuild -->

this configuration:

    useminPrepare: {
      html: 'index.html',
      options: {
        dest: 'dist',
        flow: { 
            steps: { 
                'js': ['concat', 'uglifyjs'], 
                'css': ['concat', 'cssmin'],
                'less': [{
                    name: 'less',
                    createConfig: lessCreateConfig
                }]
            },
            post: {}
        }
      }
    },

    usemin: {
      html: ['dist/index.html'],
      options: {
        blockReplacements: {
            less: function (block) {
                return '<link rel="stylesheet" href="' + block.dest + '" />';
            }
        }
      }
    }

and have this result:

<link rel="stylesheet" href="styles/main.css">

If this works out for you, I can help updating the docs too.

What do you think?

[jaymes-bearden]

This is awesome! It would also be incredibly helpful if we had the ability to modify the other default types.

For example, I use grunt to modify Velocity template files which are then processed server side. It would be great if I could alter how the link / script href's get output to include other things such as ${request.contextPath} -- ex: link href="${request.contextPath}/resources/css/site.d39064.css" type="text/css"

[mcampo]

You can override replacement functions for default block types the same way you add new block types

Defaults are defined like this:

var defaultBlockReplacements = {
  'css': function (block) {
    var media = block.media ? ' media="' + block.media + '"' : '';
    return '<link rel="stylesheet" href="' + block.dest + '"' + media + '/>';
  },
  'js': function (block) {
    var defer = block.defer ? 'defer ' : '',
        async = block.async ? 'async ' : '';
    return '<script ' + defer + async + 'src="' + block.dest + '"><\/script>';
  }
};

So, to override then you could do this on your Gruntfile:

    usemin: {
      html: ['dist/index.html'],
      options: {
        blockReplacements: {
          'css': function (block) {
            var media = block.media ? ' media="' + block.media + '"' : '';
            return '<link rel="stylesheet" href="${request.contextPath}/' + block.dest + '"' + media + '/>';
          },
          'js': function (block) {
            var defer = block.defer ? 'defer ' : '',
                async = block.async ? 'async ' : '';
            return '<script ' + defer + async + 'src="${request.contextPath}/' + block.dest + '"><\/script>';
          }
        }
      }
    }

Hope this helps :)

[jaymes-bearden]

This is so insanely helpful! I hope the devs accept this merge request soon!

[eirslett]

Yes Please!!!! +++++ 👍

[futurechan]

+1

[futurechan]

@mcampo I would really like to use this immediately. Since there are merge conflicts, how can I fork your fork and merge yeoman's into yours?

[mcampo]

@futurechan I just did a rebase to master and resolved the merge conflict, enjoy 😄

[mcampo]

@sindresorhus @XhmikosR do you think this could be useful?

Seems to be some interest in this, and I know I don't to be rebasing all the time for getting updates :)

What do you think?

[XhmikosR]

I can see how this can be useful, indeed. From a quick look, it looks good to me. But I'd definitely want someone else's opinion too before merging this.

/CC @yeoman/yeoman-contributors

[sindresorhus]

Need some docs, but other than that 👍

[mcampo]

Cool, I'll add some docs then

[mcampo]

I documented this change on the readme file, @sindresorhus let me know if there's anything else that should be there before merging.

[sindresorhus]

two space is linebreak in markdown

[sindresorhus]

@mcampo Awesome work on this!

Would you be interested in helping out more? We would be happy to add you to the repo if so. No worries if not :) #313

[mcampo]

@sindresorhus Thanks! I made the requested changes. I left them in a separate commit, let me know if you want me to squash it.

I can't commit to weekly reviews, but I'll be happy to help however I can :)

[sindresorhus]

Thanks :)

I can't commit to weekly reviews, but I'll be happy to help however I can :)

No commitment required.