Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grunt with grunt-sass (libsass wrapper), slow compile time

Tags:

sass

gruntjs

When I run time sassc app.scss app.css, the compilation time is very fast: sassc is a commandline wrapper for C implementation on libsass library.

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

However when using grunt-sass which is Node.js wrapper for libsass, inside my Gruntfile.js, I get much slower output:

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...

and here are the relevant parts of my Gruntfile.js, maybe I did here something wrong:

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

Why am I getting such a slow compilation time, in Grunt?

like image 987
branquito Avatar asked Oct 20 '22 07:10

branquito


1 Answers

I don't really know if this will help you, but when I had a similar problem, I found that sourcemap generation (which is enabled by default) will slow down compilation time.

With sourcemap enabled:

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

With sourcemap disabled:

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

To disable sourcemap, just add sourcemap option and change its value to 'none':

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

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

Reference: grunt-contrib-sass sourcemap

like image 76
Alexandru Guzinschi Avatar answered Oct 27 '22 11:10

Alexandru Guzinschi