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

Closed
grayghostvisuals opened this Issue Mar 10, 2014 · 39 comments

Projects

None yet

9 participants

@grayghostvisuals

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
yairEO commented Mar 16, 2014

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

@sindresorhus
Owner

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

@grayghostvisuals

@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
yairEO commented Mar 17, 2014

any news on this?

@grayghostvisuals

@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

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

@frxnz
frxnz commented May 12, 2014

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
Owner

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

@lozandier

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
Collaborator

@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

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
Collaborator

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

"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
Collaborator

Correct. What do your options look like?

@iainhouston


// 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

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
Collaborator

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

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
Collaborator

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

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

@robwierzbowski
Collaborator

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 #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

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

@robwierzbowski
Collaborator

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
Collaborator

56 landed, so closed!

@grayghostvisuals

very cool. thanks for your work on this.

@joshuarule

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
Collaborator

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

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

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
Collaborator

@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

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
Collaborator

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

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
Collaborator

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
Collaborator

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

@jeremydouglas

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
Collaborator

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

Ok, thanks for the help.

@robwierzbowski
Collaborator

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)
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment