How to get gulp-vulcanize to ignore socket.io.js?

Question

One of my .html files imports /socket.io/socket.io.js, I want to vulcanize this file but ignore the script tag that imports socket.io

I wrote the following gulp task:

// vulcanize HTML files
var vulcanizeHtmlSrc = 'views/**/*.html',
    vulcanizeHtmlDst = 'build/views';
gulp.task('vulcanize', function() {
gulp.src(vulcanizeHtmlSrc)
    .pipe(vulcanize({
        excludes: ['//fonts.googleapis.com/*', '/socket.io/socket.io.js'],
        stripExcludes: false
    }))
    .pipe(gulp.dest(vulcanizeHtmlDst));    
});

I still get the following error:

ERROR finding /socket.io/socket.io.js

What am I doing wrong?

Answer 1

// vulcanize HTML files
var vulcanizeHtmlSrc = 'views/**/*.html',
vulcanizeHtmlDst = 'build/views';
gulp.task('vulcanize', function() {
gulp.src(vulcanizeHtmlSrc)
    .pipe(vulcanize({
        excludes: ['//fonts.googleapis.com/*',
            './bower_components/polymer/polymer.html'
        ],
        stripExcludes: false,
        inlineScripts: true,
        inlineCss: true,
        implicitStrip: true,
        stripComments: true
    }))
    // pipe to injectString to add script tags that cause an issue with vulcanize
    // e.g. <script src="/socket.io/socket.io.js">
    // Error caused if the script is added in index.html itself
    // ERROR finding /socket.io/socket.io.js
    .pipe(injectString.before('<script class="usesSocket.io">', '<script src="/socket.io/socket.io.js"></script>\n'))
    .pipe(gulp.dest(vulcanizeHtmlDst));
});

Just add a class to the script tag that requires socket.io.js and insert socket.io.js using the gulp-inject-string module after vulcanize. This is a bit hacky. Either way vulcanize still causes a lot of errors and I recommend people eschew Polymer (if the app being developed is up for production) until it is fully stable and has better documentation.