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选项,因此一切都很好。
在此先感谢您的帮助。
看起来您错误地将
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部分。