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

grayghostvisuals · 2014-03-10T20:43:16Z

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.

yairEO · 2014-03-16T18:18:47Z

Author - please fix this. No Globbing support is a deal-breaker for gulp-ruby-sass

sindresorhus · 2014-03-16T19:00:29Z

@grayghostvisuals can you show how you use sass-globbing and what fails and how it fails?

grayghostvisuals · 2014-03-16T19:28:28Z

@sindresorhus

Bare Bones Setup
http://codeshare.io/VBfpO

what fails and how it fails?

Failing means it won't compile. I'm using it correctly so I think what would be best to do is give it a try for yourself. I'm not sure if you developed gulp-ruby-sass to include support for sass-globbing or even tested with it since there are so many niche tools like sass-globbing out there that make it hard to plan for them all.

Here is Chris' repo that contains the docs about sass-globbing
https://github.com/chriseppstein/sass-globbing

yairEO · 2014-03-17T14:53:17Z

any news on this?

grayghostvisuals · 2014-04-03T13:21:56Z

@sindresorhus Any results from this yet? I've been getting pinged on Twitter about this from people finding this issue and asking me if this is resolved. As of now it still won't compile for me.

grayghostvisuals · 2014-04-15T11:29:37Z

@yairEO Apparently @Jonic almost has a fix for this.

derekwheee · 2014-05-12T13:32:46Z

I'm not exactly sure how Sass globbing works, but could this be related to #17 ?

From their docs: "Globs are always relative to the current file". It sounds like they may not be using directories from --load-path. Since gulp-ruby-sass is creating temp files, sass-globbing is likely looking for paths relative to that temp file.

sindresorhus · 2014-05-13T12:26:23Z

That sounds like a Sass glob bug. It should definitely use paths from --load-path too.

lozandier · 2014-05-19T00:46:21Z

I'm having similar issues with glob patterns involving having a glob pattern involving Sass:

gulp.task("compile:css", function(){
  return gulp.src([".app/src/sass/**/*.{sass, scss}"])
  .pipe(sass())
  .pipe(gulp.dest("./app/public/assets/css")); 
});

No file is compiled after compilation despite knowing 100% that other tasks can pick up the glob pattern like the following watch task definition below:

gulp.task("watch", function(){
  gulp.watch(["./app/src/js/**/*.js"], ["compile:js"]); 
  gulp.watch(["./app/src/sass/**/*.{sass, scss}"], ["compile:css"]); 
});

robwierzbowski · 2014-06-12T23:06:21Z

@grayghostvisuals Can you test this with the branch in #56? As long as the files being globbed are also globbed into the gulp task I think it should work.

grayghostvisuals · 2014-06-13T03:58:51Z

Unfortunately the project I was working on with this I'm no longer on anymore.

As long as the files being globbed are also globbed into the gulp task I think it should work.

Is it possible for another way around this though? I mean other gulp plugins manage sass globbing just fine without globbing the files from within the gulp config. There has to a way to avoid this route…no?

robwierzbowski · 2014-06-13T04:06:56Z

Gulp doesn't work on the file system, but on files in the stream. I don't think a gulp plugin that works correctly can glob on files that haven't been added to the stream. Can you point me at a gulp plugin that manages sass globbing correctly?

I don't think gulp globbing all the files you want to have available to sass globbing is too bad. For example the app I work on sass globbs component/module and mixin files into a main.scss file. Because they all live in app/styles my gulp src would look like gulp.src('app/styles/**/*.scss'); in main.scss I could glob @import 'modules/**/*.scss';.

iainhouston · 2014-06-17T19:31:11Z

"gulp-ruby-sass": "^0.5.0" will correctly pick up _colors.scss with@import "variables/_colors.scss"; but not with either @import "variables/**/*"; or @import "variables/**/*.scss";, reporting

  [20:21:52] [gulp-ruby-sass] 
  Syntax error: File to import not found or unreadable: variables/**/*.scss.

