Usemin + jade usemin pattern?

[andrewboni]

I've been trying to get usemin working with .jade files. I have it close, but not all the way there.

I'm using a plugin called usemin-patterns to get usemin to work with .jade, but it's not working properly. After running these targets:

    useminPrepare:
      html: ["_layout.jade"]
    usemin:
      jade: "_layout.jade"
      options:
        assetsDirs: ["public"]
        patterns:
          jade: require('usemin-patterns').jade

...where the .jade patterns are defined as:

 jade: [[
        /src=['"]([^"']+\.(?:png|gif|jpe?g|css|js))["']/img,
        'Update the Jade with src attributes'
    ], [
        /href=['"]([^"']+\.(?:png|gif|jpe?g|css|js))["']/img,
        'Update the Jade with href attributes'
    ], [
        /url\(\s*['"]?([^"'\)]+)["']?\s*\)/img,
        'Update the Jade with background imgs, case there is some inline style'
    ]]

The issue is that it's turning this:

    //-<!-- build:js(./) build/styles/compiled/main.min.js -->
    script(src="scripts/main.js")
    //-<!-- endbuild -->

into this:

    <script src="build/styles/compiled/main.min.js"></script>

Notice that the output is HTML- this means that my .jade file ends up looking like this:

...
    script(src="scripts/073b9b69.angular-scroll.min.js")
    script(src="scripts/88bfdddd.jquery.onepage-scroll.js")
    <script src="build/styles/compiled/main.min.js"></script>
...

Notice how the grunt-usemin task skips right over the HTML syntax for things like versioning (with grunt-rev).

Any thoughts on how I can get usemin and/or usemin-patterns to inject valid .jade syntax into the file? Thanks!
Similar SO thread for reference

[andrewboni]

Terminal output also shows no issues:

...
Running "useminPrepare:html" (useminPrepare) task
Going through .tmp/public/_layout.jade to update the config
Looking for build script HTML comment blocks

Configuration is now:

  concat: {...}
  uglify: {...}
  cssmin: {...}

Running "usemin:jade" (usemin) task

Processing as JADE - .tmp/public/_layout.jade
Update the Jade with src attributes
Update the Jade with href attributes
Update the Jade with background imgs, case there is some inline style

Done, without errors.

Process finished with exit code 0

[andrewboni]

I think I may have figured it out-

Starting on line 96 of fileprocessor.js:

I turned this...

...
  } else if (block.type === 'js') {
    result = block.indent + conditionalStart + '<script src="' + dest + '"><\/script>' + conditionalEnd;
  }
... 

...into this...

...
} else if (block.type === 'js') {
    result = block.indent + conditionalStart + 'script(src="' + dest + '")' + conditionalEnd;
  }
... 

Seems to solve my issue. I might add in a new block.type for .jade CSS and JS syntax- something like cssjade and jsjade.

Would love to hear others thoughts on this. Thanks!

[sindresorhus]

Create your own block type: #337