use*_*929 1 html npm gulp gulp-inject
我一直无法使用这个有用的工具,我不知道该怎么办,这就是我来这里寻求帮助的原因.
这是我的目录结构:
- Project root
|- dist
|-css
|-js
|- source
|- css
|- js
|-index.html
|-gulpfile.js
|-index.html
Run Code Online (Sandbox Code Playgroud)
所以,我正在使用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('./'));
});
Run Code Online (Sandbox Code Playgroud)
问题是index.html上dist文件夹的路径是这样的:
"/dist/css/stylesheet.css"
Run Code Online (Sandbox Code Playgroud)
导致错误,因为它应该是:`"dist/css/stylesheet.css"
正如您在代码中看到的,我使用了inject的选项,ignorePath,addRootSlash,relative:true,似乎没有任何效果.同样的事情发生在wiredep上,但是这个接受了ignorePath选项,所以一切都很好.
在此先感谢您的帮助.
看起来你错误地将inject选项作为pipe函数的第二个参数.尝试:
target.pipe(inject(sources, { ignorePath: 'dist/', addRootSlash: false }))
Run Code Online (Sandbox Code Playgroud)