grunt usemin concat js file and image file together

[JackZhang1988]

i write my js file in script tag, and generate some img with js, the code is like this:

certStr += '<img src="http://logintest2.koudai.com/vshop/1/H5/images/index/daigou.png?v=1.0.0" />');

cerStr will append to some html dom.

i want to use grunt-usemin to concat and uglily my js files.
i write the html build comment like this:

<!-- build:js <%-staticBase%>/script/index/index.js<%-version%> -->
<script src="<%- staticBase %>/script/common/base_H5.js<%- version %>"></script>
<script>
//my script content
</script>
<!-- endbuild -->

and my usemin grunt config is :

useminPrepare: {
    options: {
        dest: '<%= config.base %>'
    },
    // for test 
    html: '<%= config.src %>/index.html'
},
usemin: {
    options: {
        assetsDir: [
            '<%= config.base %>/script',
            '<%= config.base %>/css'
        ]
    },
    css: '<%= config.base %>/css/**/*.css ',
    js: '<%= config.base %>/script/**/*.js ',
    html: '<%= config.base %>/index.html'
}

but i found that usemin concat the js file and image file together!!!

there is lots of messy code in the concat js file:

the verbose output is :

    concat:
  { generated:
   { files:
      [ { dest: '.tmp/concat//css/index/index.css',
          src:
           [ 'H5//css/common/base.css',
             'H5//css/index/index.css',
             'H5//css/common/itemListTemplate.css' ] },
        { dest: '.tmp/concat//script/index/index.js',
          src:
           [ 'H5//script/common/base_H5.js',
             'H5//images/index/guanfang.png',
             'H5//images/index/daigou.png',
             'H5//images/index/cert_danbao_icon.png',
             'H5//images/index/cert_shunfeng_icon.png',
             'H5//images/index/cert_7day_icon.png',
             'H5//images/index/bond_seller.png',
             'H5//images/index/liutao_icon.png',
             'H5//images/index/cert_taobao_icon.png',
             'H5/tel:4008933557' ] } ] } }

how could this happen? Does anyone know how to fix this problem?

[arthurvr]

There's an image tag, in a string, in the inline <script> tag, or am I understanding you wrong? If there is, our regexp takes that and concats the file :( Seems like this is another hard part of using regexps to parse HTML :( Hopefully somebody will be able to work on #244 soon.

In the meanwhile, a workaround would be to do something like this (in your inline script):

certStr += '>img src="http://logintest2.koudai.com/vshop/1/H5/images/index/daigou.png?v=1.0.0" />';

But that's a messy fix. Once again, let's hope somebody has the time to work on #244 soon.

[stephanebachelier]

@arthurvr thanks for referencing all issues related to HTML parsing. This really helps.

[stephanebachelier]

@JackZhang1988 There is something that I don't understand is why you have a <%= version %> after the url:

<!-- build:js <%-staticBase%>/script/index/index.js<%-version%> -->
<script src="<%- staticBase %>/script/common/base_H5.js<%- version %>"></script>
<script>

I don't know you workflow, but couldn't you use filerev which will tokenize all your asset with a version token. By the way <%- staticBase %> could also be removed and using something like grunt-cdnify could also really helps you.

Waiting for your answer.

[stephanebachelier]

Closing for lack of reponse. see comment in #512.