关于html:gulp-inject提供错误的相对路径

gulp-inject is giving wrong relative path

我在使用这个有用的工具时遇到了麻烦,而且我不知道该怎么办,这就是为什么我来这里寻求您的帮助。

这是我的目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
 - Project root
 |-  dist
     |-css
     |-js

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

 |-gulpfile.js
 |-index.html

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//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文件夹的路径是这样的:

1
"/dist/css/stylesheet.css"

引起错误,因为它应该是:`" dist / css / stylesheet.css"

正如您在代码中看到的那样,我使用了注入的选项,ignorePath,addRootSlash,relative:true和似乎没有任何作用。 有线连接发生了相同的事情,但是此操作正在接受ignorePath选项,因此一切都很好。

在此先感谢您的帮助。


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

1
target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false }))


您可以使用两个选项od gulp注入:
ignorePath和addRootSlash

1
2
3
4
5
var injectOptions = {
     addRootSlash: false,
     ignorePath: 'dist/'
};
target.pipe(inject(sources),injectOptions)


您应该在注入中设置相对选项,如下所示:

1
inject(sources, { relative: true })

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

设置

1
2
3
4
5
6
7
8
9
var options = {
   relative: false,
   addRootSlash: false,
   ignorePath: 'dist/',
   addPrefix: './js'
};
return gulp.src(['./index.html'])
   .pipe(inject(stream, options))
   .pipe(gulp.dest('temp/'));

为我做the俩。
我必须通过设置" ignorePath",然后为目标文件夹设置" removeRootSlash"和" addPrefix"来删除路径。

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