问题 Gulp-Inject不起作用

我有一个简单的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上的文档中复制的。

当我运行这些任务中的任何一个时，控制台只是说“已启动”注入'已完成'注入''

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

我已经尝试在src中键入并以许多不同方式注入属性但没有运气。知道我做错了什么吗？

9386

2018-05-13 22:41

起源

我有同样的问题。看起来它正在做一个noop，因为生成的HTML文件只保留<！ - inject：js - >和<！ - endinject - >注释。 - Brady Isom

就像我一样。我真的希望有某种调试机制存在。 - John Haugeland

我有同样的错误消息，但事实证明我的index.html文件是空的！ - user2023861

答案:

首先，你的endinject标签有错误：

<!-- endinject-->

应该

<!-- endinject -->

这个插件在我和其他各种设置中都很有用，所以问题可能出在你的配置中。因为当您使用流式传输时，您不能确定自己管道的文件，总是尝试使用插件来确切地查看您正在管理的文件。我推荐使用大口喝，用。试试这个来调试你的设置：

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文件，看看这个这个gulpfile.js要点

2018-05-17 06:40

好眼睛。我无法猜测我的问题是评论中的空格。 - welbornio

gulp-using被列入黑名单作为gulp插件，建议使用gulp-debug： github.com/gulpjs/plugins/blob/master/src/blackList.json#L50 - Cosmin

刚遇到类似的问题;我在用  在我的代码中。显然是 // 是不允许的，并导致问题。 - Topher Fangio

我在以下代码中遇到了同样的问题：

    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-->

单击此链接可查看我的文件结构。注入是正确创建css文件但不是js文件。凉亭依赖关系也很好。

最后我抓住了传递给gulp.src（）的数组中缺少的'/'。修复后：

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

它工作正常。

2018-02-11 10:35

问题 Gulp-Inject不起作用

答案:

热门问题