關于yo+gulp+bower一起構建應用時遇到的一些問題總結

cnsworder 發布于2019-08-21 10:44 / 2719人閱讀

摘要：問題一在中配置開發測試時用得庫，無法在運行時注入。解決辦法分如下幾步，在自己的里直接將變量重寫，指向正確的相對位置即可。

問題一、在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文件夾下。

陸續更新…………

云服務器 GPU云服務器 vps日常維護中的一些要點總結布局遇到的問題學習遺傳算法遇到的問題看apue遇到的有關問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86099.html

Yeoman-- 一個強大的前端構建工具

摘要：通過官方的生成器，他們建立了一個的工作流，這個流是由一個強大的固定的客戶端組建，包含工具和框架幫助開發者快速建立牛逼的應用。原文還是在簡書上： Yeoman-- 一個強大的前端構建工具,我只是自己的搬運工！！上期跟大家試了試Vue-cli這個構建工具，這個讓我想起了很多其他的前端工具，其中一個就是Yeoman（上次就劇透了的）,所以這期跟大家先簡單介紹下這個腳手架工具，然后慢慢一步...

寵來也 2019-08-19 17:26 評論0 收藏0
Yeoman-- 一個強大的前端構建工具

摘要：通過官方的生成器，他們建立了一個的工作流，這個流是由一個強大的固定的客戶端組建，包含工具和框架幫助開發者快速建立牛逼的應用。原文還是在簡書上： Yeoman-- 一個強大的前端構建工具,我只是自己的搬運工！！上期跟大家試了試Vue-cli這個構建工具，這個讓我想起了很多其他的前端工具，其中一個就是Yeoman（上次就劇透了的）,所以這期跟大家先簡單介紹下這個腳手架工具，然后慢慢一步...

lixiang 2019-08-01 15:01 評論0 收藏0
自定義前端構建工具生成器 generator-pg-cloud

摘要：自定義前端構建工具生成器近期公司前端一直在做效率提升，流程優化，很榮幸這個擔子落在了我身上，除了一些培訓，分享之外，自己弄了個基于的前端構建環境生成器，在此分享給大家，覺得有用的請試用。，不出意料的話，構建環境已經生成完畢了。自定義前端構建工具生成器generator-pg-cloud 近期公司前端一直在做效率提升，流程優化，很榮幸這個擔子落在了我身上，除了一些培訓，分享之外，自己...

snowell 2019-08-21 10:34 評論0 收藏0
[AngularJS]使用Yeoman構建開發AngularJS項目

摘要：一般前端項目安裝依賴使用。包括，，以及程序主入口文件。然后頁面顯示正常。這樣就實現了使用構建一個項目，并簡單開發了一下，創建一個新的頁面并實現了路由跳轉。一. 安裝第一步：安裝npm所需模塊首先需要安裝Node.js，然后使用npm安裝所需要的模塊 npm install -g grunt-cli bower yo generator-karma generator-angula...

amuqiao 2019-08-22 16:18 評論0 收藏0