sindresorhus / gulp-vulcanize Goto Github PK

View Code? Open in Web Editor NEW

100.0 10.0 25.0 29 KB

Concatenate a set of Web Components into one file

License: MIT License

HTML 11.69% JavaScript 88.31%

gulp-plugin nodejs javascript vulcanize concatenate polymer web-components deprecated

gulp-vulcanize's Introduction

Deprecated

The Vulcanize project is no more.

gulp-vulcanize

Concatenate a set of Web Components into one file with Vulcanize

Issues with the output should be reported on the Vulcanize issue tracker.

Install

$ npm install --save-dev gulp-vulcanize

Usage

const gulp = require('gulp');
const vulcanize = require('gulp-vulcanize');

gulp.task('default', () =>
	gulp.src('src/index.html')
		.pipe(vulcanize({
			abspath: '',
			excludes: [],
			stripExcludes: false
		}))
		.pipe(gulp.dest('dest'))
);

API

vulcanize([options])

See the Vulcanize options.

License

MIT © Sindre Sorhus

gulp-vulcanize's People

Contributors

Stargazers

Watchers

gulp-vulcanize's Issues

gulp-vulcanize not working in gulp but works in global (command line)

gulp-vulcanize generated this

<html><head><meta charset="UTF-8"></head><body></body></html>

I did not receive any error

when I run the command in command line vulcanize dist/mr-ml.local.html. It works correctly.

gulp.js

gulp.task('html', ['copy','js'], function () {
  gulp.src('dist/mr-ml.local.html')
    .pipe($.vulcanize({
      abspath: '',
      excludes: [],
      stripExcludes: false
    }))
    .pipe($.rename('mr-ml.html'))
    .pipe(gulp.dest('dist'))
    .on("error", function (err) { console.log("Error: " + err.message); })
})

gulpplugin

It's currently just gulpfriendly since Vulcanize wants to handle IO.

Should be easy when this is fixed: https://github.com/Polymer/vulcanize/issues/7

output option is overwritten with input filename

The 'output' option is being overwritten by the input filename. It just needs to check make sure that there is not already an output option before it defaults to the input filename.

abspath error

gulp-vulcanize does not seem to pick up the abspath option. It works fine when using vulcanize directly on command line.

gulp.task('vulcanize', ['html:elements'], function (done) {

  /**
   * gulp-vulcanize does not work as expected!
   */

  // return gulp.src('./dist/assets/elements/x-app/all-imports.html')
  //   .pipe(plug.vulcanize({
  //     abspath: __dirname
  //   }))
  //   .pipe(plug.concat('x-app.vulcanized.html'))
  //   .pipe(gulp.dest('./dist/assets/bundle'));


  /**
   * same thing using command-line does work
   */

  var output = [],
      child = spawn(
        './node_modules/gulp-vulcanize/node_modules/.bin/vulcanize',
        [ '--abspath', '.', 'dist/assets/elements/x-app/all-imports.html' ],
        { cwd: __dirname }
      );

  child.stdout.on('data', function (b) {
    output.push(b);
  });

  child.on('close', function() {
    var filename = __dirname + '/dist/assets/bundle/x-app.vulcanized.html';
    mkdirp(path.dirname(filename), function() {
      fs.writeFile(filename, Buffer.concat(output), done);
    });
  });

});

all-imports.html contains both relative and absolute imports. Eg:

<link rel="import" href="./x-app.html">
<link rel="import" href="/bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../lorem-ipsum/lorem-ipsum.html">

readme update

This did not do what I thought it would do :) Luckily for me I had a backup index.html. Please consider adding a few lines to the readme explaining which file get vulcanised :)

var gulp = require('gulp');
var vulcanize = require('gulp-vulcanize');

gulp.task('default', function() {
  return gulp.src('default/index.html')
    .pipe(vulcanize({dest: 'default', options: {inline: true, strip: true}, files: {'build.html': 'index.html'}}))
    .pipe(gulp.dest('default'));
});

Update version constraint for vulcanize

vulcanize 1.14.7 includes a fix for inlining Firebase's minimized JS. gulp-vulcanize should already be picking it up for fresh installs, but there are reports that it's not. Can you update the constraint?

output paths should be relative to source paths

Take this directory structure for example:

