用 grunt-sass（libsass 包装器）咕噜咕噜，编译时间慢答案

【问题标题】：Grunt with grunt-sass (libsass wrapper), slow compile time用 grunt-sass（libsass 包装器）咕噜咕噜，编译时间慢
【发布时间】：2014-07-13 21:03:03
【问题描述】：

当我运行time sassc app.scss app.css时，编译时间非常快： sassc 是 libsass 库上 C 实现的命令行包装器。

real    __0m0.132s__
user    0m0.123s
sys 0m0.007s

但是，当使用 grunt-sass 时，Node.js 是 libsass 的包装器，在我的Gruntfile.js 中，输出速度要慢得多：

Running "watch" task
Waiting...
File "stylesheets/sass/app.scss" changed.
Running "sass:compile" (sass) task
File ./stylesheets/app.css created.

Done, without errors.
Completed in __1.759s__ at Sat May 24 2014 18:17:33 GMT+0200 (CEST) - Waiting...

这是我Gruntfile.js的相关部分，也许我在这里做错了什么：

module.exports = function(grunt) {

    grunt.initConfig({

        project: {
            app: '.',
            sheets: '<%= project.app %>/stylesheets',
            sass: [ '<%= project.sheets %>/sass/app.scss',
            ],
            js: [],
        },
        // The watch task is used to run tasks in response to file changes
        watch: {
            options: {
                livereload: true,
            },
            html: {
                files: ['<%= project.app %>/*.html'],
            },
            css: {
                files: ['<%= project.sheets %>/*.css'],
            },
            sass: {
                files: '<%= project.sheets %>/sass/{,*/}*.{scss,sass}',
                tasks: ['sass:compile'],
                options: {
                    livereload: false,
                },
            },

        },
        sass: {
            compile: {
                options: {
                    style: 'nested',
                },

                files: {
                    '<%= project.sheets %>/app.css' : '<%= project.sheets %>/sass/app.scss',
                }
            }
        },

    }); // The end of grunt.initConfig

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    grunt.registerTask('preview', ['watch', ]);
};

为什么在 Grunt 中我的编译时间如此缓慢？

【问题讨论】：

你有没有弄明白这件事？我也有类似的问题
深入了解我的问题。那是因为我是通过网络存钱的……呃！
@branquito 你有没有解决你的问题？
@TheFrost 不，我没有。我所做的是，我将entr [entrproject.org/] 用于按需编译与sassc 结合使用，这可以提高编译速度，然后在需要时将grunt 用于其他任务。

标签： sass gruntjs

【解决方案1】：

我真的不知道这是否会对您有所帮助，但是当我遇到类似问题时，我发现源映射生成（默认启用）会减慢编译时间。

启用源映射：

$ time grunt sass:dev
grunt sass:dev  12,44s user 0,19s system 100% cpu 12,618 total

禁用源映射：

$ time grunt sass:dev
grunt sass:dev  4,57s user 0,17s system 98% cpu 4,800 total

要禁用源映射，只需添加sourcemap 选项并将其值更改为“无”：

sass: {
    compile: {
        options: {
            style: 'nested',
            sourcemap: 'none',
        },

        files: {
            '<%= project.sheets %>/app.css' : '<%= project.sheets %>/sass/app.scss',
        }
    }
},

参考：grunt-contrib-sass sourcemap

【讨论】：

那是 4.57 秒，我有 2 秒以下，并不满意.. 现在我有了这 130 毫秒，这是我在我的一个 cmets 中描述的。
我在那个项目中有超过 70 个 scss 文件，这可能是对那些 4s 的解释 :-)
一些事情：该属性是驼峰式的：sourceMap。 Docs 将 sourceMap 设置为 'none' 似乎会创建一个名为 'none' 的源映射 :) 将其设置为布尔值 false 应该会阻止它被创建，但这似乎是默认行为

【解决方案2】：

查看time-grunt，您应该将其包括在内以测量您的 sass 任务的实际时间。

这可能与监视任务有关，与 grunt 启动时间或其他有关。因此，看看测量的时间来自哪里以及泄漏在哪里会很有趣。

【讨论】：