suggesting that _colors.scss is in the stream but that globbing is not working properly?

robwierzbowski · 2014-06-17T19:49:47Z

Correct. What do your options look like?

iainhouston · 2014-06-17T19:53:36Z

…
// Allows gulp --dev to be run for a more verbose output
var isProduction = true;
var sassStyle = 'compressed';
var sourceMap = false;

if(gutil.env.dev === true) {
sassStyle = 'expanded';
sourceMap = true;
isProduction = false;
}

var changeEvent = function(evt) {
gutil.log('File', gutil.colors.cyan(evt.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', gutil.colors.magenta(evt.type));
};

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

var sassFiles = gulp.src(appFiles.styles)
.pipe(plugins.rubySass({ style: sassStyle, sourcemap: sourceMap, precision: 2 }))
.on('error', function(err){ new gutil.PluginError('CSS', err, {showStack: true}); });
...
On 17 Jun 2014, at 20:49, Rob Wierzbowski notifications@github.com wrote:

Correct. What do your options look like?

—
Reply to this email directly or view it on GitHub.

iainhouston · 2014-06-17T20:02:55Z

also tried various combinations of loadPath to no avail e.g.:

   var sassFiles = gulp.src(appFiles.styles)
  .pipe(plugins.rubySass({ loadPath: [appFiles.styles], style: sassStyle, sourcemap: sourceMap, precision: 2 }))

robwierzbowski · 2014-06-17T20:05:29Z

Is sass globbing native now? I thought we still needed to load a ruby
dependency for it?

On Tuesday, June 17, 2014, Iain Houston notifications@github.com wrote:

also tried various combinations of loadPath to no avail e.g.:

var sassFiles = gulp.src(appFiles.styles)
.pipe(plugins.rubySass({ loadPath: [appFiles.styles], style: sassStyle, sourcemap: sourceMap, precision: 2 }))

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

iainhouston · 2014-06-17T20:13:23Z

Where would the dependency be expressed? I've got the sass-globbing 1.1.0 gem installed .... would it need a config.rb file? (I think config.rb is only for compass)

robwierzbowski · 2014-06-17T21:07:59Z

According to the docs: https://github.com/chriseppstein/sass-globbing#use-with-the-sass-command-line

gulp ruby sass takes every option you give it and spits it out as a command line arg. So r: "sass-globbing" would be -r sass-globbing.

grayghostvisuals · 2014-06-17T21:10:57Z

@iainhouston You have to use the require statement from your compass config https://github.com/grayghostvisuals/lemanz/blob/master/config.rb#L1

robwierzbowski · 2014-06-17T21:28:42Z

If things aren't working I would suggest getting closer to the metal and using Sass configuration instead of requiring compass and adding config in the compass config file. Although both should work.

I've confirmed that:

using the branch in Gulp intermediate rewrite, fixes 53, 54, and 55 #56
with Sass and sass-globbing in a Gemfile
when globbing all of the files needed into the gulp stream with gulp.src
with the gulp-ruby-sass options { bundleExec: true, require: "sass-globbing" }

sass globbing works as expected.

I'm hoping to finish work on that branch soon.

iainhouston · 2014-06-17T21:33:03Z

Thanks Rob. That looks more like it! Will try tomorrow.

robwierzbowski · 2014-06-17T21:35:29Z

Code snips:

gulp task

return gulp.src([
      'app/styles/**/*.scss',
      'Gemfile'
    ])
   .pipe($.rubySass({
      bundleExec: true,
      require: "sass-globbing"
    }))

Gemfile, should be optional.

source "http://rubygems.org"
gem 'sass', '~>3.3.7'
gem 'sass-globbing', '~>1.1'

Source files

// app/styles/objs/obj-1.scss
@mixin bar() {
  content: "bar";
}

// app/styles/objs/obj-2.scss
@mixin baz() {
  content: "baz";
}

// app/styles/test.scss
@import 'objs/**/*';

body {
  @include bar();
  @include baz();
}

Result

body {
  content: "bar";
  content: "baz";
}

robwierzbowski · 2014-06-17T22:50:39Z

56 landed, so closed!

grayghostvisuals · 2014-06-17T23:54:30Z

very cool. thanks for your work on this.

joshuarule · 2014-06-24T21:00:31Z

Is this a feature that is currently available from npmjs? A little new to Gulp and trying to get globbing to working but struggling to understand.

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

When I run this I get:

[16:46:49] [gulp-ruby-sass]
WARNING on line 1 of /Volumes/HDRV/_work/avex/avex-website/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 2 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 3 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 4 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.


events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-ruby-sass':
WARNING on line 1 of /Volumes/HDRV/_work/avex/avex-website/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 2 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 3 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.
WARNING on line 4 of /var/folders/fq/nd6mqb_d4cjcgd3rj28l6sr40000gn/T/3810d886-995c-4a85-bd04-344d472009c1/Gemfile:
This selector doesn't have any properties and will not be rendered.

    at ChildProcess.<anonymous> (/Volumes/HDRV/_work/avex/avex-website/node_modules/gulp-ruby-sass/index.js:98:25)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:755:16)
    at Process.ChildProcess._handle.onexit (child_process.js:822:5)

When I run without 'Gemfile' in the source it doesn't error but I get this in my CSS file:

/* No files to import found in modules/**\/* */

Not sure if my code is incorrect or I need to be using an updated build.

robwierzbowski · 2014-06-24T21:19:25Z

We have one more feature to write before releasing another version. Try updating to the latest commit in your package.json, installing, and running again. Let me know if it works.

joshuarule · 2014-06-24T21:45:26Z

Works great! Turns out I just didn't know how to grab a dependency from a github commit.

added to package.json:

"gulp-ruby-sass": "git://github.com/sindresorhus/gulp-ruby-sass.git#25664c03a40e66c6466dc7f117c48a8aa0307917"

jeremydouglas · 2014-07-25T13:37:55Z

I'm trying to follow this to get globbing to work. I'm new to ruby/gulp. I'm receiving the error 'Could not locate Gemfile' when gulp-ruby-sass runs.

Can anyone give me some basic instructions on how to create a Gemfile, a Gemfle.lock, what should be in those files and in which directory the should be saved?

robwierzbowski · 2014-07-25T13:48:09Z

@jeremydouglas Use the latest version as specified in this comment: #32 (comment), but with the latest commit.

If you're using Bundler and Gemfiles, look at their documentation. With the latest version you only need a Gemfile in the same directory as your gulpfile, no need to add it to your gulp.src().

jeremydouglas · 2014-07-30T13:53:44Z

Should it be necessary to use Bundler? Sorry, I'm a front-end guy. I don't know Ruby, I'm not really even sure what Bundler is.

I've installed Bundler, now I'm getting this error after the gulp-ruby-sass task runs:

gulp-ruby-sass: /Library/Ruby/Site/2.0.0/rubygems/dependency.rb:313:in `to_specs': Could not find 'bundler' (>= 0) among 4 total gem(s) (Gem::LoadError)
Checked in 'GEM_PATH=/Users/Jeremy/.gem/ruby/2.0.0:/Library/Ruby/Gems/2.0.0:/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/gems/2.0.0', execute `gem env` for more information
        from /Library/Ruby/Site/2.0.0/rubygems/dependency.rb:322:in `to_spec'
        from /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_gem.rb:58:in `gem'
        from /usr/bin/bundle:22:in `<main>'

This is the task I have:

gulp.task('styles', function() {
  return gulp.src(['sass/base/*.scss', 'sass/blocks/*.scss'])
    .pipe(sass({bundleExec: true,
      require: "sass-globbing"}))
    .pipe(gulp.dest('css'))
});

Do I need to load a sass-globbing plugin at the top of my gulp file of any sort? FWIW, sass-globbing is working fine from the command line.

robwierzbowski · 2014-07-30T13:56:08Z

Just like with Sass, you can choose to use bundler or not.

Read the bundler homepage for more information on what it is, or search for answers on Stack Overflow. Those questions aren't related to this plugin.

jeremydouglas · 2014-07-30T14:00:36Z

Thanks, I was editing my comment while you answered. If sass-globbing works from the command line, it should work from gulp too, right?

robwierzbowski · 2014-07-30T14:02:31Z

I don't believe you can glob from the command line, only compile a single file or a folder. Not sure what you mean exactly.

robwierzbowski · 2014-07-30T14:03:33Z

Oh, NM, the sass-globbing sass plugin. If the plugin is installed I believe it should work with your task settings.

jeremydouglas · 2014-07-30T14:09:40Z

Right, the sass-globbing plugin is working from the command line, then I should be able to have the below my task and not worry about having a Gemfile and Bundler, right?

gulp.task('styles', function() {
  return gulp.src(['sass/base/*.scss', 'sass/blocks/*.scss'])
    .pipe(sass({bundleExec: true,
      require: "sass-globbing"}))
    .pipe(gulp.dest('css'))
});

robwierzbowski · 2014-07-30T14:11:11Z

You need to decide if you need bundler or not. Please read up on what
bundler is and what it does.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

On Wed, Jul 30, 2014 at 10:09 AM, Jeremy Douglas Hoover <
notifications@github.com> wrote:

Right, the sass-globbing plugin is working from the command line, then I
should be able to have the below my task and not worry about having a
Gemfile and Bundler, right?

gulp.task('styles', function() {
return gulp.src(['sass/base/.scss', 'sass/blocks/.scss'])
.pipe(sass({bundleExec: true,
require: "sass-globbing"}))
.pipe(gulp.dest('css'))
});

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

jeremydouglas · 2014-07-30T14:13:49Z

Ok, thanks for the help.

robwierzbowski · 2014-07-30T14:20:45Z

Good luck!

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

On Wed, Jul 30, 2014 at 10:13 AM, Jeremy Douglas Hoover <
notifications@github.com> wrote:

Ok, thanks for the help.

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

sindresorhus added help wanted labels May 10, 2014

robwierzbowski closed this as completed Jun 17, 2014

pushred mentioned this issue Jul 6, 2014

Compilation fails with Gemfile specifying gems from Git #71

Closed

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

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

Comments

grayghostvisuals commented Mar 10, 2014

yairEO commented Mar 16, 2014

sindresorhus commented Mar 16, 2014

grayghostvisuals commented Mar 16, 2014

yairEO commented Mar 17, 2014

grayghostvisuals commented Apr 3, 2014

grayghostvisuals commented Apr 15, 2014

derekwheee commented May 12, 2014

sindresorhus commented May 13, 2014

lozandier commented May 19, 2014

robwierzbowski commented Jun 12, 2014

grayghostvisuals commented Jun 13, 2014

robwierzbowski commented Jun 13, 2014

iainhouston commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

iainhouston commented Jun 17, 2014

iainhouston commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

iainhouston commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

grayghostvisuals commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

iainhouston commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

robwierzbowski commented Jun 17, 2014

grayghostvisuals commented Jun 17, 2014

joshuarule commented Jun 24, 2014

robwierzbowski commented Jun 24, 2014

joshuarule commented Jun 24, 2014

jeremydouglas commented Jul 25, 2014

robwierzbowski commented Jul 25, 2014

jeremydouglas commented Jul 30, 2014

robwierzbowski commented Jul 30, 2014

jeremydouglas commented Jul 30, 2014

robwierzbowski commented Jul 30, 2014

robwierzbowski commented Jul 30, 2014

jeremydouglas commented Jul 30, 2014

robwierzbowski commented Jul 30, 2014

jeremydouglas commented Jul 30, 2014

robwierzbowski commented Jul 30, 2014