src/index.html
src/foo/bar.html
src/baz/qux/corge.html

When you have a task like this:

gulp.task('build-vulcanize', function() {
  return gulp.src('src/**/*.html')
    .pipe(vulcanize({
      dest: 'build',
      csp: true,
      inline: false
    }));
});

It puts all output files under the build directory, instead of in their respective folders:

build/index.html
build/bar.html
build/corge.html

Vulcanize breaks when you include a directory (with index file)

With imports you can have a directory and include an index.html file, like this:

<link rel="import" href="elements/elementgroup" />

If that directory contains an index.html, it will load that. Vulcanize breaks on this giving:
Error: EISDIR, illegal operation on a directory

"No resolver found" error on Windows

When using gulp-vulcanize on Windows, file.path is an absolute path like "C:\web...". This results in "no resolver found" error and prevents vulcanize from working correctly.

See Polymer/polymer-starter-kit/issues/62

Concat the Components

Did I get it wrong ?
Correct me if I misunderstood the Vulcanize process. I have this script:

gulp.task('vulcanize', function () {
  return gulp.src('./src/components/**/*.html')
    .pipe(vulcanize(
      {
        inline: true,
        strip: true,
        dest: 'app'
      }))
});

And i thought I could manage to really combine 2 webcomponents into 1 file. But All I get are again 2 files with everything they import in two seperate files.

Am I doing it wrong ?
Btw, thank you for providing this plugin.

--strip-css support

I would like to be able to inline all my CSS in one go....

gulp-vulcanize does not run, vulcanize does

Using the new Polymer 1.0 gulp-vulcanize loads but does not complete. However, vulcanize stand alone does.

code:

    gulp.task('vulc', function () {
      return gulp.src('./test-ui/window.html')
        .pipe(vulcanize({
          abspath: '',
          excludes: [],
          stripExcludes: false
        }))
        .pipe(rte('build:ext'))
        .pipe(gulp.dest('./test-ui/'));
    });

output:

gulp vulc
[10:30:19] Using gulpfile .\gulpfile.js
[10:30:19] Starting 'vulc'...
{does not continue}

Debug

There is a way to debug the vulcanization task? I'm getting no feedback, and there is no elements at the distribution, my project is based on polymer-starter-kit

...
[23:45:39] html all files 90.01 kB
[23:45:39] Finished 'html' after 2.85 s
[23:45:39] Starting 'vulcanize'...

Double quotes causes vulcanize to silently fail

If an element has html that contains a two double quotes, vulcanize will silently fail (no error thrown):

<div class="layout horizontal"">

"web components: multiple" test failing, but "single" test passing

Installed from latest git repo

The plugin wasn't running properly for me so I tried running the tests:

Gulp would not indicate that the task completed, and no output would be created.

I tried first the existing code and then bumped up the timeout to 10s and it still failed:

$ node --version
v0.12.0

$ npm test

> [email protected] test gulp-vulcanize
> mocha



  should vulcanize web components:
    √ single (38ms)
    1) multiple


  1 passing (10s)
  1 failing

  1) should vulcanize web components: multiple:
     Error: timeout of 10000ms exceeded. Ensure the done() callback is being called in this test.




npm ERR! Test failed.  See above for more details.

