Gulp-inject transform doesn't work

Question

I've tried to setup gulp-inject to inject dependencies into index.html. Everything works fine except transform function. I need to replace part of filepath in the following way: /frontend/src/ --> /static/ I've tried to do it like this (copy-pasted from somewhere):

transform : function ( filePath, file, i, length ) {
                var newPath = filePath.replace('/frontend/src', '');
                console.log('inject script = '+ newPath);
                return '<script src="/static/' + newPath  + '"></script>';
            }

After executing, I have nothing (except standard gulp output) in the console, and un-transformed filepath appears in result file. Looks like my custom transform just doesn't run, and the default transform works instead.

seeing your full gulpfile or task definition might help, the answer from @qcz looks good — A Macdonald, Jan 06 '16 at 11:10

score 6 · Accepted Answer · answered Jan 03 '16 at 20:47

The following is working for me even with multiple levels (/**/*.js instead of /*.js):

gulp.task('inject', function() {
    gulp.src('./test.html')
        .pipe(inject(
            gulp.src(['./Content/js/*.js'], {read: false }),
            {
                transform: function (filePath, file, i, length) {
                    var newPath = filePath.replace('/Content/js/', '');
                    console.log('inject script = '+ newPath);
                    return '<script src="/static/' + newPath  + '"></script>';
                }
            })
        )
        .pipe(gulp.dest('./'));
});

Prayag Verma · Answer 2 · 2016-01-07T18:35:51.027

gulp-inject plugin's transform function works as intended. The configuration of the gulp task is as follows -

gulp.src(path.normalize('./app/index.html'))
    .pipe(inject(
        gulp.src([path.normalize('./frontend/src/*.js')], {read: false}), {
            transform : function ( filePath, file, i, length ) {
               var newPath = filePath.replace(path.normalize('/frontend/src'), '');
               console.log('inject script = '+ newPath);
               return '<script src="/static' + newPath  + '"></script>';
            }
        }
    ))
    .pipe(gulp.dest('./build'));

To make sure it works cross-platform (Windows,Linux), path.normalize is used

Check the example code at - https://github.com/pra85/gulp-inject-example

Gulp-inject transform doesn't work

2 Answers2

Linked