Gulp-Inject 不起作用答案

【问题标题】：Gulp-Inject Not WorkingGulp-Inject 不起作用
【发布时间】：2014-07-01 19:25:34
【问题描述】：

我有一个简单的 Gulp 构建过程设置用于测试。我已经多次阅读文档，但似乎无法让 Gulp-inject 将我想要的脚本注入 index.html 文件。

我的 Gulp 文件如下所示：

gulp.task('inject1', function() {
   return gulp.src('app/index.html')
        .pipe(inject(gulp.src('./app/scripts/app.js', {read : false}))) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(gulp.dest("dist"));
});

gulp.task('inject2', function() {
    return gulp.src('app/scripts/**/*.js', {read : false}) // Not necessary to read the files (will speed up things), we're only after their paths
        .pipe(inject("./app/index.html"))
        .pipe(gulp.dest("./dist"));
});

这是我的 Index.html 的一部分：

<!-- inject:js -->

<!-- endinject-->

这两个都是从 github 上的文档中复制的。

当我运行这些任务中的任何一个时，控制台只会显示“Started 'inject' Finished 'Inject'”

在我的 ./dist 文件夹中，它创建了一个 Index.html 文件，但没有注入任何 js 文件。

我尝试过输入 src 并以许多不同的方式注入属性，但没有运气。知道我做错了什么吗？

【问题讨论】：

我也遇到了同样的问题。看起来它正在执行 noop，因为生成的 HTML 文件只保留了和 cmets。
和我一样。我真的希望有某种调试机制存在。
我也有同样的错误信息，但原来我的 index.html 文件是空的！

标签： build gulp gulp-inject

【解决方案1】：

首先你的 endinject 标签有错误：

<!-- endinject-->

应该是

<!-- endinject -->

这个插件在各种设置中对我和其他人都非常有用，所以问题可能出在您的配置中。因为当您使用流式传输时，您无法确定要传输哪些文件，因此请始终尝试使用插件来准确查看您正在传输的文件。我推荐使用gulp-using。试试这个来调试你的设置：

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

gulp.task('inject2', function() {
return gulp.src('app/scripts/**/*.js', {read : false})
    .pipe(debug())
    .pipe(inject("./app/index.html"))
    .pipe(gulp.dest("./dist"));
});

还要确保您使用相同的方法来验证您是否也匹配您的html 文件。除此之外 - 在您了解管道以获取具有正确路径的正确文件之前，这只是反复试验。

如果gulp-inject 没有注入任何文件，这意味着您没有正确地通过管道传输它们，或者您的目标inject 不正确。该插件有效，对我来说非常有用。

如果您需要查看示例工作 gulp 文件，请查看此this gulpfile.js gist

【讨论】：

好眼光。我无法猜到我的问题是 cmets 中的空格。
gulp-using 被列入 gulp 插件黑名单，建议使用 gulp-debug 代替：github.com/gulpjs/plugins/blob/master/src/blackList.json#L50
刚刚遇到了类似的问题；我在我的代码中使用了。显然，// 是不允许的并且会导致问题。

【解决方案2】：

下面的代码我也遇到了同样的问题：

    var injectSrc = gulp.src(['./public/css/*.css', '.public/js/*.js'], {read: false});
var injectOptions = {
    ignorePath: '/public'   
};
var options = {
    bowerJson: require('./bower.json'),
    directory: './public/lib',
    ignorePath: '../../public'
}

gulp.task('inject', function() {
    return gulp.src('./src/views/*.html')
            .pipe(debug())
            .pipe(wiredep(options))
            .pipe(debug())
            .pipe(inject(injectSrc, injectOptions))
            .pipe(debug())
            .pipe(gulp.dest('./src/views'));

});

我的 index.html 有以下内容：

<!--bower:css-->
<!--endbower-->
<!--bower:js-->
<!--endbower-->
<!--inject:css-->
<!--endinject-->
<!--inject:js-->
<!--endinject-->

Click on this link to see what my file structure was. 注入正确创建了 css 文件，但没有创建 js 文件。 Bower 依赖项也运行良好。

最后我在传递给 gulp.src() 的数组中发现了丢失的“/”。将其修复为：

var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'], {read: false});

它工作正常。

【讨论】：