Streams/gulp-inject 问题
Streams/gulp-inject issue
我正在尝试使用动态目标调用 gulp-inject
。如果 HTML 文件包含多个目标,每个目标都会覆盖最后一个,所以我试图将它们移出到另一个函数中。问题是,现在 gulp-inject
无法访问目标(通过记录到达的位置来确定)。
下面的代码应该作为一个例子(这是简化的但应该显示正在发生的事情):
HTML:
<body>
<!-- bundle1:js -->
<!-- endinject -->
<!-- bundle2:js -->
<!-- endinject -->
</body>
Gulpfile.js:
var gulp = require('gulp');
var inject = require('gulp-inject');
var through2 = require('through2');
var bundles = require('./bundles');
var localInject = function () {
return through2.obj(function (file, enc, cb) {
if (file.isNull()) {
return cb(null, file);
}
if (file.isStream()) {
return cb(new gutil.PluginError('gulp-inject', 'Streaming not supported'));
}
var scriptBundles = Object.keys(bundles.scripts);
var referencedScriptBundles = [];
scriptBundles.forEach(function (bundle) {
var expression = "(" + bundle + ":\w*)";
var regex = new RegExp(expression, "ig");
if (regex.test(file.contents.toString('utf-8'))) {
//console.log('matched', bundle, 'in', file.path);
referencedScriptBundles.push(bundle);
}
});
if (referencedScriptBundles.length) {
referencedScriptBundles.forEach(function(bundle) {
inject(gulp.src(bundles.scripts[bundle], {
read: false
}), {
name: bundle
});
});
cb(null, file);
} else {
cb(null, file);
}
});
};
gulp.task('inject:dev', function () {
return gulp.src('./Views/**/*.cshtml', { base: './' })
.pipe(debug())
.pipe(localInject())
.pipe(gulp.dest('.'));
});
Bundles.js:
module.exports = {
scripts: {
bundle1: ['blah/**/*.js'],
bundle2: ['otherblah/**/*.js']
}
};
可能是我对数据流缺乏了解,但一切正常,除了在 gulp-inject
内部,它似乎没有获取文件块。该插件在我的视图中找到了正确的包,并从我的包文件中找到了要注入的脚本,只是似乎没有对目标文件的引用。
我确定我在发布之前已经尝试过这个,但是我通过管道传输当前流来注入并使用 async.seriesEach.
修复了它
this.pipe(inject(...));
总是简单的事情!
我正在尝试使用动态目标调用 gulp-inject
。如果 HTML 文件包含多个目标,每个目标都会覆盖最后一个,所以我试图将它们移出到另一个函数中。问题是,现在 gulp-inject
无法访问目标(通过记录到达的位置来确定)。
下面的代码应该作为一个例子(这是简化的但应该显示正在发生的事情):
HTML:
<body>
<!-- bundle1:js -->
<!-- endinject -->
<!-- bundle2:js -->
<!-- endinject -->
</body>
Gulpfile.js:
var gulp = require('gulp');
var inject = require('gulp-inject');
var through2 = require('through2');
var bundles = require('./bundles');
var localInject = function () {
return through2.obj(function (file, enc, cb) {
if (file.isNull()) {
return cb(null, file);
}
if (file.isStream()) {
return cb(new gutil.PluginError('gulp-inject', 'Streaming not supported'));
}
var scriptBundles = Object.keys(bundles.scripts);
var referencedScriptBundles = [];
scriptBundles.forEach(function (bundle) {
var expression = "(" + bundle + ":\w*)";
var regex = new RegExp(expression, "ig");
if (regex.test(file.contents.toString('utf-8'))) {
//console.log('matched', bundle, 'in', file.path);
referencedScriptBundles.push(bundle);
}
});
if (referencedScriptBundles.length) {
referencedScriptBundles.forEach(function(bundle) {
inject(gulp.src(bundles.scripts[bundle], {
read: false
}), {
name: bundle
});
});
cb(null, file);
} else {
cb(null, file);
}
});
};
gulp.task('inject:dev', function () {
return gulp.src('./Views/**/*.cshtml', { base: './' })
.pipe(debug())
.pipe(localInject())
.pipe(gulp.dest('.'));
});
Bundles.js:
module.exports = {
scripts: {
bundle1: ['blah/**/*.js'],
bundle2: ['otherblah/**/*.js']
}
};
可能是我对数据流缺乏了解,但一切正常,除了在 gulp-inject
内部,它似乎没有获取文件块。该插件在我的视图中找到了正确的包,并从我的包文件中找到了要注入的脚本,只是似乎没有对目标文件的引用。
我确定我在发布之前已经尝试过这个,但是我通过管道传输当前流来注入并使用 async.seriesEach.
修复了它this.pipe(inject(...));
总是简单的事情!