五項艱鉅的任務，您會想念的！

使用五個基本的grunt任務

簡化前端工作流程

流行的任務跑步者

Grunt大大簡化了重複的前端開發任務。本文重點介紹了五個強大的Grunt插件，可提高效率和代碼質量。 儘管存在其他任務跑步者（有關詳細信息，請參見我們的《 Gulp.js簡介》），但Grunt廣泛的插件生態系統仍然是寶貴的資產。 新手咕unt？查看“用咕unt自動重複執行的任務”或官方咕unt入門指南。

>

鑰匙要點：

• grunt-autoprefixer：自動化供應商在CSS中的前綴，消除了添加瀏覽器兼容性前綴的繁瑣的手動過程。
• grunt-uncss：刪除未使用的CSS，減少文件大小並改善頁面加載時間。 注意其局限性：它不會通過JavaScript或用戶交互動態添加的類。 >
• ：>同時運行多個咕unt任務，大大減少了整體構建時間，尤其是對多核處理器的有益。 grunt-concurrent
（以前
• ）：自動將bower組件納入您的html，在管理依賴項時節省了時間和精力。 > grunt-wiredepgrunt-bower-install ：
生成自定義的現代化構建，包括項目中使用的功能，最大程度地降低了庫的大小。
• 1。 grunt-modernizr：征服供應商前綴
>編寫CSS通常涉及雜耍實驗屬性和供應商前綴。

>基於自動改裝庫，簡化了這一點。它可以解析您的CSS，並根據我可以使用數據庫添加必要的前綴。

>選項允許您指定目標瀏覽器和版本，僅包括所需的前綴。 grunt-autoprefixer>

示例配置：

grunt-autoprefixer browsers此配置過程

，將前綴的版本輸出到

>，以主要瀏覽器的最後兩個版本為目標，加上IE 8、9和Opera 12.1。

2。

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

：纖細的CSS

> 由UNCS驅動的main.cssmain-prefixed.css> >

> grunt-uncss限制：

無法通過JavaScript或用戶交互動態添加CSS類。 使用

>選項（接受字面的班級名稱或正則表格模式）以部分解決此問題。 複雜的選擇器也可能導致錯誤；將它們隔離在單獨的樣式表中。 grunt-uncss

3。 grunt-wiredep：輕鬆的依賴管理

> Bower（JavaScript/CSS依賴管理器）需要手動將組件包含在您的HTML中。 grunt-wiredep>自動化這個，根據您的配置注入依賴項。

>

基本配置：

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

這將依賴項注入index.html>。 運行grunt-wiredep後，您的HTML將包括以下幾行，例如以下線

4。

：優化現代化grunt-modernizr

> ModernIzr有助於檢測瀏覽器對現代功能的支持。

>創建自定義的現代化構建，其中包括您的項目使用的功能，從而產生較小，更高效的庫。 grunt-modernizr>示例配置：

5。

grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});

：速度的並行處理

> grunt-concurrent對於具有許多任務的項目，

同時運行它們，可顯著加快構建過程，尤其是在功能強大的機器上。

grunt-concurrent>示例：

這是在

grunt.initConfig({
  modernizr: {
    dist: {
      devFile: 'path/to/modernizr.js',
      outputFile: 'path/to/distribution-folder/custom-modernizr.js',
      files: {
        src: ['path/to/scripts/**/*.js', 'path/to/styles/**/*.css']
      }
    }
  }
});

>任務下同時運行的

>> copy，autoprefixer>和test>在concat>任務下同時。 uncss>此選擇為增強基於咕unt的工作流程提供了堅實的基礎。 探索龐大的咕unt插件生態系統，以發現更多的工具來簡化您的開發過程。

以上是五項艱鉅的任務，您會想念的！的詳細內容。更多資訊請關注PHP中文網其他相關文章！