3

我想转到 Grunt 来执行我的 LESS 编译。

我的 LESS 文件被分成大约 117 个文件。我总共有大约 170 个导入，因为代码在我的项目的管理和成员区域之间共享。

我正在使用LiveReload，它在大约 500 - 700 毫秒内编译 LESS。浏览器实时重新加载后，总共需要大约 2 秒才能看到结果。

Grunt 编译需要 1.8 秒，因此一旦浏览器实时重新加载，总共大约需要 4 秒。

咕噜声明显变慢。

我正在使用 i7 CPU、SSD 和 16GB RAM 的 iMac 上进行测试。我在本地而不是在 VM 内运行 Grunt。

我的问题是这样的：

  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']);

};

关于如何格式化我的代码以更快地编译的任何建议？或者这是这个图书馆目前的限制？

4

1 回答 1

8

我想编译 170 个文件需要 500-700 毫秒是相当合理的。

这个答案没有为您提供功能齐全的 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。在手表配置中，我有这个部分：

    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 watch 任务，它在我指定的文件夹中查找更改。像这样的东西：

    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 导入和文件是否都会减慢它的速度？

取决于有多少文件，它们有多大，如果你完全编译它们。如果您将它们分成几个较小的任务，我认为情况并非如此。

  1. Grunt 是不是一般都比较慢？

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

无论如何，如果您按照上面的步骤进行操作，我认为您将在速度上获得惊人的提高。

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

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

于 2015-03-27T10:21:07.390 回答