sindresorhus / gulp-ruby-sass

Compile Sass to CSS with Ruby Sass

Deprecated

This project is deprecated because Ruby Sass is deprecated. Switch to gulp-sass.

---

gulp-ruby-sass

Compiles Sass with the Sass gem and pipes the results into a gulp stream.
To compile Sass with libsass, use gulp-sass

Install

$ npm install --save-dev gulp-ruby-sass

Requires Sass >=3.4.

Usage

sass(source, [options])

Use gulp-ruby-sass instead of gulp.src to compile Sass files.

const gulp = require('gulp');
const sass = require('gulp-ruby-sass');

gulp.task('sass', () =>
	sass('source/file.scss')
		.on('error', sass.logError)
		.pipe(gulp.dest('result'))
);

source

Type: string string[]

File or glob pattern (source/**/*.scss) to compile. Ignores files prefixed with an underscore. Directory sources are not supported.

options

Type: Object

Object containing plugin and Sass options.

bundleExec

Type: boolean
Default: false

Run Sass with bundle exec.

sourcemap

Type: boolean
Default: false

Initialize and pass Sass sourcemaps to gulp-sourcemaps. Note this option replaces Sass's sourcemap option.

const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', () =>
	sass('source/file.scss', {sourcemap: true})
		.on('error', sass.logError)
		// for inline sourcemaps
		.pipe(sourcemaps.write())
		// for file sourcemaps
		.pipe(sourcemaps.write('maps', {
			includeContent: false,
			sourceRoot: 'source'
		}))
		.pipe(gulp.dest('result'))
);

base

Type: string

Identical to gulp.src's base option.

tempDir

Type: string
Default: System temp directory

This plugin compiles Sass files to a temporary directory before pushing them through the stream. Use tempDir to choose an alternate directory if you aren't able to use the default OS temporary directory.

emitCompileError

Type: boolean
Default: false

Emit a gulp error when Sass compilation fails.

verbose

Type: boolean
Default: false

Log the spawned Sass or Bundler command. Useful for debugging.

Sass options

Any additional options are passed directly to the Sass executable. The options are camelCase versions of Sass's options parsed by dargs.

Run sass -h for a complete list of Sass options.

gulp.task('sass', () =>
	sass('source/file.scss', {
			precision: 6,
			stopOnError: true,
			cacheLocation: './',
			loadPath: [ 'library', '../../shared-components' ]
		})
		.on('error', sass.logError)
		.pipe(gulp.dest('result'))
);

sass.logError(err)

Convenience function for pretty error logging.

sass.clearCache([tempDir])

In rare cases you may need to clear gulp-ruby-sass's cache. This sync function deletes all files used for Sass caching. If you've set a custom temporary directory in your task you must pass it to clearCache.

Issues

This plugin wraps the Sass gem for the gulp build system. It does not alter Sass's output in any way. Any issues with Sass output should be reported to the Sass issue tracker.

Before submitting an issue please read the contributing guidelines.

License

MIT © Sindre Sorhus

gulp-ruby-sass's Issues

Use --update on directory instead of running sass on each file

This might have a positive effect on speed, especially for large sass projects. I'm using this plugin as a template for another plugin I'm playing around with, so after I grok what's going on here I'll try a PR.

Failing to generate source map when importing a partial

Here's a simplified test case:

app.scss

@import "partial";

_partial.scss

// must contain some outputable CSS
.foo { color: blue; }

gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass');
gulp.task('default', function() {
    gulp.src('scss/app.scss')
        .pipe(sass({ sourcemap: true }))
        .pipe(gulp.dest('public/css'));
});

Throws:

WARNING: Couldn't determine public URL for "path/to/_partial.scss" while generating sourcemap.
Without a public URL, there's nothing for the source map to link to.

Using Sass 3.3.5, gulp-ruby-sass 0.4.3, gulp 3.6.2, node 0.10.26.

Is this a bug? Am I overlooking something? Any possible workaround?

Thanks.

css files do not reflect the sass folder structure

all files are outputed flat into the css output directory. the native sass behavior is to keep the folder structure of the scss files and put the css files into those folders

Sass Globbing Won't compile w/gulp-ruby-sass

Currently :

• Compass v1.0.0.alpha.18
• Sass v3.3.0
• gulp-ruby-sass v0.4.0

Won't play nice with sass-globbing v1.1.0. My setup works 100% elsewhere using the versions of Sass and Compass above plus Sass Globbing mentioned w/Grunt. This setup with gulp however fails to compile.

0.6.0

• We should also put some number together on how much speed improvements it has.
  Two to three times as fast, depending on complexity of the project.
• Fix source maps, if they were easy
• Really fix source maps.
• Tweet about release and perf numbers.
• Have a glass of water. Well deserved.
  Eight glasses a day.

Relative path stripping

Hi ;

I think we've got some relative path stripping issue.

I have to work on that kind of file structure:

