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

之前咱們敲靜態頁面都是寫好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 ：圖片壓縮

不徹底，不詳細，僅供記錄，具體請點擊文章各個鏈接學習。