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.

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.

• javascript
• gulp
• gulp-inject

Share Improve this question Follow edited Jan 7, 2016 at 17:59 Prayag Verma 5,65144 gold badges3232 silver badges5858 bronze badges asked Dec 27, 2015 at 16:16 svfatsvfat 3,38311 gold badge1717 silver badges3434 bronze badges 2

• 2 seeing your full gulpfile or task definition might help, the answer from @qcz looks good – A Macdonald Commented Jan 6, 2016 at 11:10
• show us your plete gulp task – harishr Commented Jan 8, 2016 at 10:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6 +25

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('./'));
});

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./pra85/gulp-inject-example