关于yo+gulp+bower一起构建应用时遇到的一些问题总结

问题一、在bower中配置开发测试时用得库,无法在运行时注入。
首先是打算有一些测试时候用到的库,放到bower.json文件的devDependencies里面,但是运行之后怎么也找不到对应的文件,也就是gulp无法进行注入,而加到正式的库里面就能找到
解决办法参看了
http://error.news/question/2350800/wiredep-for-bower-not-injecting-files/
就是在gulp文件夹下的conf.js中,添加了devDependencies: true这个属性,代码如下

exports.wiredep = {
  exclude: [/\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
  directory: 'bower_components',
  devDependencies: true
};

问题二、在bower中配置font-awesome,加载字体路径不对。
解决办法分如下几步,

1.在自己的index.scss里直接将$fa-font-path变量重写,指向正确的相对位置即可。

2.在bower install font-awesome --save之后,到font-awesome文件夹下,可以看到less、sass文件夹,里面分别有font-awesome的sass或less文件,但是都是分别@import同目录下的其他文件,其中_variables命名的文件里面有对应的配置,只需要修改$fa-font-path这个变量,但是如果我们git提交的话是会把bower_component文件夹忽略掉的话,自己在本地修改了,团队的其他人是应用不了对应修改的。

还没完,在最终构建发布的时候,gulp会将字体都放到统一的文件夹,所以我们还需要在构建的js中,将本地的路径替换为最终构建后的文件夹路径,如下
修改gulp文件夹下得build.js文件,在task html里面,添加一行如下代码

.pipe($.replace('../../bower_components/font-awesome/fonts', '../fonts'))

意思是把这个路径下的文件,在编译的时候,编译到fonts文件夹下。

陆续更新…………

你可能感兴趣的:(font-awesome,yeoman,javascript,bower,gulp)