/Styles
/Styles/FR
/Styles/FR/FRA
/Styles/FR/FRA/style1
/Styles/FR/FRA/style1/Content
/Styles/FR/FRA/style1/Content/style1.scss
/Styles/FR/FRA/style2
/Styles/FR/FRA/style2/Content
/Styles/FR/FRA/style2/Content/style2.scss
[...]

I want to directly process the .scss files to ouput the .css in the same directory, avoiding :

.pipe(gulp.dest('dist')) 

My gulpfile.js is run from the root /:

gulp.task('css', function() {
    return gulp.src('Styles/FR/FRA/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('Styles/FR/FRA'))
    .pipe(debug());
});

I guess it should results as :

[...]
/Styles/FR/FRA/style2/Content/style2.scss
/Styles/FR/FRA/style2/Content/style2.css

However, instead of keeping my file structure, it outputs:

[...]
/Styles/FR/FRA/style2/Content/style2.scss
/Styles/FR/FRA/style2.css

Which is kind of tricky to handle, as I've hundreds of scss files I don't want to concatenate.

Any fix please?

Can't Configure Paths as an Object

This is the issue I've been having that appears to be conflicting with gulp-ruby-sass.
gulpjs/gulp#340

Possible to avoid scss files in destination directory on errors (when using gulp.watch)

Any thoughts on how to avoid?

Current 'styles' gulp task:

//styles
gulp.task('styles', function() {
    var stream = gulp.src(paths.scss)
        .pipe(sass({ style: 'expanded' }).on('error', function(error) {
            gutil.log('SASS error', error.message);
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(paths.css))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest(paths.css));

});

and watch task:

// watch task
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch(paths.scss, ['styles']);

  // Watch .js files
  gulp.watch(paths.scripts_src, ['scripts']);

});

When there is an error, the scss source files will end up in the dist directory.

Customised success/error handling

I realise that there have already been a few issues raised with the way errors are handled, and from what I understand the problem lies with Gulp rather than gulp-ruby-sass... that being said, I'd love it if at least for the meantime we could get more customised success/error messages. https://github.com/dlmanning/gulp-sass allows for personalisation of the terminal making feedback much easier to read without killing the watch task - compare the below screenshots.

I believe much of the attraction of Gulp/Grunt - especially over GUI's - is the high level of customisation, it would be nice we could get something similar in gulp-ruby-sass, even if it's just until Gulp has come up with a better solution.

Thanks!

crashes if you use bundleExec

If you use "bundleExec: true" as option your gulp plugin crashes.

