Search code examples
angularjsgulp-inject

How to use gulp-inject to modify path of script file

gulpfile.js

gulp.task('index', function() {
    var target = gulp.src('./app/index.html');
    // It's not necessary to read the files (will speed up things), we're only after their paths: 
    var sources = gulp.src(['./app/js/**/*.js'], {
        read: false
    });

    return target.pipe(inject(sources))
        .pipe(inject(gulp.src('./app/js/**/*.js', { read: false }, { ignorePath: '/app/' })))
        .pipe(gulp.dest('./build'));
});

index.html

<body ng-app="kisanApp">
    <ng-view></ng-view>
    <!-- inject:js -->
    <script src="/app/js/app.js"></script>
    <script src="/app/js/directives.js"></script>
    <script src="/app/js/filters.js"></script>
    <script src="/app/js/services.js"></script>
    <script src="/app/js/controller/driverController.js"></script>
    <script src="/app/js/controller/driversController.js"></script>
    <!-- endinject -->
</body>

Here I am getting app/js/app.js rather than js/app.js. How should I modify my path so that it works perfectly?

Solution

  • If I understand you correctly this will solve your problem.

    var gulp = require('gulp')
inject = require('gulp-inject');

gulp.task('index', function() {
    gulp.src('./app/index.html')
  .pipe(inject(gulp.src('./app/**/*.js', {read: false}), {ignorePath: 'app', addRootSlash: false}))
  .pipe(gulp.dest('./build'));
});