當(dāng)前位置：
網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案詳解。深圳網(wǎng)站建設(shè)公司發(fā)現(xiàn)對很多前端工程師來說，Sass 是接觸到的第一個編譯
文章編輯：網(wǎng)站建設(shè) 文章來源：網(wǎng)站改版 瀏覽量：次
網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案詳解。深圳網(wǎng)站建設(shè)公司發(fā)現(xiàn)對很多前端工程師來說，Sass 是接觸到的第一個編譯系統(tǒng)，或者說是任務(wù)處理器。在這之前，我們的工作方式通常是修改 CSS 文件然后刷新瀏覽器。Sass 打開了自動化處理的大門。有些人可能會認(rèn)為我們只是在工作流中多增加了一條指令，但對于那些第一次發(fā)現(xiàn) Sass 的人來說，這個小小的任務(wù)是非常值得一試的。
網(wǎng)站建設(shè)公司資深框架工程師提醒Compass 讓我們不僅發(fā)現(xiàn) CSS3 的混入可以節(jié)省很多查詢 CSS3 樣式生成器（http://css3generator.com/）的時間，還認(rèn)識到了項目中配置文件的作用。有了 Compass，我們可以創(chuàng)建一個 config.rb 文件，用來描述重要文件夾的路徑、指定開發(fā)環(huán)境與線上環(huán)境的設(shè)置，并綁定重要的調(diào)試工具。這個配置文件可以保留并分享給團(tuán)隊的其他人，讓新人更容易上手。隨著 Sass 社區(qū)的發(fā)展，越來越多的 Compass 插件涌現(xiàn)出來，從先進(jìn)的顏色函數(shù)到柵格系統(tǒng)、布局比例工具、媒體查詢管理，等等。這些工具都作為 gem 組件發(fā)布，可以直接導(dǎo)入任何一個使用 Compass 的項目中。
Compass 還可以讓模塊開發(fā)者使用 Ruby 的功能，比如訪問本地文件、執(zhí)行 Ruby 函數(shù)、編譯 Ruby 模板和把數(shù)據(jù)傳遞回 Sass 文件。這允許用戶在模塊中進(jìn)行復(fù)雜的數(shù)學(xué)運算，而這是單獨使用 Sass 所無法實現(xiàn)的。Compass 還具備這樣的功能：用不同文件夾中的 PNG 圖片生成雪碧圖，或獲取圖片文件的寬度和高度。如今只用一條 compass compile 指令，開發(fā)人員就可以把所有的 Sass 文件編譯到目標(biāo) CSS 所在的目錄，并且圖片和字體都分別指向各自的路徑。Sass 文件可以使用流行的框架來編譯，如 Susy grids、Modular Scale、Breakpoint 和 Color Schemer。Compass 在創(chuàng)建若干個自定義的雪碧圖，批量獲取圖片的尺寸，并在 CSS 中設(shè)置它們的高度和寬度時，就會完成上述的工作。
Compass 不僅是我們對編譯系統(tǒng)的第一次接觸，也是很多人不愿使用最近很火的新型 Node.js 任務(wù)處理器的首要原因。簡單了解 Grunt 和 Gulp 這類工具之后，很多人（包括我）的第一反應(yīng)都是：“噢，這跟 Compass 差不多，只是更復(fù)雜些而已。”對于一個完全使用 Compass 來構(gòu)建編譯流程的開發(fā)人員來說，配置 Grunt 來編譯 Sass 像是一個完全不必要的步驟。然而，一旦配置好 Gulp 或 Grunt 來編譯 Sass，我們就開始關(guān)注其他可做的事情，并且很快意識到我們的編譯流程與之前相比還是有所不同的。
網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案之在任務(wù)處理器中完成一切
網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案之在任務(wù)處理器中完成一切
使用基于 Node.js 的任務(wù)處理器，在我的工作流中有一點多米諾骨牌效應(yīng)。作為一名 Grunt 用戶，我擁有 13 000 多個可用模塊，而且這些模塊為我的工作流提供了各種各樣的功能，而不單單是 Sass 和 CSS。下面是我使用任務(wù)處理器實現(xiàn)的一些功能：
· 安裝需要的 Ruby 庫和 Bower 安裝包
· 清理臨時文件夾
· 創(chuàng)建軟連接
· 編譯 Sass
· 合并 JavaScript
· 加載第三方 JavaScript 庫
· 把 SVG 文件編譯成圖標(biāo)字體
· 對圖片進(jìn)行處理，減少文件體積，裁剪成各種尺寸
· 同步文件到遠(yuǎn)程服務(wù)器
· 創(chuàng)建 Git 標(biāo)簽
· 運行可視化的回歸測試
· 生成代碼的樣式文檔
· 自動生成瀏覽器廠商的前綴
· 編譯組件庫
· 優(yōu)化我的 Sass、CSS、JavaScript、JSON，等等
· 基于 JSON 模式來驗證數(shù)據(jù)
· 啟動 Node 和 PHP 服務(wù)器
· 監(jiān)聽文件改動來刷新瀏覽器
任務(wù)處理器使前端架構(gòu)師能夠創(chuàng)建網(wǎng)站的藍(lán)圖。四個核心都被打包成自動化流程，通過自動化技術(shù)，我們不僅規(guī)范了流程，同時還對它進(jìn)行了優(yōu)化。代碼檢查工具能夠幫助我們規(guī)范和提高代碼標(biāo)準(zhǔn)。測試組件在本地或者持續(xù)集成工具（比如 Jenkins 或 TravisCI）中運行。只需點一下鼠標(biāo)，就可以持續(xù)編譯出新的代碼并發(fā)布到線上。此外，文檔還可以自動讀取代碼中的注釋、模板文件和描述大綱。
網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案之更深的探索
剛接觸前端架構(gòu)時，我還沒聽說過 Grunt，那時對創(chuàng)建 Compass 模塊非常感興趣。我從編寫可以支持新項目的小型 gem 包開始，思考怎樣利用 gem 包把一個基礎(chǔ)樣式同時發(fā)布到多個網(wǎng)站上。雖然這兩個例子都是有效的，但它們反映出，如果我對 Ruby 了解不多，那么能做的事情將會非常有限。再者，學(xué)習(xí)了一些基本的 Ruby 教程之后，我意識到除了 Ruby on Rails 應(yīng)用相關(guān)的知識，市面上并沒有太多學(xué)習(xí) Ruby 編程的資源，更不用說使用 Ruby 編寫 Compass 模塊的了。對于 Grunt 而言，我的優(yōu)勢之一是已經(jīng)掌握了編寫模塊所使用的語言：JavaScript。在使用一些模塊幾個月之后，我發(fā)現(xiàn)它們已經(jīng)能夠滿足我 95％ 的需求。雖然我現(xiàn)在還不是 Node.js 開發(fā)者，但在某些場景下還是可以給一個模塊添加特性或者修復(fù) bug，然后把它發(fā)布出去。有一次，我想在流程中使用 Grunt-PhantomCSS 模塊，但是發(fā)現(xiàn)必須重寫項目的大部分代碼來適配它。因此，我復(fù)制了這個項目，做了一些必要的改動并提交到 GitHub 上，這樣其他人就可以在他們的項目中使用它了。我成為了一名模塊編寫者，而不僅僅是模塊使用者。好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案詳解”知識就分享到這里，如果貴公司有網(wǎng)站需要改版或者重建，請撥打我們網(wǎng)站聯(lián)系方式，有專業(yè)客服免費為您提供完善的建站改版方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
當(dāng)前文章鏈接：/construction/wzgb/14850.html
上一篇：老網(wǎng)站改版建設(shè)一個網(wǎng)站設(shè)計前端工程師的BB鳥規(guī)則經(jīng)驗分享
下一篇：老網(wǎng)站改版前端架構(gòu)設(shè)計公司與在項目中使用任務(wù)處理器的意義
如果您覺得案例還不錯請幫忙分享：
[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認(rèn)后，會立即刪除，保證您的版權(quán)。
相關(guān)案例推薦
資訊分類
最新發(fā)布
- 老網(wǎng)站改版前端架構(gòu)設(shè)計公司與在項目中使用任務(wù)處理器的意義
- 網(wǎng)站改版與建設(shè)前端設(shè)計與任務(wù)處理器解決方案詳解。深圳網(wǎng)站建設(shè)公司發(fā)現(xiàn)對很多前端工程
- 老網(wǎng)站改版建設(shè)一個網(wǎng)站設(shè)計前端工程師的BB鳥規(guī)則經(jīng)驗分享
- 前端框架設(shè)計師對老舊網(wǎng)站改版建設(shè)前端關(guān)于Red Hat 代碼淺析
- 中文商城網(wǎng)站改版為外貿(mào)商城網(wǎng)站對主流跨境電商平臺的了解
- 電商網(wǎng)站建設(shè)或者改版怎樣利用好大數(shù)據(jù)分析？
- 電商網(wǎng)站改版建設(shè)后關(guān)于服務(wù)與服務(wù)運營
- 靜態(tài)網(wǎng)站改版建設(shè)為動態(tài)Web 應(yīng)用訪問過程詳解
- 旅游網(wǎng)站改版為什么需要研究旅游網(wǎng)站本身的背景？
- 商城網(wǎng)站改版建設(shè)關(guān)于網(wǎng)站的推廣八種方案
相關(guān)資訊
- 電商網(wǎng)站平臺改版用戶體系與其他系統(tǒng)的關(guān)系解決方案
- 大型電商網(wǎng)站改版：關(guān)于網(wǎng)站架構(gòu)穩(wěn)定與可靠性
- 網(wǎng)站改版：改版?zhèn)鹘y(tǒng)PC端電商平臺的業(yè)務(wù)數(shù)據(jù)分析解決方案
- 20世紀(jì)的老網(wǎng)站改版：數(shù)據(jù)訪問數(shù)據(jù)分析解決方案
- 網(wǎng)站改版：為什么要做網(wǎng)絡(luò)市場調(diào)研？
- 老網(wǎng)站改版怎樣解決程序的作業(yè)管理
- 老網(wǎng)站改版為營銷類型網(wǎng)站后期怎樣推廣？
- 老網(wǎng)站改版怎樣解決網(wǎng)頁打開速度奇慢的問題？
- 老網(wǎng)站改版營銷型網(wǎng)站后內(nèi)容優(yōu)化技巧
- B2C網(wǎng)站代營運方案與盈利模式分析
