Gulp：如何在生产中设置不同的基础href

Question

i'm a newbie on Gulp (and maybe my question is stupid).

On development i work with a gulp serve on localhost and root folder, eg:

http://localhost:3000/

but on production i want move my app on a folder, eg.:

http://localhost:3000/my-app/

the problem is change in the index.html, the dev "base href" from:

<base href="/">

to the prod :

<base href="/my-app/">

can i change my base href with a conditional html comment? eg.:

<!-- build:dev -->
<base href="/">
<!-- endbuild -->
<!-- build:prod -->
<base href="/my-app/">
<!-- endbuild -->

Any other tips is very appreciated!

I have found this tip:

return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
        .pipe(replace('<base href="/">', '<base href="/my-app/">'))

Answer 1

I had the same problem myself. I wrote this task:

import gulp        from 'gulp';
import replace     from 'gulp-replace';

gulp.task('inject-base-href', function() {
   return gulp.src('path/to/your/html/file')
              .pipe(replace('<base href="/">', function(match) {
                  console.log('Replace called on', match);
                  return'<base href="/your-correct-href-path/">'
                    }
               ))
              .pipe(gulp.dest('path/to/your/build/folder'));
            });

and

npm install --save-dev gulp-replace

and queued the task in production tasks.