編譯速度慢Grunt

我想移到Grunt來執行我的LESS編譯。編譯速度慢Grunt

我的LESS文件被分成大約117個文件。由於代碼是在我的項目的管理員和成員區域之間共享的，因此總共約有170個導入。

我使用的是LiveReload，它在大約500-700ms內編譯LESS。瀏覽器重新加載後，總共需要2秒才能看到結果。

Grunt需要1.8秒來編譯，所以一旦瀏覽器重新加載，它總共需要4秒。

Grunt明顯變慢。

我正在使用i7 CPU，SSD和16GB RAM在iMac上進行測試。我在本地運行Grunt，而不是在虛擬機內運行。

我的問題是這樣的：

是否所有的減進口和文件減緩下來？
Grunt一般情況下會慢一些嗎？

我的package.json文件：

{ 
    "name": "Test Package", 
    "version": "1.0.0", 
    "devDependencies": { 
    "grunt": "~0.4.5", 
    "grunt-contrib-less": "*" 
    }, 
    "dependencies": { 
    "time-grunt": "*" 
    } 
}

而且我Gruntfile.js：

module.exports = function(grunt) { 

    // Measures the time each task takes 
    require('time-grunt')(grunt); 

    // Project configuration. 
    grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    less: { 
     all: { 
      files: { 
       "css/style.css": "less/style.less", 
       "css/admin/style.css": "less/admin/style.less", 
       "css/admin/spectrum/spectrum.css": "less/plugins/spectrum/spectrum.less" 
      }, 
      } 
     } 
    }); 

    // Load the plugins 
    grunt.loadNpmTasks('grunt-contrib-less'); 

    // Default task(s). 
    grunt.registerTask('default', ['less']); 

};

我如何能格式化我的代碼任何建議編譯更快？或者這是目前這個圖書館的限制嗎？

來源

2015-03-24 Ben Sinclair

我想500-700ms編譯170個文件是相當合理的。

這個答案並不爲你提供一個全功能的gruntfile但你應該能夠把這些建議和改善工作流程。

第一件事：是否有必要編譯所有的文件一次？你可能想分割少任務在2個部分，而不是全部：一個用於管理員和一個用於成員區（假設你沒有同時在兩個部分工作）。喜歡的東西：

less: { 
     members: { 
      options: { 
       compress: true //maybe 
      }, 
      files: { 
       "app/members.css": "members.less" 
      } 
     }, 
     admin: { 
      options: { 
       compress: true //maybe 
      }, 
      files: { 
       "app/admin.css": "admin.less" 
      } 
     }, 
    }

當然，你可以根據你的項目結構更加分裂的部分。

然後創建2個或更多咕嚕任務選擇性編譯：

grunt.registerTask('a', ['less:admin']); //let's call it 'a' - from admin 
grunt.registerTask('m', ['less:members']); // 'm' for members

，並會根據您需要編譯什麼運行grunt a或grunt m。這應該加快整體編譯時間。

我用了不同的方法，但是：

我使用手錶任務查找那些被修改的文件.LESS

值班.LESS文件改變了，我只做編譯和不是一個liveReload。在腕錶配置我有這個節：

less: { 
     options: { 
      livereload: false 
     }, 
     files: 'blah-blah.less', //use your paths here 
     tasks: ['less:dev'] //less:members or less:admin in your case 
     }

一旦少編譯完成後我們有再次觸發對CSS文件表更新.css文件。再次，在腕錶配置我有這個節：

css: { 
     files: ['blah-blah.css'], //the .css file resulted from compilation 
     options: { 
      livereload: true, //this is the most important 
      spawn: false //you may also need this 
     }, 
    }

我有一個咕嚕手錶的任務，尋找我指定的文件夾中的變化。事情是這樣的：
```
grunt.registerTask('watch', ['other tasks', 'connect', 'watch']); 
```
注意，我還使用連接運行一個小型的http服務器，但它可能不會在這裏如此。現在

，會發生什麼情況是這樣的：

開始發展之前，我跑咕嚕手錶。它啓動服務器，它看起來對.LESS文件
文件的變化，每當.LESS文件被更改，被編譯和.css文件被更新。需要注意的是，瀏覽器不會刷新尚未
時.css文件被更改了瀏覽器不刷新，但沒有加載整個HTML，僅應用導致樣式表。

因此，如果您在任何時間任何.LESS文件進行更改，你會看到它反映在您的瀏覽器不重新加載整個頁面，節省您的其它秒爲好。

這樣，當你想編譯.LESS文件，因爲呼嚕聲已經在運行，你也避免了2秒咕嚕編譯時間。

在我的案例彙編也是緩慢的，但我用定時器咕嚕（像你這樣做），並發現最浪費的時間是在加載的依賴，所以我用的JIT咕嚕加載它們的需求，但這是另一回事。你可以在thread看到它。

現在，回到您的問題：

是否所有的減進口和文件減緩下來？

取決於有多少文件，他們是多麼大，如果完全編譯它們。如果你將它們分成幾個較小的任務，我認爲在這裏不是這種情況。

Grunt一般情況下會慢嗎？

不是在這種情況下，我猜你沒有使用最佳的工作流程。咕嚕的速度與吞噬是另一場辯論，也許有一些啤酒。順便說一句，這圖書館不像你想像的那樣有限;）

無論如何，如果你按照上面的步驟，我想你會得到一個真棒速度提高。

希望這可以幫助別人！

如果有人有不同的意見或其他策略，請分享。我總是渴望改善我的工作流程。

來源

2015-03-27 10:21:07 bosch

編譯速度慢Grunt

回答

相關問題