关于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.在bower install font-awesome –save之后,到font-awesome文件夹下,可以看到less、sass文件夹,里面分别有font-awesome的sass或less文件,但是都是分别@import同目录下的其他文件,其中_variables命名的文件里面有对应的配置,只需要修改$fa-font-path这个变量即可。

2.修改gulp文件夹下得build.js文件,在task html里面,添加一行如下代码

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

意思是把这个路径下的文件,在编译的时候,编译到fonts文件夹下,还没完,还需要在bower.json中,添加override,比如我的添加了如下,当然,也可以用fonts/*这种。

  "overrides": {
    "font-awesome": {
      "main": [
        "less/font-awesome.less",
        "scss/font-awesome.scss",
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    },
  },

陆续更新…………


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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>