I use sass (triggered by a gulp task) to generate my css files. I recently formatted my computed and this task stopped working.
var sass = require('gulp-ruby-sass');
var config = require('../config');
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(gulp.dest(config.build.cssDir));
});
This task used to work fine before I reinstalled my OS (Windows 8.1). Now after I run this task there is no visible errors, but no css files are created.
So, the question is:
Why did my gulp task stopped generating my css files?
Your gulp task is fine.
gulp-ruby-sass uses, by default, the gem sass to compile your scss files. Since you recently formatted your computer I bet you installed the last version of Ruby Installer for Windows. I made some tests and I noticed that sass doesn’t seem to work on Windows while using Ruby 2.2.2. The sass gem works just fine on Ruby 2.2 on Ubuntu and OS X.
If that’s an option, I suggest that you downgrade from Ruby 2.2.x to Ruby 2.1.6 and that should fix your problem.
In case it doesn’t you could use gulp-debug to check your stream and start from there.
gulp.task('styles', ['copy'], function() {
gulp.src(config.sources.sass)
.pipe(debug({title: 'Before sass:'}))
.pipe(sass({ style: config.isProduction ? 'compressed' : 'expanded' }))
.pipe(debug({title: 'After sass:'}))
.pipe(gulp.dest(config.build.cssDir));
});
If you can't downgrade your ruby version, you could use gulp-sass instead of gulp-ruby-sass. Gulp sass doesn't require ruby at all, as it uses a wrapper made in node for a C/C++ library - libsass.
You could also edit your post and include your gulp-ruby-sass version (or your package.json) and also your nodejs version.
Related
do I have to compile with compass in order to use it framework ?
is it possible to use compass framework and compile sass with an other tool like gulp ?
You can use gulp-compass to compile compass.
Main thing about compass vs sass is being able to use #include x(y); to get browser prefixes (at least from my experience). You could also use gulp-autoprefixer and gulp-sass to accomplish something similar.
I use .scss files (because I like semi-colons) but a sass builder with my gulp file:
gulp.task('sass', function() {
return gulp.src(settings.sass.input)
.pipe(sourcemaps.init())
.pipe(sass(settings.sass.options).on('error', errorLog))
.pipe(autoprefixer(settings.sass.autoprefixer).on('error', errorLog))
.pipe(sourcemaps.write(settings.maps, {
sourceMappingURL: file => {
return file.relative + '.map';
}
}))
.pipe(gulp.dest(settings.sass.output))
.resume();
});
I used to use compass, then it started taking 10-15 seconds to compile, and ended up switching back to just using sass (though with a .scss file type).
I just started using gulp-sass, is there a "easy" way to find out what version of Sass, that is being used?
Not that I think it matters too much but I'm using gulp-sass in Visual Studio 2015 (CTP6).
I need to know because I want to use a Sass mixin which requires a certain minimum version of Sass.
At the moment, if I want to find out what version of Sass is being used, I try to follow the trail like this, gulp-sass is a wrapper for node-sass which in its turn is providing Node bindings for libsass, which is a C compiler for Sass.
So to find out the version of Sass being used in my environment, I have to follow the chain and try to work out which version is used in each step and what version it then uses of the next step.
Surely there must be an easier way?
We can agree that, from node-sass you can get the versions using :
var sass = require('node-sass');
console.log(sass.info);
From gulp-sass, you can send data which will be executed by node-sass. So something like this should do the trick :
var gulp = require('gulp');
var sass = require('gulp-sass');
console.log(sass.info);
It's going to be the .info() from node-sass who get's called in the end, giving you both it's version and libsass's version.
Look in your node_modules/grunt-sass/node_modules/node-sass/package.json
"libsass": "version"
You may find out Sass version in Node-sass right from the terminal by the next line
node -e 'console.log(require("node-sass").info)'
At a cmd prompt, you can try node-sass -version
cmd: node-sass -version
node-sass 4.14.1 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
I've just started using Laravel 5.0 and noticed it comes installed with Gulp and it's own library called Elixir. Looks good, however I'm having trouble including libraries such as Susy and Breakpoint to run with it.
In a typical Gulp setup I would pipe it in my styles task like this using gulp-ruby-sass:
.pipe(sass({ style: 'compact', require: ['susy', 'breakpoint'], "sourcemap=none": true }))
However, I've been unable to do something similar with Elixir. Has anyone come across a solution for this?
Currently the Elixir style task in my gulp file is like so:
elixir(function(mix) {
mix.sass('main.scss');});
Any advice would be greatly appreciated.
Thanks!
You can pass in node-sass options as the third parameter.
elixir.extend('sass', function(src, output, options)
So something like...
elixir(function(mix) {
mix.sass('main.scss', undefined, {
outputStyle: 'compact'
});
});
It doesn't seem like susy CSS framework work out of the box with gulp-sass in elixir. I had to install the "laravel-elixir-compas" module (https://github.com/rynocouse/laravel-elixir-compass). The Compass extension to elixir allows you to use susy and breakpoint.
You just need to define the import in config.rb
require 'breakpoint'
require 'susy'
And then you should be good to go..
I had "Compass Compilation Failed!" error which I was able to fixed by simply specifying the options for compass.mix() (refer to https://github.com/rynocouse/laravel-elixir-compass for options)
Hope that helps anyone with a similar issue
I'm using gulp-compass to compile my scss to css using gulp task. I'm running on Windows 7.
My Gulp task:
gulp.task('styles', function() {
gulp.src('./sass/design.scss')
.pipe(compass({
config_file: './config.rb',
css: 'stylesheets',
sass: 'sass',
require: ['susy', 'breakpoint']
}))
.pipe(gulp.dest('dest/css'));
});
I get the following error message:
Error: You need to have Ruby and Compass installed and in your system PATH for this task to work.
I have Ruby and Compass installed and in my system PATH so I can't see what's the problem.
I tried re-installing both Ruby and Compass and it didn't help either.
When I tried to use the same task on a Mac system it worked fine.
Replacing the gulp-compass plugin to gulp-ruby-sass is not an option due to a bug they have which block me from using certain sass features I need to use.
I don't have Windows 7 environment. I think you must add the following path to your system PATH.
C:\Ruby193\bin
http://www.tutorialspoint.com/ruby/ruby_installation_windows.htm
http://rubyonwindowsguides.github.io/book/ch01-01.html
I encountered this issue and resolved it by removing double quotes from my system path.
I had an entry for:
c:\"Program Files"\Perforce;
I changed it to:
c:\Program Files\Perforce;
The script apparently can't handle double quotes.
You can also get around this by explicitly adding the ruby folder to the "External Web Tools" locations but fixing the path is a better solution.
I have a very simple gulp based test environment using only sass and the susy2 gem - no compass because compass is no longer a dependency of susy 2
The error i'm getting is
...sass/susy/language/susy/settings:8:error: error reading values after container
line 8 of the problem file, susy's settings is as follows:
#include susy-defaults((
container: auto, <- line 8
math: fluid,
output: float,
container-position: center,
gutter-position: after,
global-box-sizing: content-box,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
inspect: false,
),
));
I'm using sass version 3.4, which should support the sass maps syntax, and gulp-sass version 0.7.3. along with susy 2.1.3.
Any idea why im getting this error?
You must update SASS to later than 3.3. Current version of SASS as of this writing is 3.4.1 Selective Steve. Type sass -v in your terminal (assuming OSX) to see what version of SASS you are currently on.
gulp-sass is actually a wrapper around Node-sass, which again is a library
that provides binding for Node.js to libsass, the C version of the popular
stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and
automatically via a connect middleware.
As this node-sass page says:
"..The libsass library is not currently at feature parity with the 3.2 Ruby Gem
that most Sass users will use, and has little-to-no support for 3.3 syntax.
While we try our best to maintain feature parity with libsass, we can not
enable features that have not been implemented in libsass yet."
So it does not matter which version of sass you have installed,
because gulp-sass is not using it.
The problem that arises with susy2 is that of, libsass currently not
supporting some of features susy2 exposes.
The way I resolved this issue, was using
gulp-ruby-sass instead of
gulp-sass, which is slower but more feature-rich. And will work with Susy2.