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毫秒才是合理的。

这个答案没有为您提供功能齐全的grunt文件，但您应该能够合并这些建议并改善您的工作流程。

第一件事：是否有必要一次编译所有文件？您可能希望将 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个或更多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。这应该可以加快整个编译时间。

我使用不同的方法：

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

关于watch .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
      }

一旦完成较少的编译，我们就会有一个更新的.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
        },
    }

我有一个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 < / em>按需加载它们，但这是另一个故事。您可以在此thread中看到它。

现在，回到你的问题：



是否所有LESS导入和文件都会降低速度？


取决于文件的数量，文件的大小，如果你完全编译它们。如果你将它们拆分成几个较小的任务，我不会认为这是一个例子。



Grunt一般是慢一点吗？


在这种情况下，我猜您没有使用最佳工作流程。 Grunt的速度与吞咽是另一场辩论，也许是在喝几杯啤酒的时候。顺便说一句，这个库并不像你想象的那样有限;）

无论如何，如果你按照上面的步骤进行操作，我认为你的速度会有很大提升。

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

如果有人有不同的意见或其他策略，请分享。我总是渴望改进我的工作流程。

使用Grunt减少编译速度

1 个答案: