modify the path of the gulp.src()

[connor11528]

Hi there, I'm trying to use this package with gulp-inject to add script tags from public/bower_components to public/index.html

I have this gulpfile:

var gulp = require('gulp'),
    bowerFiles = require('gulp-bower-files'),
    inject = require('gulp-inject')

gulp.task('default', function(){
    // get main bower files
    var files = bowerFiles()

    gulp.src('./public/index.html')
        // inject into index.html
        .pipe(inject(files, { read: false }))
        .pipe(gulp.dest("./public"))
})

This injects the files but with the wrong script path:

<script src="/public/bower_components/angular/angular.js"></script>
<script src="/public/bower_components/angular-ui-router/release/angular-ui-router.js"></script>

I'd like the path to be src="bower_components/angular/angular.js. How do I specify what the path looks like?

[ck86]

Hi @jasonshark, I've tried to reproduce it, but my result is:

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>

To resolve this problem, you can rewrite the result by the transform option of gulp-inject:

var gulp = require('gulp'),
    bowerFiles = require('gulp-bower-files'),
    inject = require('gulp-inject'),
    util = require('util')

gulp.task('default', function(){
    // get main bower files
    var files = bowerFiles()

    gulp.src('./public/index.html')
        // inject into index.html
        .pipe(inject(files, {
            read: false,
            transform: function(filepath) {
                filepath = filepath.replace(/^\/public/, '');
                return util.format('<script type="text/javascript" src="%s"></script>', filepath);
            }
        }))
        .pipe(gulp.dest("./public"))
})

Hope it will help you.

[ck86]

A better solution might be to use the ignorePath option of gulp-inject:

gulp.task('default', function(){
    // get main bower files
    var files = bowerFiles()

    gulp.src('index.html', { cwd: './public' })
        // inject into index.html
        .pipe(inject(files, {
            read: false,
            ignorePath: '/public'
        }))
        .pipe(gulp.dest("./public"))
})

[connor11528]

second solution works perfectly!