1

我一直在使用这个有用的工具时遇到问题，我不知道该怎么做，这就是为什么我来这里寻求您的帮助。

这是我的目录结构：

 - Project root
 |-  dist
     |-css
     |-js

 |-  source
     |- css
     |- js
     |-index.html

 |-gulpfile.js
 |-index.html

所以，我正在使用 gulp 将我的 css、js 从源文件夹注入到我的 dist 文件夹中，进行缩小、连接等。然后，将其注入到源文件夹中的 index.html 并吐入项目根文件夹中. 这是代码：

//Injects assets (css,js) into index.html automatically
gulp.task('inject',['sass','concat-css','concat-js'],function(){
    //Target to inject
    var target = gulp.src('source/index.html');


    //Sources to be injected

    var cssFiles = gulp.src('./dist/assets/css/*.css',{read:false});
    var jsFiles = gulp.src('./dist/assets/js/*.js',{read:false});
    //Merge resources into one
    var sources = es.merge(cssFiles,jsFiles);


    //Injecting bower.json dependencies and other resources

    return target.pipe(inject(sources),{
       ignorePath:'dist/',
        addRootSlash:false
    })
        .pipe(wiredep({ignorePath:'../'}))
        .pipe(gulp.dest('./'));

   });

问题是 index.html 上 dist 文件夹的路径是这样的：

"/dist/css/stylesheet.css"

导致错误，因为它应该是：`"dist/css/stylesheet.css"

正如您在代码中看到的，我使用了注入的选项，ignorePath、addRootSlash、relative:true，但似乎没有任何效果。同样的事情也发生在wiredep上，但是这个接受了ignorePath选项，所以一切都很好。

在此先感谢您的帮助。

4

4 回答 4

7

看起来您错误地将inject选项作为pipe函数的第二个参数。尝试：

target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false }))
于 2015-09-24T16:39:25.380 回答
1

您应该像这样在注入中设置相对选项：

inject(sources, { relative: true })
于 2015-12-04T14:43:48.187 回答
1

您可以使用两个选项 od gulp injection： ignorePath和addRootSlash

var injectOptions = {
     addRootSlash: false,
     ignorePath: 'dist/'
};
target.pipe(inject(sources),injectOptions)
于 2016-03-08T13:20:18.917 回答
0

我知道，这是旧的。但是对于每个有同样问题的人来说，就像我的情况一样。

环境

var options = {
   relative: false,
   addRootSlash: false,
   ignorePath: 'dist/',
   addPrefix: './js'
};
return gulp.src(['./index.html'])
   .pipe(inject(stream, options))
   .pipe(gulp.dest('temp/'));

对我有用。我必须通过设置“ignorePath”，然后为目标文件夹设置“removeRootSlash”和“addPrefix”来删除路径。

请参阅npm gulp-inject的更多示例部分和addPrefix部分。

于 2018-02-21T21:46:54.683 回答