gulp-inject: Can't remove beginning of injected path using 'IgnorePath'

I’m trying to have gulp-inject, inject a bunch of JS files in my app.

My folder structure looks like this

gulpfile.js
app/
    scripts/
    index.html

The file comments that get injected look like this. <script src="/app/scripts/app.js"></script>

However I need to remove the /app/ so the index.html file loads the .js files properly. I’ve tried adding this {ignorePath: 'app'} but it doesn’t seem to remove it from the inject comments.

Any ideas?

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 35 (5 by maintainers)

Most upvoted comments

This works for me:

var paths = {
    html: ['doc/_src/**/*.html', '!doc/_src/_partials/*.html'],
    scripts: 'doc/js/**/*.js',
    styles: 'doc/styles/css/*.css',
    out: 'doc/'
};

gulp.task('inject', function () {
    gulp.src(paths.html)
        .pipe(inject(gulp.src([paths.styles], {read: false}),
            // Options
            {
                ignorePath: 'doc',
                addRootSlash: false
            }
        ))
        .pipe(gulp.dest(paths.out));
});

+25

r4fx on Jun 11, 2014

oh, and you will also need to use inject’s {addRootSlash: false}.

Camusensei on May 20, 2014

hi, came across a similar problem. Figured out it was a typo (two) in the docs:

this block is missing a ) so if you copy from the examples, gulp will build without showing any error:

gulp.src('./src/index.html')
  .pipe(inject(gulp.src('./src/**/*.js', {read: false}), {ignorePath: 'src'})
  .pipe(gulp.dest('./dist'));

should be:

gulp.src('./src/index.html')
  .pipe(inject(gulp.src('./src/**/*.js', {read: false}), {ignorePath: 'src'}))
  .pipe(gulp.dest('./dist'));

here is a working example:

 .pipe(inject(gulp.src('./dist/libs.min.js', {read: false}), 
    {starttag: '<!-- inject:head:js -->', ignorePath: 'dist', addRootSlash: false}))

adriennn on Feb 7, 2016

johannesjo 👍

And this issue … Let me just say I’ve had an amazing time with this project, until I stumbled across this problem. Definitely the Achilles Heel so far.

Docs don’t really talk about it. Solutions are many with mixed results. Meanwhile so many projects have something like a src or app folder, and a gulp file on the root, causing this issue.

And after a few hours here is my working code :

   var sources = gulp.src([
      './src/app/app.js', '!./src/bower_components/**/*', './src/**/*.js', './src/**/*.css'
         ], {read: false});
   gulp.src('./src/index.html')
     .pipe(inject(sources, {ignorePath: 'src', addRootSlash: false }))
     .pipe(inject(
        gulp.src(mainBowerFiles(), {read: false}),
                      {ignorePath: 'src', addRootSlash: false, name: 'bower'}))
     .pipe(gulp.dest('./src'));

producing

<!DOCTYPE html>
<html>
<head>
  <!-- bower:css -->
  <!-- endinject -->

  <!-- inject:css -->
  <!-- endinject -->

  <!-- bower:js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- endinject -->
</head>
<body>
  <!-- inject:js -->
  <script src="app/app.js"></script>
  <!-- endinject -->
</body>
</html>

kosz on Dec 30, 2014

Sorry, that’s coffee script. I’ve added print(), but it’s not really giving me anything useful…here it is in JS this time…

gulp.task('inject_resources', function() {
  return gulp.src("./dev/index.html")
    .pipe(inject(gulp.src(
      ["./dev/**/vendor.js", "./dev/**/app.js"], {
        read: false,
        cwd: "" + __dirname + "/dev/"
      }
    )).pipe(print() /* returns nothing */ ))
    .pipe(print() /* returns "dev/index.html" */ )
    .pipe(gulp.dest("./dev"));
});

uberspeck on Jun 2, 2014

This works for me:

var paths = { html: [‘doc/_src//.html’, '!doc/_src/_partials/.html’], scripts: 'doc/js//.js’, styles: 'doc/styles/css/.css’, out: ‘doc/’ };

gulp.task(‘inject’, function () { gulp.src(paths.html) .pipe(inject(gulp.src([paths.styles], {read: false}), // Options { ignorePath: ‘doc’, addRootSlash: false } )) .pipe(gulp.dest(paths.out)); });

grimpa on Jan 12, 2017

ignorePath: 'x' and… addRootSlash: false solved my issues with this, thanks

jpduckwo on May 19, 2016

I tried your code above. Nothing is printed out. However, if i remove the cwd command, it works…

gulp.task('inject_resources', function() {
  return gulp.src("./dev/index.html")
  .pipe(
    inject(
      gulp.src(
        ["./dev/**/*.js", "./dev/**/*.css"],
        {read: false /*, cwd: "" + __dirname + "/dev/" */}
      )
      .pipe( print() )
    )
  ).pipe(gulp.dest("./dev"));
});

[gulp] dev/assets/javascripts/app.js
[gulp] dev/assets/javascripts/vendor.js
[gulp] dev/assets/stylesheets/app.css
[gulp] dev/assets/stylesheets/vendor.css

uberspeck on Jun 2, 2014

You really should use a tool to convert your coffee to js, here, I can tell you did it by hand because there is one closing paranthesis too many. or just paste your coffee script and I’ll either understand it or convert it. Try this:

gulp.task('inject_resources', function() {
  return gulp.src("./dev/index.html")
    .pipe(inject(gulp.src(
      ["./dev/**/vendor.js", "./dev/**/app.js"], {
        read: false,
        cwd: "" + __dirname + "/dev/"
      }
    ).pipe(print()/*should list your js files*/))
    .pipe(gulp.dest("./dev"));
});

Camusensei on Jun 2, 2014