How do I get gulp-vulcanize to ignore socket.io.js?
One of my files is .html
importing /socket.io/socket.io.js
, I want to vulcanize this file but ignore the script tag that socket.io imports
I wrote the following problem gulp
:
// 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 am still getting the following error:
ERROR finding /socket.io/socket.io.js
What am I doing wrong?
source to share
// 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 in the tag script
, which requires socket.io.js
, and insert socket.io.js
with the module gulp-inject-string
after vulcanization. It's a little hacky. Vulcanization still causes a lot of bugs anyway, and I recommend people avoid Polymer (if the application is being developed for production) until it is completely stable and has better documentation.
source to share
If you'd rather keep the socket.io scripts in your original source, you can also delete those scripts, vulcanize, and then paste the scripts back in, as @Torcellite suggests. I am using start and end comments to highlight 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...
source to share