Tools: how to use 'redirects'?

[markhuang1212]

ERROR finding /markdown-editor/app/bower_components/polymer/polymer.html

the file is actually in /markdown-editor/bower_components/polymer/polymer.html

what should i do to let it redirect app/bower_components to bower_components?

thanks a lot

[mattyclarkson]

Folder structure:

.
├── bower_components
│   ├── font-roboto
│   ├── iron-flex-layout
│   ├── paper-styles
│   ├── polymer
│   └── webcomponentsjs
└── src
    ├── tango-palette.html
    └── vca-theme.html

gulp.task('build', () => {
  const redirects = fs.readdirSync('bower_components').filter(file => {
    return fs.statSync(path.join('bower_components', file)).isDirectory();
  }).map(folder => `${__dirname}/${folder}|${__dirname}/bower_components/${folder}`);

  return gulp.src('src/vca-theme.html')
    .pipe($.vulcanize({
      stripComments: true,
      inlineCss: true,
      inlineScripts: true,
      redirects: [
        `${__dirname}/polymer|${__dirname}/bower_components/polymer`,
        `${__dirname}/paper-styles|${__dirname}/bower_components/paper-styles/`
      ]
    }))
    .pipe(gulp.dest('dist'));
});

[klebba]

@mattyclarkson Can you provide a vanilla (non-gulp) example? I don't see how the const redirects are even used in this code, and I still havent figured out how to use redirects -- the documentation says the first component before | needs to be a URI but you example doesn't indicate this. Too confusing

[klebba]

Here's what I wound up with

var Vulcanize = require('vulcanize');
var crisper = require('crisper');
var fs = require('fs');
var path = require('path');

const target = 'demo/index.html';

const redirects = fs.readdirSync('bower_components').filter(file => {
    return fs.statSync(path.join('bower_components', file)).isDirectory();
}).map(folder => `/${folder}/|/bower_components/${folder}/`);

var vulcan = new Vulcanize({
    abspath: './',
    inlineScripts: true,
    inlineCss: true,
    stripComments: true,
    redirects: redirects,
});

vulcan.process(target, (err, html) => {
    if (err) {
        // error
    } else {
        var output = crisper({
            source: html,
            jsFileName: 'build.js',
        });
        fs.writeFile('app/build.html', output.html, 'utf-8');
        fs.writeFile('app/build.js', output.js, 'utf-8');
    }
});

[deltaepsilon]

This also works fine:

gulp.task('vulcanize', function(done) {
  gulp.src('app/index.html')
    .pipe(vulcanize({
      abspath: '',
      excludes: [],
      redirects: [
        '/bower_components|./bower_components',
        '/elements|./app/elements',
        '/styles|./app/styles',
      ],
      stripExcludes: false
    }))
    .pipe(gulp.dest('dist'));
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.