使用 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 中。

我的问题是：

是否所有 LESS 导入和文件都减慢了速度？
一般来说，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-700 毫秒是很合理的。

此答案并未为您提供功能齐全的 g运行tfile，但您应该能够采纳这些建议并改进您的工作流程。

第一件事：是否需要一次编译所有文件？您可能希望将 less 任务分成 2 个部分而不是 all：一个用于管理员区域，一个用于成员区域（假设您不是同时处理这两个部分）。类似于：

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

当然，你还可以根据你的项目结构来划分更多的部分。

然后你创建2个或更多g运行t任务来选择性编译:

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

和你运行grunt a或grunt m根据你需要编译。这应该会加快整体编译时间。

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

我使用 watch 任务来查找修改过的 .less 文件

注意 .less 文件已更改，我只进行编译，不进行 liveReload。在 watch config 我有这个部分：

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

一旦 less 编译完成，我们就有了一个更新的 .css 文件，它会再次触发对 css 文件的监视。同样，在 watch config 我有这个部分：

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
        },
    }

我有一个 g运行t watch 任务，它在我指定的文件夹中查找更改。像这样：
```
grunt.registerTask('watch', ['other tasks', 'connect', 'watch']); 
```
请注意，我还使用 connect 连接到运行小型 http 服务器，但这里可能不是这种情况。

现在，发生的事情是这样的：

在开始开发之前我运行g运行t watch。它启动服务器并查找 .less 文件上的文件更改
只要 .less 文件发生变化，它就会被编译，并且 .css 文件也会被更新。请注意，浏览器尚未刷新
当 .css 文件被更改时，浏览器会刷新但不会加载整个 html，仅应用生成的样式表。

因此，如果您立即对任何 .less 文件进行更改，您将看到它反映在您的浏览器中 而无需重新加载整个页面，也为您节省了其他时间.

这样当你想编译 .less 文件时你也可以避免 2 秒的 g运行t 编译时间，因为 g运行t 已经是运行ning.

在我的例子中，编译也很慢，但我使用了 timer-g运行t（就像你一样），发现大部分时间浪费在加载上依赖项，所以我使用 jit-g运行t 按需加载它们，但这是另一回事了。你可以在这个thread.

中看到

现在，回到您的问题：

Are all the LESS imports and files slowing it down?

要看文件有多少，文件有多大，如果全部编译的话。如果您将它们分成几个较小的任务，我认为这里不是这种情况。

Is Grunt just slower in general?

在这种情况下不是，我猜你没有使用最佳工作流程。 G运行t 的速度 vs. gulp 是另一场辩论，也许是在喝几杯啤酒的时候。顺便说一句，这个库并不像你想象的那么有限 ;)

无论如何，如果您按照上述步骤操作，我认为您的速度会得到很大的提高。

希望这对其他人也有帮助！

如有不同意见或其他攻略，欢迎交流。我总是渴望改进我的工作流程。

使用 Grunt 编译速度变慢

Less compiling slow with Grunt

performance

gruntjs

grunt-contrib-less