klei/gulp-inject

Transform function not called

lbineau opened this issue · 2 comments

Hi everyone,

I'm on the latest version of gulp-inject 3.0.0, and I try to inject a list of link of all demo.html into a index.html file. My problem is the transform function is never called (I don't have the console.log working).
Am I doing anything wrong ? Thank you.

gulp.task('index', function () {
  var target = gulp.src('./templates/index.html');
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  var sources = gulp.src(['./src/**/demo.html'], {read: false}, {
    transform: function (filepath) {
      console.log(filepath);
      return '<li><a href="' + filepath + '">' + filepath + '</a></li>';
    }
  });

  return target.pipe(inject(sources))
    .pipe(gulp.dest('./src/main'));
});

Source :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul>
    <!-- inject:html -->
    <!-- endinject -->
</ul>
</body>
</html>

Result (transform function doesn't seem to be called) :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul>
    <!-- inject:html -->
    <link rel="import" href="/src/main/element/atom/h1/demo.html">
    <link rel="import" href="/src/main/element/atom/h2/demo.html">
    <!-- endinject -->
</ul>
</body>
</html>

Hi!

The problem is caused by passing gulp-inject's options to gulp.src.

So instead of your code above, change it to:

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

  return target.pipe(inject(sources, {
      transform: function (filepath) {
        console.log(filepath);
        return '<li><a href="' + filepath + '">' + filepath + '</a></li>';
      }
    }))
    .pipe(gulp.dest('./src/main'));
});

My bad, thank you it works !