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?
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.
$ 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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With