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.

Answer 2

If you prefer to keep socket.io scripts in the original source you can also remove these scripts, vulcanise then inject the scripts back in as @Torcellite suggests. I use start and end comments to mark out this block in HTML.

HTML

<!-- gulp:remove -->
<script src="/socket.io/socket.io.js"></script>
<!-- gulp:endremove -->

gulp.task

  // 1 - remove server scripts for vulcanization
  var start_comment = "gulp:remove",
      end_comment = "gulp:endremove",
      pattern = new RegExp("(\\<!--\\s" + start_comment + "\\s--\\>)(.*\\n)*(\\<!--\\s" + end_comment + "\\s--\\>)", "g");
  .pipe(require('gulp-tap')(function(file) {
      file.contents = new Buffer(String(file.contents).replace(pattern, ""));
  }))
  // 2 - pipe vulcanize...
  // 3 - pipe injectString back in...