資訊專欄INFORMATION COLUMN
1.需要哪些工具？以前我們敲靜態(tài)頁面都是寫好html，css, js，然后再去刷新瀏覽器，艾尼馬又不行，有重新寫過再刷新，一個(gè)頁面下來按chrl+r的次數(shù)可讓你的鍵盤多活好幾天，要不會刷新快捷按鈕那不得手殘了都。
后來，grunt,gulp等工具應(yīng)運(yùn)而生，當(dāng)然它們不止這個(gè)功能，但卻很好地減輕了我們的負(fù)擔(dān)。這篇文章介紹一些如何使用這些工具使構(gòu)建頁面變得簡單高效。這只是個(gè)人的目前在用的不成熟的方案，更專業(yè)的還請參考百度FIS。
| 工具 | 作用 |
|---|---|
| nodejs | 提供執(zhí)行環(huán)境 |
| gulp / grunt | 自動(dòng)化 |
| sass | css預(yù)編譯 |
| compass | sass工具庫 |
| bower | 前端框架/庫管理 |
項(xiàng)目的目錄結(jié)構(gòu)也是很有講究的，目錄結(jié)構(gòu)好的話可能事半功倍，來看看我的目錄結(jié)構(gòu)：
+++ Project 主目錄
+++ dist 發(fā)布代碼目錄
+++ js 產(chǎn)出js
+++ css 產(chǎn)出css
+++ imgs 產(chǎn)出images
+++ libs 項(xiàng)目以來框架/庫
+++ pages 產(chǎn)出頁面
+++ src 生產(chǎn)代碼目錄
+++ js 源js
+++ img 源圖片
+++ sass 源css
+++ pages 源頁面
+++ public 復(fù)用頁面
+++ node_modules gulp組件
+++ gulpfile.js gulp任務(wù)配置
+++ package.json gulp插件管理
3.1 ： nodejs
Node 是一個(gè)服務(wù)器端 JavaScript 解釋器，提供模塊管理，為后面用到的gulp，grunt，bower等提供了一個(gè)執(zhí)行環(huán)境。當(dāng)然不止這些功能。
3.2 ： sass
提供css預(yù)編譯，css的函數(shù)式編程，方便快捷，有趣。
3.3 ： compass
sass的工具庫，相當(dāng)于js與jquery的關(guān)系，compass為sass提供了豐富的插件模塊，rest，css3,layout,讓你編寫sass更加快捷。sass為css提速，compass為sass提速，組合的力量還是蠻大的。
3.4 ： gulp / grunt
gulp和grunt，用過兩者之后，我更傾向于gulp，因?yàn)間ulp配置任務(wù)簡單，和grunt不是一個(gè)量級的。
3.5 ： bower
包依賴管理工具，需要任何框架的時(shí)候，我們不必再到網(wǎng)上去下載再使用了，直接使用bower命令即可下載使用，還解決各個(gè)庫之間的兼容性問題，比如bootstrao3.0需要jquery1.9.1以上的版本，則破環(huán)這個(gè)關(guān)系之后它會智能提醒你。但目前我還只是把它當(dāng)作下載器，所以目錄中并沒有bower的管理目錄。
這里就使用gulp舉例說明了。
gulp為我們提供了豐富的組件，那我們構(gòu)建頁面會需要哪些組件：
browser-sync ：功能強(qiáng)大，配置gulp服務(wù)器，自動(dòng)刷新
gulp-sass ：編譯sass
gulp-file-include ：使靜態(tài)頁面具有文件訪問能力，實(shí)現(xiàn)頁面模塊復(fù)用
gulp-rename ：文件重命名
gulp-concat ：文件合并
gulp-uglify ：文件壓縮
gulp-imagemin ：圖片壓縮
不完全，不詳細(xì)，僅供記錄，具體請點(diǎn)擊文章各個(gè)連接學(xué)習(xí)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85813.html
摘要：面試時(shí)間晚上時(shí)長小時(shí)分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時(shí)都是怎么學(xué)習(xí)前端的學(xué)習(xí)前端的話，我主要是以書籍為主然后是網(wǎng)站視頻博客文檔等學(xué)習(xí)理論，之后再通過代碼實(shí)踐。。。 大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時(shí)間，剛開始說是13號晚上7點(diǎn)；后面可能時(shí)間有變，中午來了個(gè)電話說改到9-10點(diǎn)；怎么說算是第一次面試自己目標(biāo)公司之一吧...
摘要：面試時(shí)間晚上時(shí)長小時(shí)分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時(shí)都是怎么學(xué)習(xí)前端的學(xué)習(xí)前端的話，我主要是以書籍為主然后是網(wǎng)站視頻博客文檔等學(xué)習(xí)理論，之后再通過代碼實(shí)踐。。。 大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時(shí)間，剛開始說是13號晚上7點(diǎn)；后面可能時(shí)間有變，中午來了個(gè)電話說改到9-10點(diǎn)；怎么說算是第一次面試自己目標(biāo)公司之一吧...
摘要：號早上報(bào)道啦，簡單地參觀了一下公司四樓技術(shù)服務(wù)中心十四樓產(chǎn)品中心十七樓研發(fā)中心環(huán)境氛圍都太棒了工作日報(bào)，有點(diǎn)小懶，暫且用圖訴說每日工作內(nèi)容吧哈哈各位看官，且看 ??...
摘要：前陣子，有些師弟師妹問我在淘寶，前端開發(fā)主要是在做什么事情作為一個(gè)在淘寶已經(jīng)工作年的老兵，我想我有資格來全面地回答一下這個(gè)問題，并通過這個(gè)機(jī)會向外部介紹一下我們團(tuán)隊(duì)的同學(xué)。以上便是我們在淘寶主要在做的事情。 前陣子，有些師弟師妹問我：在淘寶，前端開發(fā)主要是在做什么事情？ 作為一個(gè)在淘寶已經(jīng)工作 5 年的「老兵」，我想我有資格來全面地回答一下這個(gè)問題，并通過這個(gè)機(jī)會向外部介紹一下我們團(tuán)隊(duì)...
閱讀 2765·2023-04-25 14:15
閱讀 2707·2021-11-04 16:11
閱讀 3398·2021-10-14 09:42
閱讀 447·2019-08-30 15:52
閱讀 2829·2019-08-30 14:03
閱讀 3549·2019-08-30 13:00
閱讀 2116·2019-08-26 11:40
閱讀 3311·2019-08-26 10:25