$ npm list                                                                                     
[email protected] C:\Users\Sean\p\gulp-vulcanize                                            
├─┬ [email protected]                                                                            
│ ├── [email protected]                                                                       
│ ├── [email protected]                                                                         
│ ├── [email protected]                                                                             
│ ├─┬ [email protected]                                                                              
│ │ ├── [email protected]                                                                      
│ │ ├── [email protected]                                                             
│ │ ├─┬ [email protected]                                                                         
│ │ │ ├── [email protected]                                                                     
│ │ │ └── [email protected]                                                                      
│ │ ├─┬ [email protected]                                                                       
│ │ │ └── [email protected]                                                                     
│ │ └── [email protected]                                                                   
│ ├─┬ [email protected]                                                                        
│ │ ├── [email protected]                                                                        
│ │ └─┬ [email protected]                                                                             
│ │   ├─┬ [email protected]                                                                 
│ │   │ ├── [email protected]                                                                    
│ │   │ └── [email protected]                                                                      
│ │   └─┬ [email protected]                                                                  
│ │     └─┬ [email protected]                                                                    
│ │       └── [email protected]                                                                  
│ ├── [email protected]                                                                   
│ ├── [email protected]                                                                 
│ ├── [email protected]                                                              
│ ├─┬ [email protected]                                                                    
│ │ ├── [email protected]                                                                 
│ │ ├── [email protected]                                                             
│ │ ├── [email protected]                                                               
│ │ ├── [email protected]                                                           
│ │ ├── [email protected]                                                                    
│ │ ├── [email protected]                                                                  
│ │ ├─┬ [email protected]                                                                      
│ │ │ ├── [email protected]                                                             
│ │ │ └── [email protected]                                                                 
│ │ ├── [email protected]                                                                 
│ │ └── [email protected]                                                          
│ ├── [email protected]                                                                           
│ ├─┬ [email protected]                                                                          
│ │ └─┬ [email protected]                                                                        
│ │   └─┬ [email protected]                                                               
│ │     ├── [email protected]                                                                 
│ │     ├── [email protected]                                                                     
│ │     ├── [email protected]                                                                      
│ │     └── [email protected]                                                             
│ ├── [email protected]                                                                      
│ ├── [email protected]                                                                        
│ └─┬ [email protected]                                                                              
│   ├── [email protected]                                                                            
│   └── [email protected]                                                                      
├─┬ [email protected]                                                                               
│ └── [email protected]                                                                           
├─┬ [email protected]                                                                                
│ ├── [email protected]                                                                          
│ ├─┬ [email protected]                                                                              
│ │ └── [email protected]                                                                               
│ ├── [email protected]                                                                               
│ ├── [email protected]                                                               
│ ├─┬ [email protected]                                                                               
│ │ ├── [email protected]                                                                      
│ │ ├── [email protected]                                                                         
│ │ └─┬ [email protected]                                                                       
│ │   ├── [email protected]                                                                      
│ │   └── [email protected]                                                                        
│ ├── [email protected]                                                                              
│ ├─┬ [email protected]                                                                              
│ │ ├── [email protected]                                                                        
│ │ └── [email protected]                                                                           
│ └── [email protected]                                                                     
├─┬ [email protected]                                                                               
│ └─┬ [email protected]                                                                               
│   ├─┬ [email protected]                                                                         
│   │ └── [email protected]                                                                         
│   ├── [email protected]                                                                         
│   ├─┬ [email protected]                                                                        
│   │ └─┬ [email protected]                                                                
│   │   ├── [email protected]                                                               
│   │   └── [email protected]                                                                   
│   └─┬ [email protected]                                                                             
│     └── [email protected]                                                                         
├─┬ [email protected]                                                                             
│ ├─┬ [email protected]                                                                   
│ │ ├── [email protected]                                                                     
│ │ ├── [email protected]                                                                         
│ │ ├── [email protected]                                                                          
│ │ └── [email protected]                                                                 
│ └── [email protected]                                                                              
└─┬ [email protected]                                                                            
  ├─┬ [email protected]                                                                               
  │ └── [email protected]                                                                           
  ├── [email protected]                                                                        
  ├─┬ [email protected]                                                                         
  │ ├── [email protected]                                                                           
  │ ├── [email protected]                                                                       
  │ └── [email protected]                                                                     
  ├─┬ [email protected]                                                                               
  │ └── [email protected]                                                                           
  └─┬ [email protected]                                                                    
    ├─┬ [email protected]                                                                            
    │ ├── [email protected]                                                                    
    │ ├── [email protected]                                                           
    │ ├─┬ [email protected]                                                                       
    │ │ ├── [email protected]                                                                   
    │ │ └── [email protected]                                                                    
    │ ├─┬ [email protected]                                                                     
    │ │ └── [email protected]                                                                   
    │ └── [email protected]                                                                 
    ├─┬ [email protected]                                                                      
    │ ├── [email protected]                                                                    
    │ ├─┬ [email protected]                                                                        
    │ │ ├─┬ [email protected]                                                                     
    │ │ │ ├── [email protected]                                                                     
    │ │ │ └── [email protected]                                                                 
    │ │ └── [email protected]                                                                      
    │ ├── [email protected]                                                                  
    │ ├── [email protected]                                                                          
    │ ├── [email protected]                                                                      
    │ ├── [email protected]                                                                           
    │ └── [email protected]                                                                    
    ├── [email protected]                                                                           
    ├─┬ [email protected]                                                                   
    │ └─┬ [email protected]                                                                   
    │   ├─┬ [email protected]                                                                          
    │   │ ├─┬ [email protected]                                                                  
    │   │ │ ├─┬ [email protected]                                                            
    │   │ │ │ └─┬ [email protected]                                                                   
    │   │ │ │   └── [email protected]                                                               
    │   │ │ └─┬ [email protected]                                                         
    │   │ │   ├── [email protected]                                                           
    │   │ │   ├── [email protected]                                                               
    │   │ │   ├── [email protected]                                                                
    │   │ │   └── [email protected]                                                       
    │   │ ├── [email protected]                                                             
    │   │ ├── [email protected]                                                                  
    │   │ ├── [email protected]                                                             
    │   │ ├── [email protected]                                                        
    │   │ ├── [email protected]                                                              
    │   │ ├── [email protected]                                                               
    │   │ ├─┬ [email protected]                                                            
    │   │ │ └─┬ [email protected]                                                         
    │   │ │   ├── [email protected]                                                           
    │   │ │   ├── [email protected]                                                               
    │   │ │   ├── [email protected]                                                                
    │   │ │   └── [email protected]                                                       
    │   │ ├── [email protected]                                                                   
    │   │ └── [email protected]                                                                  
    │   └─┬ [email protected]                                                                 
    │     └─┬ [email protected]                                                                         
    │       ├── [email protected]                                                             
    │       ├── [email protected]                                                                      
    │       ├── [email protected]                                                                
    │       └── [email protected]                                                      
    ├─┬ [email protected]                                                                      
    │ └── [email protected]                                                                         
    └─┬ [email protected]                                                                    
      └─┬ [email protected]                                                                     
        └── [email protected]

