Search code examples
javascriptgulpgulp-inject

Gulp-inject transform doesn't work


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.


Solution

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