Fal*_*lci 4 font-awesome bower gulp
使用gulp复制bower资源的正确方法是什么.
我想要一个任务"构建"(对于dev)将:
我遇到"font awesome"的问题,因为他们的资源(.ttf,.otf ...)在font-awesome.css中被引用为:"../font/fontawesome-webfont.ttf"
我尝试使用wiredep,将js和css复制到/ vendor(没有文件夹结构)并且没有复制字体.
我也尝试过main-bower-files,它还将所有资源(和字体)复制到/ vendor文件夹,但也没有内部结构
并尝试使用bowerNormalizer,创建一个像"/ vendor/font-awesome //"这样的文件夹结构(也是无效的)
并且,最后,尝试使用gulp-bower文件,复制所有的bower文件(min,dist,src),这也不对
PS:我现在不想要min/uglify/concat.这项工作将在稍后的"dist"任务中完成
小智 6
另一种方法:
suposing你已经安装:
如果你不这样做,你可以用npm安装:
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
一旦你拥有它,我们就开始配置gulp任务
//Here we only copy files to folder inside source code.
//In this case ./src/lib/
gulp.task("bower:copyfiles", function(cb){
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('./src/lib'))
cb();
});
//This task is the one wich insert the script tag into
// HTML file. In this case is index.html and is in root
gulp.task('bower:insertfiles', function(cb){
return gulp.src('./src/index.html') //file with tags for injection
.pipe(inject(gulp.src(['./src/lib/*.js', './src/lib/*.css'], {read: false}), {
starttag: '<!-- bower:{{ext}} -->',
endtag: '<!-- endbower -->',
relative:true
}
))
.pipe(gulp.dest('./src')); //where index.html will be saved. Same dir for overwrite old one
})
//And this task will launch the process of copy and include into index.html
gulp.task('bower:buildlib', function(cb) {
runSequence('bower:copyfiles', 'bower:insertfiles',cb);
})
现在我们有一半的过程,我们需要将标签插入index.html,让gulp知道哪里必须包含内容
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- bower:css -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</body>
</html>
最后一步是在命令行中运行我们的任务
gulp bower:buildlib
已知一些与bower一起安装的库具有不同的文件配置.fe:当你安装bootstrap时,不包括css文件,因为在bower.json中(在bower_components上的库文件夹中或者你拥有的任何东西)都以这种方式设置.你可以修改这个覆盖项目根目录下bower.json中的这些选项,像这样添加它(相同的bootstrap示例):
"overrides":{
"bootstrap":{
"main":[
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
}
}
这样你设置的文件将被包含,而不是.
| 归档时间： |
|
| 查看次数： |
7996 次 |
| 最近记录： |