How to implement Compass, Sass to a node.js project? - ruby

i have recently implemented the grunt task runner on my Node.js project and i'm using grunt-contrib-compass and grunt-contrib-watch in order to compile my sass and compass code through grunt whenever i make any changes.
My grunt file is like this:-
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
sassDir: 'public/sass',
cssDir: 'public/css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
I'm using windows and whenever i run grunt it watches for my sass files but whenever i make a change to these files i get this error:-
Warning: Couldn't find the 'compass.bat' binary. Make sure it's installed and in you $PATH Use --force to continue
I have installed ruby and compass through the ruby command prompt and the compass version is 1.0.3 and my gem installer version is 2.4.6. I have also tried including c:\Ruby200\bin to my Environmental variables and yes grunt-contrib-compass is installed in my Node.js project. I have tried everything, if anyone else has any experience in this i would love to hear from you. Thanks a lot.

You just need to install Ruby and follow this steps:
npm install grunt-contrib-compass
Reinstall Ruby gem installer 1.9.3 with checked all checkbox
On ruby console - gem install sass
On ruby console - gem install compass

Related

gulp-compass asking for Ruby and Compass in PATH when they are already there

I'm trying to get gulp-compass to work on my Debian linux but am getting an error message stating that Ruby and Compass must be in the path. I am a bit of a beginner when it comes to Gulp so is probably me being stupid.
The following is the exact error message I get when running the task I create in my Gulpfile:
events.js:85
throw er; // Unhandled 'error' event
^
Error: You need to have Ruby and Compass installed and in your system PATH for this task to work.
Process finished with exit code 1
I've looked through other similar questions that suggest doing a gem install compass and a gem install sass but neither seem to work for me.
My Gulpfile is as follows:
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('stylesheets', function(){
return gulp.src('**/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('css'));
});
I can runruby -v and compass -v I can see that these are correctly in my path and doing an echo $PATH shows that ruby is definitely there.
I am wondering if it is a problem to do with me installing ruby with RVM or the fact that I am using Bundler to install the gems in my project. My Gemfile is as follows:
source 'https://rubygems.org'
gem 'susy'
gem 'compass'
gem 'breakpoint'
I have installed the gems with bundle install and have also tried the bundle_exec: true option in gulp-compass (though truth be told I don't really know what this is for not being a Bundler expert). I have tried re-installing Ruby.
Has anyone any idea as to why I am getting the above error message? I've never had errors like this when doing similar with Grunt.
I've finally managed to get round this. I uninstalled RVM with rvm implode and then installed Ruby again with a regular apt-get install ruby.
Once I did this it all worked fine. I had to make a minor tweak to my gulpfile so it is now:
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('stylesheets', function(){
console.log();
return gulp.src('sass/**/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('css'));
});
This isn't exactly an ideal as I'm now stuck with an older version of Ruby (ruby 2.1.5p273) when the current stable release (at time of writing) is 2.2.2. I'd rather use RVM but this will do for now.

Sass builds/compiles very slowly (also using Compass) [duplicate]

Since updated to the latest version of Compass it now takes 4.294s to compile.
I need this version of compass due to needed susy
Running "sass:dist" (sass) task
Running "watch" task
Completed in 4.294s at Tue Sep 30 2014 23:38:01 GMT+0200 (W. Europe Daylight Time) - Waiting...`
// Running versions
compass -v 1.0.1
susy -v 2.1.3
sass -v 3.4.4
I compile with grunt:
sass: {
dist: {
options: {
style: 'compressed',
require: 'susy',
compass: true
},
files: {
'<%= yeoman.css %>/style.css': '<%= yeoman.sass %>/style.scss'
}
}
}
How can I speed up the compile time? Is it something wrong with my config?
It's not a config problem, it's a known performance regression in the latest Sass & Compass.
Having the same problem, pulling my hair out to find a solution but and finally found one; It is to downgrade.
From 2mins+ of compiling to 25s.
Here's How:
You need to install these (if your using OSX):
http://guides.rubygems.org/ssl-certificate-update/#installing-using-update-packages
Install Bundle
gem install bundle
Make a Gemfile in your root folder, name it "Gemfile"
# frozen_string_literal: true
source "https://rubygems.org"
# gem "rails"
gem 'sass', "3.2.9"
gem 'sass-globbing', ">= 1.1.0"
gem 'compass', "0.12.2"
gem 'breakpoint', "2.0.5"
gem 'singularitygs', "< 2.0.0"
gem 'bootstrap-sass'
Install GemFile and update it
bundle install && bundle update
Then to run compass with bundle
time bundle exec compass compile <path>
I'm keeping my versions like these for a while, until they fix the performance issues. Hope it helps!

Gulp missing the SASS executable

I'm working with gulp, I'm trying to install packages and the only way to install gulp on windows is to type npm install -g gulp#3.8.7 because new versions print me in the console some errors about the v8flags package.
So I'm trying to compile sass through Gulp. I've a gulpfile.js:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
return sass('css/main.scss')
.on('error', function (err) {
console.error('Error', err.message);
})
.pipe(gulp.dest('css/main.css'));
});
But Everytime I type "gulp sass" the console prints:
Error Missing the SASS executable. Please install and make it available on your PATH.
I have included the directory of my ruby bin in the PATH var (system variables within Enviroment variables).
I'm on Windows 8.1
ruby -v
ruby 1.9.3p545 (2014-02-24) [i386-mingw32]
node -v
v0.10.29
npm -v
1.4.14
sass -v
Sass 3.4.8 (Selective Steve)
I had the same problem. I did
sudo gem install sass
and that added the sass executable to my path.

Compass taking too long to compile

Since updated to the latest version of Compass it now takes 4.294s to compile.
I need this version of compass due to needed susy
Running "sass:dist" (sass) task
Running "watch" task
Completed in 4.294s at Tue Sep 30 2014 23:38:01 GMT+0200 (W. Europe Daylight Time) - Waiting...`
// Running versions
compass -v 1.0.1
susy -v 2.1.3
sass -v 3.4.4
I compile with grunt:
sass: {
dist: {
options: {
style: 'compressed',
require: 'susy',
compass: true
},
files: {
'<%= yeoman.css %>/style.css': '<%= yeoman.sass %>/style.scss'
}
}
}
How can I speed up the compile time? Is it something wrong with my config?
It's not a config problem, it's a known performance regression in the latest Sass & Compass.
Having the same problem, pulling my hair out to find a solution but and finally found one; It is to downgrade.
From 2mins+ of compiling to 25s.
Here's How:
You need to install these (if your using OSX):
http://guides.rubygems.org/ssl-certificate-update/#installing-using-update-packages
Install Bundle
gem install bundle
Make a Gemfile in your root folder, name it "Gemfile"
# frozen_string_literal: true
source "https://rubygems.org"
# gem "rails"
gem 'sass', "3.2.9"
gem 'sass-globbing', ">= 1.1.0"
gem 'compass', "0.12.2"
gem 'breakpoint', "2.0.5"
gem 'singularitygs', "< 2.0.0"
gem 'bootstrap-sass'
Install GemFile and update it
bundle install && bundle update
Then to run compass with bundle
time bundle exec compass compile <path>
I'm keeping my versions like these for a while, until they fix the performance issues. Hope it helps!

grunt-contrib-compass doesn't execute task

I recently changed my mac. I used to worked with grunt and grunt-contrib-compass without issues but since i changed, compass doesn't work anymore.
I installed every tools i needed (ruby, compass, sass, xcode, command line tools, grunt ,etc ..) and kept the same gruntfile.js and configuration. When i run grunt, every task are executabe, even compass, but grunt-contrib-compass do nothing, it show this :
Running "compass:dev" (compass) task
//nothing
Running "csslint:dev" (csslint) task
>>1 file lint free.
// csslint, like the others plugins, works fine
The issue doesn't from my grunt configuration because in the same folder, grunt-contrib-compass work in my old mac.
I noticed xcodebuild doesn't run during grunt's execution.
Any idea where is my problem ?
Have you installed both Compass and SASS?
You should not install SASS if you have installed Compass:
// * for Compass, run `npm install --save-dev grunt-contrib-compass`
// This depends on the ruby compass gem, which can be installed with
// `gem install compass`
// You should not install SASS if you have installed Compass.

Resources