Not possible to vulcanize from a stream

It would be useful (and be according to gulp best practices) if gulp-vulcanize could be supplied the target.html file and all the files required for vulcanization (the target.html would need to be specified as an option to gulp-vulcanize or vulcanize). As far as I understand, vulcanize itself will read the files it needs from the hard drive, so this feature might need some support from vulcanize too.

The task would then look like this:

gulp.task('default', () =>
    gulp.src('src/**/*')
        .pipe(vulcanize({
            target: 'src/index.html',
            abspath: '',
            excludes: [],
            stripExcludes: false
        }))
        .pipe(gulp.dest('dest'))
);

As it stands I need to compile all my .pug files to .html, my TypeScript files to .js, write them to the hard drive, vulcanize the files and then delete the extra files. This use of I/O causes a slower build time etc.

Gulp vulcanize should give a helpful error if "exclude" present rather than "excludes"

It's easy to transition from CLI usage to gulp usage for gulp-vulcanize and miss that the command line flag is renamed from "exclude" to "excludes". Then it fails silently. It would be nice to have a helpful warning in this case.

No output neither errors

const gulp = require('gulp');
const jade = require('gulp-jade');
const vulcanize = require('gulp-vulcanize');

gulp.task('jade', function () {
    return gulp.src('./components/*.jade')
        .pipe(jade())
        .pipe(gulp.dest('build/compiled-jade'));
});

gulp.task('vulcanize', ['jade'], function () {
    return gulp.src('/build/compiled-jade/graduando-quest.html')
        .pipe(vulcanize({
            abspath: '.',
        }))
        .pipe(gulp.dest('build'));
});

gulp.task('default', ['vulcanize']);

the above gulpfile.js ends ok, no error but neither output file.

using vulcanize from command line in the same project works ok.

vulcanize -p $PWD /build/compiled-jade/graduando-quest.html

The gulp output:

[18:21:36] Using gulpfile ~/git/GraduandoQuest/gulpfile.js
[18:21:36] Starting 'jade'...
[18:21:37] Finished 'jade' after 305 ms
[18:21:37] Starting 'vulcanize'...
[18:21:37] Finished 'vulcanize' after 4.66 ms
[18:21:37] Starting 'default'...
[18:21:37] Finished 'default' after 21 μs