Skip to content
This repository has been archived by the owner. It is now read-only.

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

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

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

grayghostvisuals opened this issue Mar 10, 2014 · 39 comments
Labels
bug

Comments

@grayghostvisuals
Copy link

@grayghostvisuals grayghostvisuals commented Mar 10, 2014

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
Copy link

@yairEO yairEO commented Mar 16, 2014

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

@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Mar 16, 2014

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

@grayghostvisuals
Copy link
Author

@grayghostvisuals grayghostvisuals commented Mar 16, 2014

@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
Copy link

@yairEO yairEO commented Mar 17, 2014

any news on this?

@grayghostvisuals
Copy link
Author

@grayghostvisuals grayghostvisuals commented Apr 3, 2014

@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
Copy link
Author

@grayghostvisuals grayghostvisuals commented Apr 15, 2014

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

@frxnz
Copy link

@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
Copy link
Owner

@sindresorhus sindresorhus commented May 13, 2014

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

@lozandier
Copy link

@lozandier lozandier commented May 19, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 12, 2014

@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
Copy link
Author

@grayghostvisuals grayghostvisuals commented Jun 13, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 13, 2014

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
Copy link

@iainhouston iainhouston commented Jun 17, 2014

"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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

Correct. What do your options look like?

@iainhouston
Copy link

@iainhouston iainhouston commented Jun 17, 2014


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

@iainhouston iainhouston commented Jun 17, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

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
Copy link

@iainhouston iainhouston commented Jun 17, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

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
Copy link
Author

@grayghostvisuals grayghostvisuals commented Jun 17, 2014

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

@robwierzbowski
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

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
Copy link

@iainhouston iainhouston commented Jun 17, 2014

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

@robwierzbowski
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 17, 2014

56 landed, so closed!

@grayghostvisuals
Copy link
Author

@grayghostvisuals grayghostvisuals commented Jun 17, 2014

very cool. thanks for your work on this.

@joshuarule
Copy link

@joshuarule joshuarule commented Jun 24, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jun 24, 2014

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
Copy link

@joshuarule joshuarule commented Jun 24, 2014

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
Copy link

@jeremydouglas jeremydouglas commented Jul 25, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 25, 2014

@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
Copy link

@jeremydouglas jeremydouglas commented Jul 30, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 30, 2014

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
Copy link

@jeremydouglas jeremydouglas commented Jul 30, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 30, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 30, 2014

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

@jeremydouglas
Copy link

@jeremydouglas jeremydouglas commented Jul 30, 2014

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
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 30, 2014

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
Copy link

@jeremydouglas jeremydouglas commented Jul 30, 2014

Ok, thanks for the help.

@robwierzbowski
Copy link
Contributor

@robwierzbowski robwierzbowski commented Jul 30, 2014

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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.