[ 前端實習日記 ] 構建靜態頁面基礎架構

lidashuang 發布于2019-08-21 10:35 / 782人閱讀

以前我們敲靜態頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個頁面下來按chrl+r的次數可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。
后來，grunt,gulp等工具應運而生，當然它們不止這個功能，但卻很好地減輕了我們的負擔。這篇文章介紹一些如何使用這些工具使構建頁面變得簡單高效。這只是個人的目前在用的不成熟的方案，更專業的還請參考百度FIS。

1.需要哪些工具？

工具	作用
nodejs	提供執行環境
gulp / grunt	自動化
sass	css預編譯
compass	sass工具庫
bower	前端框架/庫管理

2.建一個合理的項目目錄

項目的目錄結構也是很有講究的，目錄結構好的話可能事半功倍，來看看我的目錄結構：

+++ Project　　　　　　　　　主目錄

　　+++ dist　　　　　　　　　　　發布代碼目錄
　　　　+++ js　　　　　　　　　　　　產出js
　　　　+++ css　　　　　　　　　　　　產出css
　　　　+++ imgs　　　　　　　　　　　產出images
　　　　+++ libs　　　　　　　　　　　項目以來框架/庫
　　　　+++ pages　　　　　　　　　　　產出頁面
　　　　
　　+++ src　　　　　　　　　　　生產代碼目錄
　　　　+++ js　　　　　　　　　　　　　源js
　　　　+++ img　　　　　　　　　　　　　源圖片
　　　　+++ sass　　　　　　　　　　　　源css
　　　　+++ pages　　　　　　　　　　　源頁面
　　　　+++ public　　　　　　　　　　復用頁面
　　　　
+++ node_modules　　　　　　　gulp組件
+++ gulpfile.js　　　　　　　　gulp任務配置
+++ package.json　　　　　　　gulp插件管理

3.這些工具做什么

3.1 ： nodejs
Node 是一個服務器端 JavaScript 解釋器，提供模塊管理，為后面用到的gulp，grunt，bower等提供了一個執行環境。當然不止這些功能。
3.2 ： sass
提供css預編譯，css的函數式編程，方便快捷，有趣。
3.3 ： compass
sass的工具庫，相當于js與jquery的關系，compass為sass提供了豐富的插件模塊，rest，css3,layout,讓你編寫sass更加快捷。sass為css提速，compass為sass提速，組合的力量還是蠻大的。
3.4 ： gulp / grunt
gulp和grunt，用過兩者之后，我更傾向于gulp，因為gulp配置任務簡單，和grunt不是一個量級的。
3.5 ： bower
包依賴管理工具，需要任何框架的時候，我們不必再到網上去下載再使用了，直接使用bower命令即可下載使用，還解決各個庫之間的兼容性問題，比如bootstrao3.0需要jquery1.9.1以上的版本，則破環這個關系之后它會智能提醒你。但目前我還只是把它當作下載器，所以目錄中并沒有bower的管理目錄。

4.重點是gulp/grunt

這里就使用gulp舉例說明了。

gulp為我們提供了豐富的組件，那我們構建頁面會需要哪些組件：

browser-sync ：功能強大，配置gulp服務器，自動刷新
gulp-sass ：編譯sass
gulp-file-include ：使靜態頁面具有文件訪問能力，實現頁面模塊復用
gulp-rename ：文件重命名
gulp-concat ：文件合并
gulp-uglify ：文件壓縮
gulp-imagemin ：圖片壓縮

不完全，不詳細，僅供記錄，具體請點擊文章各個連接學習。

GPU云服務器云服務器 web前端實習構建架構前端構建構建架構微服務器

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

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

前端面試日記（二）

摘要：面試時間晚上時長小時分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時都是怎么學習前端的學習前端的話，我主要是以書籍為主然后是網站視頻博客文檔等學習理論，之后再通過代碼實踐。。。大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時間，剛開始說是13號晚上7點；后面可能時間有變，中午來了個電話說改到9-10點；怎么說算是第一次面試自己目標公司之一吧...

huayeluoliuhen 2019-08-02 16:02 評論0 收藏0
前端面試日記（二）

摘要：面試時間晚上時長小時分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時都是怎么學習前端的學習前端的話，我主要是以書籍為主然后是網站視頻博客文檔等學習理論，之后再通過代碼實踐。。。大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時間，剛開始說是13號晚上7點；后面可能時間有變，中午來了個電話說改到9-10點；怎么說算是第一次面試自己目標公司之一吧...

zombieda 2019-08-22 18:05 評論0 收藏0
11.24開篇-實習日記

摘要：號早上報道啦，簡單地參觀了一下公司四樓技術服務中心十四樓產品中心十七樓研發中心環境氛圍都太棒了工作日報，有點小懶，暫且用圖訴說每日工作內容吧哈哈各位看官，且看 ??...

不知名網友 2021-11-29 10:50 評論0 收藏0
前端開發在淘寶主要是在做什么事情？

摘要：前陣子，有些師弟師妹問我在淘寶，前端開發主要是在做什么事情作為一個在淘寶已經工作年的老兵，我想我有資格來全面地回答一下這個問題，并通過這個機會向外部介紹一下我們團隊的同學。以上便是我們在淘寶主要在做的事情。前陣子，有些師弟師妹問我：在淘寶，前端開發主要是在做什么事情？作為一個在淘寶已經工作 5 年的「老兵」，我想我有資格來全面地回答一下這個問題，并通過這個機會向外部介紹一下我們團隊...

liuyix 2019-08-23 16:29 評論0 收藏0