日照網絡公司
掃描關注網站建設微信公眾賬號

掃一掃微信二維碼

日照網站建設_項目中使用任務處理器的好處

昊諾網絡o2017-07-29 09:07:15o網絡知識o


在網站建設項目中使用任務處理器的好處

初始接觸 Grunt 是在一個大型的現成的代碼庫中,它有眾多的模塊和抽象的代碼組織方式,因此對新手來說不容易理解。然而,經過一段時間的學習,能夠修改部分代碼,甚至添加一些新的功能進去。

然后,開始分解項目,移除一切能夠移除的東西,直至剩下可運行的小基本框架和基礎配置。這時,能理解項目中的每一行代碼,并且可以用自己的方式在項目中實現更復雜的功能。下面是一段用于編譯 Sass 的簡單的 Grunt 代碼:
網站建設素材圖1
上面這段代碼的作用是把你的 style.scss 程序代碼編譯成 style.css,可以分為如下三個部分。

加載任務

  Grunt 需要知道加載哪個 Node 任務到編譯流程中。如果你直接加載 package.json 中的所有的包,那么 load-grunt-tasks 模塊將會減輕你的很多負擔。

設定配置

  每一個加載的任務都有一系列可以配置的選項。在這個例子中,我們只是配置了 Sass 任務的源地址和目標地址,實際上還可以打開或關閉 sourcemaps、設置額外的包含路徑,或者改變輸出的 CSS 格式。每個任務都可以有不同的寫法或者目標。你可以設定一個打開 sourcemaps 和輸出完整代碼的配置用于開發環境,然后設定一個關閉 sourcemaps 和輸出壓縮代碼的配置用于線上環境。

注冊自定義任務

  在這個環節,我們可以把各個獨立的任務整合到一個自定義的父級任務中。default 任務是運行 grunt 指令所執行的默認任務。你可以在 default 任務中添加更多的任務,比如 Sass Lint,也可以新建其他自定義的父級任務,比如 test 或 deploy。

現在用 GulpJS 實現同樣的功能:
網站建設素材圖2
Gulp 定義任務的方式跟 Grunt 有所不同。從腳本中你就能發現它們在代碼風格上大相徑庭。Grunt 基于配置使用對象的符號,在一個地方定義任務,然后在另一個地方執行任務;而 Gulp 把任務和配置連在一起,使用管道的方式,把代碼從一個操作傳遞到下一個操作。接下來分析一下這段代碼。

加載模塊

  與 Grunt 使用 loadNpmTasks 不同,Gulp 使用傳統的基于 Node 的 require() 語法。因此一開始我們就把 gulp 和 gulp-sass 加載進來,并保存到變量中供后續使用。

創建自定義任務

  這里再次使用了 default 任務,表明運行 gulp 時會發生什么。不過,我們并不是使用 grunt.registerTask 來列出所有想要執行的預定義任務,而是在函數內部來構建完整的處理流程。

Gulp的優點

  Gulp 方式傾向于使用小而并行的函數,這些函數往往先是收集資源,然后通過幾個管道處理,把結果輸出到目標環境。

它主要有兩個優點:

一、并行執行的方式意味著在處理 Sass 的時候,不會阻塞其他任務的運行;

二、管道的方式讓 Gulp 可以連貫地對一個資源進行多個操作,而不是像 Grunt 那樣,需要把輸出的 CSS 保存到一個臨時目錄,然后再對這些臨時文件進行二次處理。

文章關鍵詞
国产精品99在线观看_精品国产二区麻豆_欧美日韩亚洲一区二区动漫_国产欧美亚洲精品a第二页