Gulp: Create HTML from template and inject - gulp

Question

I'm creating HTMLs to inject there revisioned sources from templates as file.html.tpl.
So I have css.html.tpl which has following:
<!-- common:css -->
<!-- endinject -->
<!-- vendor:css -->
<!-- endinject -->
<!-- custom:css -->
<!-- endinject -->
and using this function which read that .html.tpl file Sync, then write in .html the template
exports.createHTMLfromTemplate = function (distDir, templateFileNames) {
for(var i = 0; i < templateFileNames.length; i++) {
var file = templateFileNames[i];
var tplData = fs.readFileSync(path.join(__dirname, file));
var distPath = path.join(distDir, file.slice(0, -4)); // remove .tpl
fs.writeFile(distPath, tplData, function (err) {
if (err) log(exports.error(err));
});
}
};
and then we should have ready .html files with those comments to inject, then we inject our revisioned files.
gulp.task('inject-js', function () {
var distPath = path.join(__dirname, paths.baseSrc)
helper.createHTMLfromTemplate(distPath, 'js.html.tpl')
var injected = gulp.src(distPath + 'js.html');
_.each(jsTasks, function (task) {
var injector = task.filename.substr(0, task.filename.length - 3);
var gulpSrc = gulp.src(task.paths.dest + injector + '*.js', {read: false});
injected
.pipe($gulp.inject(gulpSrc, {name: injector}))
});
return injected
.pipe(gulp.dest(paths.baseSrc))
.on('error', helper.handleError);
});
the result in js.html is following:
<!-- common:css -->
<link rel="stylesheet" href="/static/dist/common-fee68d20.css">
<!-- endinject -->
<!-- vendor:css -->
<link rel="stylesheet" href="/static/dist/vendor-7cd25cb9.css">
<!-- endinject -->
<!-- custom:css -->
<!-- endinject -->
as you can see, if I run this gulp inside of Vagrant (VM), it will not inject in some comments, when running outside Vagrant, e.g. using local gulp, it injects properly.
Why? :)

Answer 1

Full disclosure: I have not used Vagrant
Maybe we can narrow it down. gulp-inject works on the given glob path and:
takes a stream of source files, transforms each file to a string and
injects each transformed string into placeholders in the target stream
files.
If the injection is not taking place, then my first though is that it is not finding the files that it needs to inject.
Try using something like gulp-debug to see if the files that need to be injected actually make it into the pipe stream.
If in the Vagrant environment you are getting the files from source control instead of mapping to the same path as your local dev environment then it should work. Otherwise the vinyl paths may not be resolving to the correct directory.
The puzzling part is that it works, but only partially. If it is not a path issue and you are using reved files then the task responsible for generating the <!-- custom:css --> may be the culprit. That would make more sense.
EDIT
A note from gulp-inject:
Note: As of gulp-inject v4.0.0, NodeJS v4 or above is required. To use
gulp-inject for older versions of Node install a specific version: npm
install gulp-inject#3.
I have no reason to think that this may be the problem, but just in case cross check the Node version number in your local and VM environments.