使用Grunt減少編譯速度

Question

我想轉移到Grunt來執行我的LESS編譯。

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

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

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

Grunt明顯變慢了。

我正在測試帶有i7 CPU，SSD和16GB RAM的iMac。 我在本地運行Grunt而不是在VM中運行。

我的問題是：

1. 是否所有LESS導入和文件都減慢了？
2. 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']);

};

關於如何格式化我的代碼以便更快地編譯的任何建議？ 或者這是目前這個庫的限制？

Answer 1

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

這個答案沒有為您提供功能齊全的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任務來有選擇地編譯：

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。 在watch配置中我有這個部分：

   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文件上的監視。 再次，在watch配置中我有這個部分：

   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監視任務，在我指定的文件夾中查找更改。 像這樣的東西：

   grunt.registerTask('watch', ['other tasks', 'connect', 'watch']); 

  請注意，我也使用connect來運行一個小的http服務器，但這可能不是這種情況。

現在，會發生什么：

• 在開始開發之前我運行grunt watch 。 它啟動服務器並在.less文件上查找文件更改
• 每當一個.less文件被更改時，它就會被編譯並且.css文件會被更新。 請注意，瀏覽器尚未刷新
• 當.css文件被更改時，瀏覽器會刷新但不加載整個html，只應用生成的樣式表。

因此，如果您在任何.less文件中進行更改，您將立即看到它在您的瀏覽器中反映而不重新加載整個頁面 ，同時也為您節省了其他時間。

這樣，當你想編譯.less文件時，你也可以避免2秒的grunt編譯時間，因為grunt已經在運行了。

在我的情況下，編譯也很慢，但我使用了timer-grunt （就像你一樣），並發現大多數浪費時間是在加載依賴項，所以我使用jit-grunt按需加載它們，但這是另一個故事。 你可以在這個帖子中看到它。

現在，回到你的問題：

1. 是否所有LESS導入和文件都減慢了？

如果你完全編譯它們，取決於有多少文件，它們有多大。 如果你把它們拆分成幾個較小的任務，我認為不是這樣的。

2. Grunt一般只是慢一點嗎？

不是在這種情況下，我猜你沒有使用最佳的工作流程。 Grunt的速度與gulp是另一個爭論，也許是在喝幾杯啤酒的時候。 順便說一句，這個圖書館不像你想象的那樣有限;）

無論如何，如果你按照上面的步驟，我認為你將獲得一個驚人的速度提升。

希望這也有助於其他人！

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