使用Grunt、Compass和Watch合并编译速度慢的解决方案

Question

Grunt编译css文件需要很长时间，我不确定这是否正常，但常规的compass watch大约需要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,
            }
        }
    }

});

- xphong

Answer 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: {}
    }
}

- Henry Blyth

---

虽然这对于重新加载已更改的客户端文件有效，但如果您在监视任务中有expressjs，则无法重新加载它。 - gerasalus

@gerasalus 我认为你需要将 livereload: true 作为 watch 任务的选项添加进去。请参考 https://github.com/gruntjs/grunt-contrib-watch#optionslivereload。 - Henry Blyth

Answer 2

嗯，你可以使用Grunt-contrib-compass的watch选项来观看。这将产生罗盘观看，因此您将获得更好的性能。虽然这不会允许您观看多种类型的文件（例如，如果您还观看.coffee文件或始终重新构建js等）。

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

此外，大量的精灵和图像处理方法可能需要很长时间进行处理。

- Simon Boudrias

Answer 3

也许有点晚了，但如果这能帮到任何人：

我发现grunt-contrib-watch和sass的性能都很差。解决这个问题的最好方法似乎是使用不同的watch插件。我发现与grunt-contrib-watch插件相比，grunt-watch-nospawn更快地编译sass。非常显著-我看到了大约两秒钟的改进。

如果你想进一步调整速度，可以使用grunt-sass代替grunt-contrib-sass，它使用libsass提供另一个速度增加。

再加上自动前缀，例如nDmitry的（无法链接，没有声望），这应该填补省略Compass后留下的功能空白。

希望这有所帮助。

- liam

---

虽然来晚了一些，但是 grunt-contrib-watch 有一个 spawn 选项。不确定将其设置为 false 是否与 grunt-watch-nospawn 完全相同，但听起来很相似。 - Paul Sham

在 grunt-contrib-watch 中添加 spawn: false 对我来说起了很大的作用，平均编译时间从 4-5 秒降低到了 0.05 秒。 - Ian Dunn

是的，使用这个选项可以更快地响应文件变化，并且似乎也能更快地处理文件。 - cincplug

Answer 4

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

首先，尝试使用--verbose启动你的grunt服务器，并观察你的sass任务花费大部分时间的地方。有一些插件会报告每个任务所需的时间，但对我来说，仅仅观察--verbose输出就很清楚延迟出现的位置了。对我而言，实际上不是sass任务本身，而是加载不必要的依赖项。

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

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

- graywithanA