Grunt with Compass 和 Watch 编译速度慢答案

【问题标题】：Grunt with Compass and Watch compiles slowGrunt with Compass 和 Watch 编译速度慢
【发布时间】：2014-01-07 02:36:57
【问题描述】：

Grunt 编译 css 文件需要很长时间，我不确定这是否正常，但普通指南针手表大约需要 5 秒。

所以问题是，是否有任何方法可以加快 Grunt 的编译时间，还是坚持使用 compass watch 更好？

Running "compass:dist" (compass) task
♀unchanged images/sprite-sf580a96666.png
overwrite stylesheets/app.css (3.263s)
unchanged images/sprite-sf580a96666.png
overwrite stylesheets/app_fr.css (3.289s)
Compilation took 11.116s

Running "watch" task
Completed in 13.974s at Wed Dec 18 2013 13:53:05 GMT-0500 (Eastern Standard Time- Waiting...
OK
>> File "scss\_core.scss" changed.

Gruntfile.js：

compass: {
        dist: {
            options: {
            config: 'config.rb'
            }
        }
    },

    watch: {
        sass: {
            files: ['scss/*.scss'],
            tasks: ['compass:dist'],
            options: {
                spawn: false,
            }
        },
        scripts: {
            files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        }
    }

});

【问题讨论】：

标签： performance gruntjs watch grunt-contrib-watch grunt-contrib-compass

【解决方案1】：

除了 Simon 提到的 grunt-contrib-compass 的 watch 选项之外，您还可以使用 grunt-concurrent 来运行两个进程，实际上是 grunt watch 和 compass watch，并排运行：

concurrent: {
    watch: {
        tasks: ['watch', 'compass:watch'],
        options: {
            logConcurrentOutput: true
        }
    }
},
compass: {
    watch: {
        options: {
            watch: true
        }
    }
}

如果您想在构建、部署或其他任何需要 compile 而不是 watch 的情况下从 Grunt 运行 compass，则需要创建第二个 compass 任务并使用它：

compass: {
    // Compass grunt module requires a named target property with options.
    compile: {
        options: {}
    }
}

【讨论】：

虽然这适用于重新加载更改的客户端文件，但如果您在监视任务中有它，它将无法重新加载 expressjs。
@gerasalus 我认为您需要将livereload: true 作为watch 任务的选项添加。见github.com/gruntjs/grunt-contrib-watch#optionslivereload。

【解决方案2】：

好吧，你can watch using the Grunt-contrib-compass watch option。这将产生指南针手表，因此您将获得更好的性能。虽然这不允许您观看多种类型的文件（例如，如果您还观看 .coffee 文件或始终重建 js 等）。

如果您绝对需要grunt-contrib-watch，请确保使用 grunt 任务激活 sass 缓存。从您粘贴在这里的配置来看，它看起来是这样。但是缓存问题通常是 Compass 编译时间过长的原因；所以如果我是你，我会仔细检查我的 Gruntfile.js。

此外，许多精灵和图像处理方法可能需要相当长的时间来处理。

【讨论】：

【解决方案3】：

可能有点晚了，但万一这对任何人都有帮助：

我发现 grunt-contrib-watch 和 sass 的性能也很差。解决这个问题的最好方法似乎是使用不同的手表插件。我发现grunt-watch-nospawn（与 grunt-contrib-watch 插件相反）编译 sass 的速度要快得多。非常明显 - 我看到大约两秒钟的改进。

如果您想进一步调整速度，可以使用 grunt-sass 代替 grunt-contrib-sass，后者使用 libsass 来提供另一个速度提升。

这与自动前缀组合，例如。 nDmitry 的（无法链接，没有代表）这应该填补因省略 Compass 而留下的功能空白。

希望对您有所帮助。

【讨论】：

晚会参加这个聚会，但grunt-contrib-watch has a spawn option。不是 100% 确定将其设置为 false 是否与 grunt-watch-nospawn 完全相同，但听起来很相似。
添加spawn: false 和grunt-contrib-watch 对我有用，平均编译时间从4-5 秒到0.05 秒。
是的，使用此选项它对文件更改的反应更快，并且似乎也可以更快地处理文件

【解决方案4】：

我知道这个问题在这一点上已经有几年了，但我想我会添加另一个潜在的原因/解决方案。

首先，尝试使用--verbose 启动您的 grunt 服务器，并观察您的 sass 任务在哪里花费了大部分时间。有一些插件会报告每个部分的品尝时间，但对我来说，只需查看--verbose 输出就可以非常清楚地知道延迟在哪里。对我来说，这不是真正的 sass 任务，而是加载不必要的依赖项。

正如 Grunt 的 GitHub 存储库上的 this 问题所述，某些任务可能需要很长时间才能完成的一个原因是 Grunt 每次运行时都会加载所有任务。因此，即使 grunt-contrib-watch 仅在您更改 sass 文件时运行 compass:dist 任务，grunt 仍在加载所有任务及其依赖项。

现在有一个名为jit-grunt（或npm）的插件可以解决这个问题，并且只加载运行任务所需的内容。这有助于我更快地完成指南针任务。

【讨论】：