It appears that inline for stylesheets is completely broken currently, however I'm hoping I'm just missing something.

My config is setup like this:

vulcanize: {
    default: {
        options: {
           csp: true,
           inline: true 
       },
       files: {
           src/vulcanized.html: ['src/index.html']
       }
  }
}

Then my index file imports a custom element with an external link to a stylesheet as well as a js script. The js script works exactly as I'd expect, the script tag gets removed from the custom element and outputted to vulcanized.js referenced by the vulcanized.html file. However the stylesheet isn't touched at all.

this line https://github.com/Polymer/grunt-vulcanize/blob/de2f27e1be8287d264977b4d743328d02e6ae5b7/tasks/vulcanize.js#L56 calls done() when the current file has finished processing. That is, it signals the end of the task on the first file. This causes problems in my Gruntfile. I think this call should be done when all the files have finished.

With grunt-vulcanize v1.0.0, not sure what did I do wrong but I found a very strange behavior when trying to vulcanize index.html that resides in subdirectory.

Let says I have following project structure:-

\- node_modules
\- web
|    \- libs
|    \- index.html
\- Gruntfile.js
\- package.json

And I want to vulcanize web/index.html hence in Gruntfile.js I have configuration as follows:-

vulcanize: {
    dist: {
        options: {
            abspath: 'web/'
        },
        files: {
            'build.html': 'index.html'
        }
    }
}

When run grunt vulcanize --debug --stack I got

Running "vulcanize:dist" (vulcanize) task
[D] Task source: O:\p\test-grunt-vulcanize\node_modules\grunt-vulcanize\tasks\vulcanize.js
Warning: Arguments to path.resolve must be strings Use --force to continue.
TypeError: Arguments to path.resolve must be strings
    at Object.posix.resolve (path.js:439:13)
    at Object.process (O:\p\test-grunt-vulcanize\node_modules\grunt-vulcanize\node_modules\vulcanize\lib\vulcan.js:334:28)
    at O:\p\test-grunt-vulcanize\node_modules\grunt-vulcanize\tasks\vulcanize.js:60:14
    at Array.forEach (native)
    at Object.<anonymous> (O:\p\test-grunt-vulcanize\node_modules\grunt-vulcanize\tasks\vulcanize.js:45:16)
    at Object.<anonymous> (O:\p\test-grunt-vulcanize\node_modules\grunt\lib\grunt\task.js:264:15)
    at Object.thisTask.fn (O:\p\test-grunt-vulcanize\node_modules\grunt\lib\grunt\task.js:82:16)
    at Object.<anonymous> (O:\p\test-grunt-vulcanize\node_modules\grunt\lib\util\task.js:301:30)
    at Task.runTaskFn (O:\p\test-grunt-vulcanize\node_modules\grunt\lib\util\task.js:251:24)
    at Task.<anonymous> (O:\p\test-grunt-vulcanize\node_modules\grunt\lib\util\task.js:300:12)

This problem doesn't occur when using vulcanize tool directly i.e.

$ vulcanize --abspath web/ index.html > build.html

seems to work correclty.

What's driving me nut is if in the project's root directory I do have any file with the same name index.html, grunt vulcanize will work mystically!

PS. I pushed the sample source code that can reproduce this problem to https://github.com/onelaview/test-grunt-vulcanize. Just run npm install and grunt vulcanize to see the error.

Hey,

I have a simple app running vulcanize with grunt, which is building various bundles of components. The config looks a bit like this:

vulcanize: {
        default: {
            options: {
                excludes: {
                    imports: [
                        'polymer.html'
                    ]
                },
                'strip-excludes': false,
                inline: true,
                strip: true
            },
            files: {
                'build_target_1.html': 'bundle_1.html',
                'build_target_2.html': 'bundle_2.html',
                'build_target_3.html': 'bundle_3.html',
                                    ...
            }
        },
    },

Which is starting to get a bit tedious to list them all.

Is it possible to add functionality seen in many Grunt plugins to accept an array of source files, using glob notation, and a destination folder, that would look a bit like this:

files: {
    cwd: './'
    src: ['/path/to/bundles/*.html],
    dest: 'dist'
}

Thanks.

Also need a new release

Would it be possible and wanted to add an option to extract inline style blocks and concat them into an external build.css file placed in the HEAD?

When running grunt-vulcanize task my HTML files without ,, etc are being modified and these tags are being added by vulcanize, can this behavior be modified?

Thanks,

I am running against some custom written Polymer (1.0) elements, and noticed that the grunt-vulcanize task turned this:

Polymer({
    is: 'my-element',
    properties:{
        ids: Array
    }
});

Into this:

Polymer('my-element', {
    is: 'my-element',
    properties:{
        ids: Array
    }
});

That first argument is expected to be the object which I am trying to pass through. Is this a bug with the grunt task? I am using Polymer 1.0, grunt-vulcanize 0.6.4

<div style="position: relative">
becomes
<div style="position:%20relative">

Problem found in both 0.6.2 and 0.6.3, unless, of course, I'm missing some option introduced in these versions.

The current grunt code samples in readme aren't working. Since vulcanize is registered as multitask, it needs a "default" task name:

grunt.initConfig({
vulcanize: {
default: {
options: {},
files: {
'build.html': ['index.html']
},
}
},
})

I´m not entirely sure if this an issue that belongs to grunt-vulcanize project, but I'm having a problem when the vulcanization origin file contains a src attribute that is resolved by a web component.
I've created a Question in SO with more details.
http://stackoverflow.com/questions/31158876/vulcanizing-polymer-one-time-bind-src-attribute

0.1.10 introduced a whitespace removal strategy that broke the grunt-vulcanize tests.

Hi - I'm not sure whether it's related to that issue https://github.com/Polymer/vulcanize/issues/53, but grunt-vulcanize breaks the css below where #mask is the id of an inline SVG:

  .mydiv {
    mask: url(#mask);
  }

and replaces it with:

.mydiv {
mask: url(my-polymer/#mask)
}

See https://github.com/Polymer/vulcanize/issues/297.

Would love to have some sort of quick fix from this library that downgrades vulcanize temporarily. This is causing our builds to fail Nvm, just found out about npm shrinkwrap, thanks @nelsonsilva

Like from the npm vulcanize package:
vulcanize --help
vulcanize: Concatenate a set of Web Components into one file

Usage:
vulcanize [OPTIONS] *

Options:
--output, -o: Output file name (defaults to vulcanized.html)

With grunt-vulcanize version 1.0.0, simply configure vulcanize grunt task with inlineScripts true, like this:-

vulcanize: {
    default: {
        options: {
            inlineScripts: true
        },
        files: {
            'build.html': 'index.html'
        }
    }
}

and in the index.html just have a <script> tag.

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</head>
<body>

</body>
</html>

When run grunt vulcanize, I simply got ENOENT error showing "null" in the path...

Running "vulcanize:default" (vulcanize) task
ERROR finding C:\test-vulcanize\test-vulcanize\null\bower_components\webcomponentsjs\webcomponents-lite.min.js
Fatal error: ENOENT, open 'C:\test-vulcanize\test-vulcanize\null\bower_components\webcomponentsjs\webcomponents-lite.min.js'

Nevertheless, if I run vulcanize --inline-scripts index.html > bulid.html, all seems working fine.

I've pushed sample source code that producing this error in https://github.com/onelaview/test-vulcanize. Simply run npm install/bower install and grunt vulcanize to see the error.

Hi,

I have worked on using polymer in a chrome packaged app using the Yeoman Chromeapp Generator. It uses 'usemin' blocks in the index.html file, and it would be great if there was an option that would allow the developer to control where the script tags added by vulcanize were added.

In my Gruntfile, I've had to write a 'process' function in a copy task to move the script tags from the bottom into the relevant usemin block - it's an ugly solution, imo, and sure to cause some maintenance issues.

Please consider adding an option allowing the developer to specify where to put the script tags. Perhaps it could be a regex or plain string in a similar way to I have in said Gruntfile :

    usemin: '<!-- build:js scripts/index.js -->' // place script tags inside this usemin block

Thanks,

Max.

My Gruntfile.js works like this :

1. copy all files from app/ to build/
2. run grunt-vulcanize on build/index.html
3. remove build/index.html
4. copy build/index-csp.html to build/index.html
5. remove build/index-csp.html

It's a bit long-winded, but it works.

However, the vulcanize step reads in lots of files into both index-csp.html and index-csp.js. So, while those files are still in build/ somewhere (mostly in build/bower_components/, but also our own polymer elements have been inlined) and so those files are no longer needed.

So, it would be really nice to be able to somehow remove those files so they're not included in the app.

Is it possible that grunt-vulcanize somehow 'output' a list of files to remove, or perhaps have an option to remove any files it inlines?

It sounds plausible, but there are plenty of other files that aren't needed too. Just take the bower_components/paper_button/ directory - I see .bower.json, README.md, bower.json, demo.html, demo2.html, index.html and metadata.html, as well as, paper-button.html. IINM, I still need the css file, so I can't remove that. I noticed a closed issue that talked about concatenating those - that's not possible, but it is possible to add each individual css back into its corresponding html file, I presume, which might mean we can remove the whole bower_components/paper-button/ directory after running vulcanize. I do see the 'inline' option but that also does script - perhaps there could be an option for just style.

Anyway, I'm not sure what the 'correct' solution is to this problem. Perhaps there's a better way of building which avoids the problem to begin with.

Thoughts?

If I include a fat arrow grunt vulcanize fails silently (no elements.vulcanized.html is generated even though grunt reports no errors), however using the vulcanize cli works and builds the same files.

can you do a better documentation?? i did everything you said in the doc but nothing happens...

this is my index.html

<!DOCTYPE html><html><head>
        <link href="/bower/core-icon/core-icon.html" rel="import">
        <link href="/bower/core-icons/core-icons.html" rel="import">
        <link href="/bower/paper-button/paper-button.html" rel="import">
        <link href="/bower/paper-dialog/paper-dialog.html" rel="import">
        <link href="/bower/paper-dialog/paper-dialog-transition.html" rel="import">
        <link href="/bower/paper-input/paper-input.html" rel="import">
    </head>
    <body>

</body></html>

and the build file looks exactly the same!!! :/