網(wǎng)頁設計系列教程將學習命令行過程,可能會改變你的網(wǎng)頁設計方式。
從最基本的開始我們會直接跳到實際的技能,你可以立即使用。一個圖片為什么命令行是一個必備網(wǎng)頁設計工具。
主要內容包括:
讓我們很快的了解主要有五個方面:
1。利用第三方軟件包
網(wǎng)頁設計師經(jīng)常使用第三方軟件如jQuery,Bootstrap,Modernizr,字體真棒,normalize.css和一長串的人。在命令行中,利用這些外包裝通常意味著:
維護一個網(wǎng)站的書簽列表,你可以下載每個包的最新版本。
手動訪問說網(wǎng)站下載包每次你需要他們。
重復這個過程一遍每當包更新。
手動將更新版本到每一個項目是用。
處理軟件包管理手動緩慢而笨拙,但使用命令行,那是過去的事了。
你可以把包直接到您的項目只輸入幾個字,如:
鮑爾安裝jQuery
你可以把包起輸入一組簡單的話:
鮑爾更新jQuery
沒有更多的手動下載包從網(wǎng)絡或手動升級他們的改變,那就是你可以通過命令行管理軟件包東西的小味道。
2。供電的前端代碼
三種你最有可能看到的任何網(wǎng)頁設計項目中使用的CSS,HTML和JavaScript。命令行工具開辟新途徑,在這些語言更有效的使我們的生產(chǎn)和交付的代碼。
我們可以利用命令行與CSS的最有力的一件事是編譯預處理程序,如手寫筆,SASS /標準和少。使用命令行,你可以快速輸入幾個字編譯任何預處理文件。你也可以設置自動編譯你的CSS文件重新編譯,當你改變你的程序文件。
通過命令行,我們也可以進一步提高我們的CSS工作流像autoprefixing,文件清理和壓縮。以類似的方式,我們還可以優(yōu)化我們的文件連接和縮小JavaScript。
和HTML,我們接觸到的語言像玉這給我們以速記寫HTML的能力,并有能力開發(fā)簡單而復雜的模板系統(tǒng)來阻止我們必須重寫的代碼塊,重復整個項目。
3。隨著自動化任務者
能夠編寫CSS幾句,然后縮小JavaScript與其他幾句是偉大的。但是當事情真的開始有超能力的是你能做的全部你的項目需要在一個單獨的命令。
通過使用一種名為“任務殺手”,一個字的命令一樣大口或咕??梢栽O置編譯預處理文件,然后結合,autoprefix,清潔和壓縮所產(chǎn)生的CSS,之后你的玉文件編譯成HTML,你的JS文件級聯(lián)和縮小–所有在幾秒鐘的空間。
你也可以設置任務者處理這些事情免提你。運行一個命令后大口看或咕嚕看你可以繼續(xù)和你的項目工作的原始文件時,在后臺,所有的編譯和優(yōu)化將自動處理。
任務者是完全靈活和可配置,不過你想要的,所以在這你可以設置你的項目沒有結束的方式。只是微調東西適合每一集的情況下需要。
4。活重裝,瀏覽器同步多設備測試
生活上讓你把你的手指從刷新按鈕和集中越來越光滑,實時反饋您的設計更改為你做。
在你已經(jīng)跑到位的任務自動化,您可以添加活加載直接進入混合,嚙合它的任何配置你為項目創(chuàng)建。你可以決定是什么觸發(fā)過重裝,是預編譯,HTML的變化或任何你想要的東西。
作為使生活上你也會得到一個網(wǎng)站預覽紡本地主機上,即模擬一個Web主機在本地機器上運行。這是偉大的為確保一切正常了HTTP:/ /協(xié)議,而不是文件:/ /協(xié)議。
在這上面你也會學會瀏覽器同步前進,讓你得到一個URL,你可以打到多個瀏覽器,都同步一起。例如,單擊導航按鈕上的鍍鉻然后看看Firefox,Opera和Safari回應同樣的動作同時。
這個瀏覽器同步不限于一個裝置。你也可以去你的片相同的URL,電話和其他設備在同一個連接,每一顯示同步預覽。這都是在一起給你兩跨瀏覽器和跨設備測試的完美。