This is the console output:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
    at ChildProcess.<anonymous> (/Users/user/Desktop/gulp/node_modules/gulp-ruby-sass/index.js:60:16)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:735:16)
    at Socket.<anonymous> (child_process.js:948:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

PS: I've tried it with following options (without problem though):

style: 'nested',
debugInfo: false,
lineNumbers: true,
loadPath: 'scss'

Importing non SCSS/Sass files

I'm trying to use sass-json-vars to allow me to read variable values from a JSON file. I've included the JSON file in the src glob but then I get the not found/unreadable error, I assume because gulp-ruby-sass is trying to interpret it as an SCSS file. If I remove the JSON file from my src glob I still get the not found error (which I think is explained in issue #63).

Is there anyway to import other types of files so that plugins can interact with them?

Ongoing issues in source maps

When compiling with source maps, the imports go to the root ('/') and back again to the folder where the scss files reside, example:

"sources": ["../../../../../../Users/xxx/Documents/test/src/styles/_normalize.scss"]

This makes it impossible to run the source maps in a localhost web server.

Upgrade to Sass 3.3.0 kills gulp-ruby-sass?

Updated just now to the new Sass release and gulp-ruby-sass 0.4, and now it would seem gulp-ruby-sass dies every time it tries to compile the css.

This is the error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
    at ChildProcess.<anonymous> (/Users/fred/www/node_modules/gulp-ruby-sass/index.js:93:25)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:735:16)
    at Socket.<anonymous> (child_process.js:948:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

What could I try to debug this?

SASS imports don't work

You wrote:

Note that files starting with _ are ignored even if they match the globbing pattern.

But how can I work with partials and @import? Have a look at http://stackoverflow.com/questions/21558235/sass-imports-dont-work-with-gulp-ruby-sass/ where I describe my problem. I don't know if it is a problem from the package or by me. Have you any suggestions?

Thanks in advance
Ralf

Relative imports don't work

I'm converting my Toolkit project from Grunt to Gulp and my first step was to get Sass working. Thought it would be straight forward, but am running into nothing but problems.

Here's my gulp file: https://github.com/titon/toolkit/blob/2.0/gulpfile.js

When running gulp without loadPath defined, it blows up on trying to import a relative file. Example can be found in these 2 files:

https://github.com/titon/toolkit/blob/2.0/scss/toolkit/components/accordion.scss
https://github.com/titon/toolkit/blob/2.0/scss/toolkit/_common.scss#L459

If I add a bunch of paths to loadPath then it works. I shouldn't have to do this.

Source map problems

With the source map option enabled the plugin outputs the compiled css and source map file into the /tmp/ directory with temporary names, but only the compiled css makes it to the destination directory as style.css.

Also, the style.css in the target directory still has the temporary map name on the sourceMappingURL line. The final output (for me) was

/tmp/
9941bc42-517f-433c-ab65-e1168fbcd722.sass.map
9941bc42-517f-433c-ab65-e1168fbcd722.sass

/[project]/sass/
style.scss

/[project]/css/
style.css

where the sourceMappingURL on the final line of css/style.css is
/*# sourceMappingURL=9941bc42-517f-433c-ab65-e1168fbcd722.sass.map */

Syntax error from gulp-ruby-sass seems incorrect

I am creating a gulp task using 'gulp-ruby-sass' and I getting this error back in the terminal.

Syntax error: File to import not found or unreadable: compass.
Load paths:
            /Users/antonioortiz/Sites/_test/_aortizRefresh_
            /Users/antonioortiz/Sites/_test/_aortizRefresh_/source/assets/sass
    on line 38 of /Users/antonioortiz/Sites/_test/_aortizRefresh_/source/assets/sass/style.scss

My compass version is Compass 0.12.4 (Alnilam)

And my version of sass is Sass 3.2.18 (Media Mark)

This is some excerpts of my gulfile.js

 var sassSources = ['source/assets/sass/style.scss'];

 gulp.task('sass', function(){
 gulp.src(sassSources)
        .pipe(sass({style:'expanded', lineNumbers:true}))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('source/stylesheets'))
        .pipe(livereload());
});

gulp.task('watch', function() {

   var server = livereload();
   gulp.watch(jsSources,['js']); 
   gulp.watch(sassSources,['sass']); 
   gulp.watch(['javascript/script.js', 'source/*.html'], function(e){
   server.changed(e.path);
  });
});

gulp.task('default', [ 'sass', 'js', 'watch']);

Any help would be fantastic!

How do I add options?

Apologies for the noob question but how do I add options to this task? See below for my existing task?

// Compile Our Sass
gulp.task('sass', function() {
    gulp.src(['./scss/kickoff.scss', './scss/kickoff-old-ie.scss', './scss/styleguide.scss'])
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

Thanks

Importing Bower Components

I'm going a tiny bit crazy trying to figure out how to import CSS files from bower_components into my stylesheet. Here's my setup…

gulpfile

gulp.task('styles', function () {
    return gulp.src(['styles/**/*.scss', 'Gemfile'])
        .pipe($.rubySass({
            bundleExec: true,
            require: 'sass-globbing',
            style: 'compressed'
        }))
        .pipe(gulp.dest('styles'));
});

main.scss

// Vendor
@import "../bower_components/susy/sass/susy";
@import "../bower_components/breakpoint-sass/stylesheets/breakpoint";
@import "../bower_components/sass-toolkit/stylesheets/toolkit";

// Global
@import "global/**/*";

// Modules
@import "modules/**/*";

// Layout
@import "layout/**/*";

package.json

…
  "devDependencies": {
    "gulp": "^3.6.0",
    "gulp-load-plugins": "^0.5.0",
    "gulp-ruby-sass": "git://github.com/sindresorhus/gulp-ruby-sass.git#25664c03a40e66c6466dc7f117c48a8aa0307917"
  },
…

With this setup, I get an error of…

gulp-ruby-sass: error ./main.scss (Line 2: File to import not found or unreadable: ../bower_components/susy/sass/susy.
Load paths:
  /private/var/folders/p6/253gpb7s10x_pdvf877wdhjc0000gn/T/gulp-ruby-sass
  Sass::Globbing::Importer)

I can mostly get things to work by adding all .css and .scss files from bower_components to the gulp source, but that's very awkward and then my css output directory ends up with folders for each of the bower components.

…
return gulp.src(['styles/**/*.scss', 'bower_components/**/*.css', 'bower_components/**/*.scss', 'Gemfile'])
…

All of this compiles just fine when running sass via the command line.

sass -r sass-globbing --watch styles:styles

What is the best way to handle an import situation like this?

Directory structure of input files getting flattened on output.

I have a tiered structure in my app/assets/sass/ directory which I am trying to mirror in the CSS output files in public/css/, but all the *.scss files in my sass directory and subdirectories are being put into the root public/css/ folder.

Here is my gulpfile:
When I comment out the lines between gulp.src(sassDir ...) and .pipe(gulp.dest('public/css')); the directory structure is maintained, but the sass is not compiled. Uncommenting the .pipe(sass(...)) line reproduces the issue.

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');

var sassDir = 'app/assets/sass/';
var coffeeDir = 'app/assets/coffee/';

gulp.task('sass', function() {
    return gulp.src(sassDir + '**/*.scss', { base: sassDir })
        .pipe(plumber())
        .pipe(sass({ style: 'compress' }).on('error', gutil.log))
        .pipe(autoprefixer('last 10 versions'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'));
});

gulp.task('coffee', function() {
    return gulp.src(coffeeDir + '**/*.coffee', { base: coffeeDir })
        .pipe(plumber())
        .pipe(coffee({ bare: true }).on('error', gutil.log))
        .pipe(gulp.dest('public/js/coffee)'));
});

gulp.task('watch', function() {
    gulp.watch(sassDir + '/**/*.scss', ['sass']);
    gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});


gulp.task('default', ['sass', 'coffee', 'watch']);

Not processing SASS when new file is created while running gulp.watch

When gulp-ruby-sass is running with gulp.watch() and a new file is created, it's not processing the file.

I'm not sure if this is a problem with gulp.watch or gulp-ruby-sass.

Task is as follows:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass({
            style : 'compressed'
        }))
        .pipe(gulp.dest('./css'));
});

gulp.task('default', function () {
    gulp.watch([
        './scss/*.scss',
        './scss/**/*.scss'
    ], function () {
        gulp.run('sass');
    })
})

Versions:

"devDependencies": {
    "gulp": "~3.4.0",
    "gulp-ruby-sass": "~0.1.2"
}

Unhandled error event

I seem to be having a problem with the gulp-ruby-sass, but there's not a lot of descriptive information on the output.

$ gulp
[gulp] Using gulpfile /Users/jalvarado/Documents/Juan/jquery.cbFlyout/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Finished 'clean' after 9.03 ms
[gulp] Starting 'default'...
[gulp] Starting 'styles'...
[gulp] Starting 'scripts'...
[gulp] Finished 'default' after 46 ms
[gulp] gulp-notify: [Gulp notification] Scripts task complete

events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
    at ChildProcess.<anonymous> (/Users/jalvarado/Documents/Juan/jquery.cbFlyout/node_modules/gulp-ruby-sass/index.js:93:25)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Socket.<anonymous> (child_process.js:956:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:465:12)

My gulpfile looks like this.

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    server = lr();

gulp.task('styles', function() {
  return gulp.src('scss/global.scss')
    .pipe(sass({ style: 'expanded', compass: true }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('css/'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('scripts', function() {
  return gulp.src('js/src/*.js')
    .pipe(concat('main.js'))
    .pipe(gulp.dest('js/dist/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('js/dist/'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.task('clean', function() {
  return gulp.src(['css/', 'js/dist/'], {read: false})
    .pipe(clean());
});

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts');
});

gulp.task('watch', function() {
    // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err)
    };
        // Watch .scss files
        gulp.watch('scss/*.scss', ['styles']);

        // Watch .js files
        gulp.watch('js/src/*.js', ['scripts']);

    });
});``

Directory Structure

├── README.md
├── gulpfile.js
├── index.html
├── css
├── js
│   ├── dist
│   │   ├── main.js
│   │   └── main.min.js
│   └── src
│       ├── jquery.cbFlyout.js
│       ├── jquery.js
│       └── main.js
├── node_modules
├── package.json
└── scss
    └── global.scss

Any tips on what might be happening?

gulp-ruby-sass can't find @import'd files

Test case file structure:

scss/app.scss

@import "mixins";
// ...

scss/_mixins.scss

// some outputable CSS, just for test case's sake
.foo { color: green; }

Throws:

[01:46:18] gulp-ruby-sass: error ./app.scss (Line 1: File to import not found or unreadable: mixins.
Load path: C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass)

Now if I add the absolute path to the scss directory in the loadPath option, it compiles but the sourcemap throws an warning as in #47 (can't determine the source files' public URL).

I believe I shouldn't have to add an absolute path to loadPath in order to @import using paths relative to the current scss file, this appears to be a regression bug.

When not providing a loadPath, the directory C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass contains a copy of app.scss and a directory _14139e58-9ebe-4c0f-beca-73a65bb01ce9 containing the output css file whose content is:

/*
Syntax error: File to import not found or unreadable: mixins.
              Load path: C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass
        on line 1 of ./app.scss

1: @import "mixins";
2: 
3: html {
4:  height: 100%;
5:  background: linear-gradient(darken(lightblue, 10%), slateblue) fixed;
6: }

Backtrace:
./app.scss:1
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:66:in `rescue in import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:45:in `import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:28:in `imported_file'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:37:in `css_import?'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:283:in `visit_import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:79:in `block in with_base'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:121:in `with_frame'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:79:in `with_base'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:152:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `map'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:161:in `block in visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:173:in `with_environment'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:160:in `visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `block in visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:180:in `visit_root'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:151:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:8:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/root_node.rb:36:in `css_tree'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/engine.rb:371:in `_render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/engine.rb:291:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:23:in `block in render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:29:in `with_import_scope'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:22:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:412:in `update_stylesheet'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:189:in `block in update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:186:in `each'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:186:in `update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin.rb:82:in `update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:489:in `watch_or_update'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:346:in `process_result'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:43:in `parse'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:22:in `parse!'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/bin/sass:13:in `<top (required)>'
c:/Ruby200-x64/bin/sass:23:in `load'
c:/Ruby200-x64/bin/sass:23:in `<main>'
*/

Running node 0.10.26, gulp 3.8.3, latest gulp-ruby-sass (git://github.com/sindresorhus/gulp-ruby-sass.git#83bce4ce1317185add687934c3ec77db3cf0cba6), Windows 7 x64 Ultimate.

events.js:72 throw er; // Unhandled 'error' event

I did a fresh install of Mavericks yesterday. I installed node (using homebrew), Sass 3.3, Compass, and upgraded Ruby. Nonetheless, gulp-ruby-sass now prints the afore stated error when I try to run it. I reduced my gulpfile to comprise only what is below in a failed process of elimination. Before I did this every gulp task except gulp-ruby-sass worked. If I change the gulp.src to something that doesn't navigate correctly to my main.scss file – such as "source/main.scss"– the 'styles' task runs successfully. But when I point the task to my main.scss file, the error is printed.

Gulpfile:

var gulp = require("gulp"),
           sass = require("gulp-ruby-sass");

gulp.task("styles", function(){
    return gulp.src("source/scss/main.scss")
    .pipe(sass({ compass: true }))
    .pipe(gulp.dest("source/css"));
});

Main.scss file:

@import "compass";

@import "0.1. silent/mixins";
@import "0.1. silent/variables";

@import "1. base/reset";
@import "1. base/elements";

@import "2. layout/grid";
@import "2. layout/major-components";
@import "2. layout/minor-components";

@import "3. modules/animation";
@import "3. modules/borders";
@import "3. modules/buttons/buttons";
@import "3. modules/clearfix";
@import "3. modules/colors";
@import "3. modules/doc";
@import "3. modules/font-face";
@import "3. modules/footer";
@import "3. modules/forms";
@import "3. modules/helper";
@import "3. modules/how-do-I";
@import "3. modules/icons";
@import "3. modules/img";
@import "3. modules/index";
@import "3. modules/island";
@import "3. modules/lists";
@import "3. modules/login";
@import "3. modules/logo";
@import "3. modules/margins";
@import "3. modules/masthead";
@import "3. modules/problem";
@import "3. modules/header";
@import "3. modules/typography";

@import "4. states/buttons";
@import "4. states/footer";
@import "4. states/index";
@import "4. states/landing";
@import "4. states/links";
@import "4. states/problem";
@import "4. states/top-nav";

package.json file:

{

  "name": "iWantToStudyEngineering",
  "description": "An educational web app designed and built by members of the University of Cambridge",
  "author": "Max Alfie Murdoch",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "[email protected]:maxalfiemurdoch/iWantToStudyEngineering"
  },
  "devDependencies": {
    "gulp": "^3.5.5",
    "gulp-ruby-sass": "^0.4.0",
    "gulp-load-plugins": "^0.4.0"
  }
}

config.rb file:

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "css/fonts"
#fonts_dir = "iWantToStudyEngineering/css/fonts"

output_style = :nested
relative_assets = false
color_output = false
preferred_syntax = :scss

Any help would be greatly appreciated.

_-prefixed files are copied instead of compiled

Readme says "files starting with _ are ignored even if they match the globbing pattern," which makes sense to me. But what's happening is that the _-prefixed SCSS files are being copied to my dest folder (remaining uncompiled SCSS).

So with a file structure like this --

- docs/content/example-styles/
  - compiled/
  - _example-variables.scss
  - circle.scss
  - square.scss
  - triangle.scss

-- when I run a task that looks like this --

gulp.src(['./docs/content/example-styles/*.scss'])
  .pipe(sass({
    'style': 'expanded'
  }))
  .pipe(gulp.dest('./docs/content/example-styles/compiled/'));

-- I end up with this:

- docs/content/example-styles/
  - compiled/
    - _example-variables.scss
    - circle.css
    - square.css
    - triangle.css
  - _example-variables.scss
  - circle.scss
  - square.scss
  - triangle.scss

See how _example-variables.scss got copied over, placed alongside the compiled CSS?

Am I missing something, or is this a bug?

bundleExec and sourcemap don't work together

.pipe(sass(bundleExec: true, sourcemap: true))

results in:

[10:15:35] [gulp-ruby-sass] 
OptionParser::InvalidOption: invalid option: --sourcemap


events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: 
OptionParser::InvalidOption: invalid option: --sourcemap

Compilation fails with Gemfile specifying gems from Git

I'm trying to use sass-globbing in a project and am mostly up & running now using the latest commit: 66069e7. Part of the solution I gathered from #32 is including my Gemfile in the src files, but this seems to blow up whenever a gem from Git is specified:

gem 'bourbon', git: '[email protected]:thoughtbot/bourbon.git', ref: '43e9c5bed97fc7d214107dc788451c7bdcaddad6'
gem 'shopify_theme', git: '[email protected]:Shopify/shopify_theme.git', ref: '678ca2d6e8c890d11cc868f69afd98b3d86fcd6d'

Either of the above error out in compilation with this:

[20:21:21] gulp-ruby-sass: /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git/git_proxy.rb:151:in `allowed_in_path': The git source [email protected]:thoughtbot/bourbon.git is not yet checked out. Please run `bundle install` before trying to start your application (Bundler::GitError)
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git/git_proxy.rb:47:in `revision'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:211:in `revision'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:81:in `install_path'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/path.rb:126:in `load_spec_files'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:184:in `load_spec_files'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/path.rb:92:in `local_specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:154:in `specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:522:in `block in converge_locked_specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:511:in `each'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:511:in `converge_locked_specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:191:in `resolve'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:133:in `specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:178:in `specs_for'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:167:in `requested_specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/environment.rb:18:in `requested_specs'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/runtime.rb:13:in `setup'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler.rb:120:in `setup'
    from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/setup.rb:17:in `<top (required)>'
    from /Users/eric/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/eric/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require'

var paths = {
  styles: ['Gemfile','assets/bower/**/*.{css,scss}','assets/fonts/*.scss','assets/styles/**/*']
};

gulp.task('sass', function(){
  gulp.src(paths.styles)
    .pipe(sass({
      bundleExec: true,
      loadPath: ['assets/bower','assets/fonts','assets/styles'],
      require: ['sass-globbing'],
      sourcemap: true
    }))
    .on('error', logError)
    .pipe(gulp.dest('theme/assets'))
});

For now I'm working around this with a separate Gemfile for these particular dependencies (it's a CLI util), but this should work.

No `watch` option?

What's the point of this without using the sass binary's watch option?

On error, it continues to end of stream

When my stream finishes, I have gulp-notify at the end to let me know everything is complete. I've tested gulp-sass and when an error occurs it doesn't continue the stream and reach notify.

However, with gulp-ruby-sass, despite an error, it'll continue on and reach notify. Is there a way to prevent this behaviour?

duplicating all scss files into css output directory

the following task causes all partials to be duplicated into the output directory:

gulp.task('scss', function () {
return gulp.src(WEBAPP_PATH + '/scss/*/.scss')
.pipe(cache('scss'))
.pipe(sass({ style: 'expanded' }))
.pipe(gulp.dest(WEBAPP_PATH + '/public/css'))

});

Gulp-ruby-sass and "! global" statement

Hello everyone.
I'm not a SCSS expert so, maybe, I'm writing it wrong but when I try to do something like

[Other code ]
  $prefix-webkit: $original-prefix-webkit ! global;
[Other code]

Gulp throws me an exception
Syntax error: Invalid CSS after "...dules, $name) !": expected identifier, was " global;"

The solution is easy, just remove the ! near the global identifier but I know that that is a correct SCSS statement so gulp might be wrong. Anyone has this issue?
I'm using

[gulp] CLI version 3.6.2
[gulp] Local version 3.8.0

[feature] compass config as object

i'd like to provide an alternative source of compass config

if the compass prop would be an object, it would be converted into a temporary config.rb to be used by sass --compass.

so config like

//...
  .pipe(sass({
    compass : {
      sassDir : 'assets/styles',
      imagesDir : 'assets/images',
      fontsDir : 'assets/fonts',
      generatedImagesDir : 'public/images',
      cssDir : 'public/styles',
      httpPath : '/',
      httpStylesheetsPath : '/styles',
      httpGeneratedImagesPath : '/images',
      httpFontsPath : '/fonts'
    }
  })
//...

would create a temporary config.rb file looking like

sass_dir = "assets/styles"
images_dir = "assets/images"
fonts_dir = "assets/fonts"
generated_images_dir = "public/images"
css_dir = "public/styles"
http_path = "/"
http_stylesheets_path = "/styles"
http_generated_images_path = "/images"
http_fonts_path = "/fonts"

hope that makes sense?

Use gulp-intermediate for speed improvements

I'm not sure why, but this plugin is slow. I think it has to do with trying to parallelize the compilation (although using the orig source as a load path is pretty clever).

I ran a test with these files, but duplicating the test file 50 times. For one run I used gulp-ruby-sass then autoprefixer, and for the other I used gulp-intermediate running sass in a spawned process over all files at once and then autoprefixer. Task setup:

gulp.task('styles', function () {
  return gulp.src('app/styles/**/*.scss')
    .pipe($.rubySass())
    .pipe($.autoprefixer('last 2 versions'))
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('styles-int', function () {
  return gulp.src('app/styles/**/*.scss')
    .pipe($.intermediate('temp/app/styles', function(tempDir, cb) {
      var sass = spawn('sass', ['--update', '.:temp'], {cwd: tempDir});
      sass.on('close', cb);
    }))
    .pipe($.autoprefixer('last 2 versions'))
    .pipe(gulp.dest('.tmp/styles'));
});

Results:

I think it's faster to process everything at the same time. If you like I can write up a PR to start it off, but probably won't have time to make it complete for a couple weeks.

Partials are not rendered but still in stream

I have partials in a sub directory of my sass folder and when I compile my sass they are ignored correctly, however they remain in the stream and are copied to my css folder. This means any further processing tasks break and I have partials in my distribution folder that I don't really want. I can remove them with gulp-ignore but it would be nice if this could be done automatically.

Make ruby-sass not crash whole watch-task

I noticed that gulp-sass has a functionality "errLogToConsole" that makes the task not stop the whole watch-process if there is a synthax-error in the SASS. Are there plans to add this to this sass-version?

Errors to body:before

When using sass --watch, errors are printed to the css stylesheet in body:before which causes them to show up on the page in the browser. Is this possible currently? If not, I would find it very useful so I don't have to keep an eye on my gulp console.

Error in plugin

Hi, while trying to run my gulp settings, i encounter an error with the plugin, can't figure out what's wrong ? I've install gulp and plugins with npm.

Looks like 'sass' is "unknow" ? Does this mean that i need to install ruby or something like that ?

C:\Workspace\webapp>gulp
[gulp] Using file C:\Workspace\webapp\gulpfile.js
[gulp] Working directory changed to C:\Workspace\webapp
[gulp] Running 'clean'...
[gulp] Finished 'clean' in 4.92 ms
[gulp] Running 'default'...
[gulp] Running 'styles'...
[gulp] Running 'images'...
[gulp] Finished 'default' in 6.29 ms
[gulp] Finished 'images' in 5.59 ms

events.js:72
throw er; // Unhandled 'error' event
^
[←[32mgulp←[39m] Error in plugin '←[36mgulp-ruby-sass←[39m':
'sass' n'est pas reconnu en tant que commande interne
ou externe, un programme ex´┐¢cutable ou un fichier de commandes.

at ChildProcess.<anonymous> (C:\Workspace\webapp\node_modules\gulp-ruby-sass

\index.js:73:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket. (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)

Thanks for your help.

Error: spawn ENOENT

Hi,

I've just tried a Gulp tutorial and I'm getting errors trying to use gulp-ruby-sass.

My gulpfile.js is as follows:

var gulp = require('gulp');
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    Livereload depends on tiny-lr server being intialised
    lr = require('tiny-lr'),
    server = lr();

gulp.task('styles', function() {
    return gulp.src('src/styles/**/*.scss') 
        .pipe(sass({ style: 'expanded' }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('dist/assets/css')) 
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(livereload(server))
        .pipe(notify({ message: 'Styles task complete' }));
});

After running 'gulp styles' I encounter the following error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: spawn ENOENT
    at errnoException (child_process.js:980:11)
    at Process.ChildProcess._handle.onexit (child_process.js:771:34)

Anyone got any ideas what is going on here and how I could fix it?

Thanks.

Test Sass availability when running `bundle exec`

PR forthcoming after PRs for #53 and #54.

Add an .on("success") event

what about an onSuccess? I've got the following

// SCSS Compiling and Minification
gulp.task('scss', function(){
  return gulp.src(build + '/styles/app.scss')
        .pipe( sass({ style: 'expanded', debugInfo: true, lineNumbers: true }).on("error", notify.onError(function (error) {
          gutil.beep();
          return error.message;
        })))
        .pipe( gulp.dest(dist + '/css') )
        .pipe( notify({
          message: "Generated file: <%= file.relative %>"
        }));
});

I only want to notify minification success message on success. Right now it spits that last notify message even after an error has been thrown. When an error is thrown I want to notify of the error and not have the .pipe( notify({}) ) be run at the end. I've tried moving things around and can't seem to get the desired outcome.

Also noticed that gutil.beep() doesn't work inside of the onError, this is probably something stupid but wondering if I'm on the right track.

It would be nice to have the following

// SCSS Compiling and Minification
gulp.task('scss', function(){
  return gulp.src(build + '/styles/app.scss')
        .pipe(
          sass({ style: 'expanded', debugInfo: true, lineNumbers: true })
            .on("error", notify.onError(function (error) {
              gutil.beep();
              return error.message;
            }))
            .on("success", notify({
              message: "Generated file: <%= file.relative %>"
            }))
        )
        .pipe( gulp.dest(dist + '/css') );
});

EPRECATION WARNING

I am getting this error, any idea?

vents.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass':
DEPRECATION WARNING on line 25 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead.
Note that this will be incompatible with Sass 3.2.

DEPRECATION WARNING on line 36 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$all-text-inputs-hover" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma) !global" instead.
Note that this will be incompatible with Sass 3.2.

DEPRECATION WARNING on line 44 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$all-text-inputs-focus" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma) !global" instead.
Note that this will be incompatible with Sass 3.2.

at ChildProcess.<anonymous> (/Users/max/workspace/dev/node_modules/gulp-ruby-sass/index.js:87:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

Fontface bulletproof syntax

I get a warning if I don't use fontspring bulletproof syntax in my webfont declaration.
In the URL specified in the warning the article says that there is a new version of this syntax:

Further Hardening of the Bulletproof Syntax
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Which one should we use? (If I use the new one I still receive this warning)

Fix sass cacheing?

I'm taking a guess that sass cacheing isn't working in this plugin currently, because each file is written to the temp directory before processing which gives it a newer file-changed date than the cached file.

Can't think of a fix for this off the top of my head — using gulp-changed would work for files that no other files depend on, but without knowing the dependency tree I'm not sure how to handle a file containing a mixin that unchanged files depend on (like _obj.scss in the test files). Sass probably has this figured out, and it might just work with a combo of -changed, -intermediate, adding the source files to load paths, and a Sass cache in the local root folder.

Some docs on sass-caching: https://twitter.com/nex3/status/475324934491602945

sourcemaps has wrong relative path

Generated sourcemap URL
http://localhost:9000/Developer/Work/MyApp/app/styles/_animations.scss
expected sourcemap URL
http://localhost:9000/styles/_animations.scss

Cannot @import files in same directory

In latest version when I try to import a file in the same directory it failed unless I explicitly add this directory to loadPath[].

foo.sass:

@import bar

Error message:

Syntax error: File to import not found or unreadable: bar.
              Load paths:
                <project dir>
                <project dir>/app
                <project dir>/dist/bower_components
        on line 1 of <project dir>/app/styles/foo.sass

Unhandled stream error in pipe

Hi, and sorry its noob error I'm getting. I keep getting the below, even though I have full acess. Any ideas?

stream.js:94
throw er; // Unhandled stream error in pipe. Error: EACCES, mkdir '/css'

Cannot specify encoding

Please add default encoding UTF-8.

sass -E UTF-8 scss:css

debugInfo:true affect @media queries rendering

With debugInfo set to true @media mixins nested into normal rules are mis-rendered.

For example:

html
{
    @include mq(xlp)
    {
        font-size: 80%;
    }
    @include mq(stol)
    {
        font-size: 62.5%;
    }
    @include mq(sl)
    {
        font-size: 54.5%;
    }
}

All those mixins are rendered as normal rules surronded by thoses @media debug infos markups, instead of having @media queries:

@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\000038}}
* {
  margin-bottom: 0;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
  html {
    font-size: 80%;
  }
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
  html {
    font-size: 62.5%;
  }
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
  html {
    font-size: 54.5%;
  }
}

This behavior doesn't happen with sass when used directly with ruby.

Smallest error kills gulp watch task

Hi,

The plugin seems to be very sensitive when running gulp watch, making a small mistake completely kills the watch task completely. How can I prevent prevent this task from dieing instead just getting a notification?

[gulp] Finished 'compass' in 606 ms
[gulp] Running 'compass'...
[gulp] Running 'livereload'...
[gulp] Finished 'livereload' in 61 μs

events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-ruby-sass':
Syntax error: Invalid CSS after "    line-height: 1": expected ";", was "."
        on line 10 of /Users/kylehouston/Sites/the-quays-static/css/src/partials/_lists.scss
        from line 13 of /Users/kylehouston/Sites/the-quays-static/css/src/base.scss

    at ChildProcess.<anonymous> (/Users/kylehouston/Sites/the-quays-static/node_modules/gulp-ruby-sass/index.js:74:25)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:735:16)
    at Socket.<anonymous> (child_process.js:948:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

My task for sass and my watch command are as follow:

// SASS + Compass Tasks.
gulp.task('compass', function() {
  return gulp.src('./css/src/base.scss')
    .pipe(sass({ style: 'compressed', compass: true }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./css'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Compass task complete.' }));
});

// Watch Task.
gulp.task('watch', function() {
    gulp.watch('./js/*/*.js', ['scripts']);
    gulp.watch('./css/src/**/*.scss', ['compass', 'livereload']);
    gulp.watch('./templates/*.hbs', ['templates']);
});

"Text file busy" error

I get the following error when running gulp:

events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-ruby-sass':
Errno::ETXTBSY: Text file busy - ./.sass-cache/67dd0e11dbc3b251e42363d30b0218c1867f13d9/main.scssc20140219-11533-163s3hi-0 or ./.sass-cache/67dd0e11dbc3b251e42363d30b0218c1867f13d9/main.scssc

    at ChildProcess.<anonymous> (/vagrant/gulp_test_1/node_modules/gulp-ruby-sass/index.js:74:25)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at maybeClose (child_process.js:743:16)
    at Socket.<anonymous> (child_process.js:956:11)
    at Socket.EventEmitter.emit (events.js:95:17)
    at Pipe.close (net.js:466:12)

The only way to get it working is to set noCache: true

Here is my gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');

gulp.task('css', function(){
    return gulp.src('./assets/scss/main.scss')
        .pipe(sass({
            style: 'expanded'
        }))
        .pipe(autoprefixer('last 5 versions'))
        .pipe(gulp.dest('./assets/css'));
});

gulp.task('watch', function(){
    gulp.watch('./assets/scss/*.scss', ['css']);
});

gulp.task('default', ['css', 'watch']);