gulp-sass not compiling sass files

7
votes

I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.

Here's a sample of my code : 

gulp.task('compile-sass', function() {
    gulp.src(buildType+config.path.sass+"/main.sass")
        .pipe(compass({
            css: 'css',
            sass: 'sass'
        }))
    .pipe(gulp.dest(buildType+config.path.css+"/test"));
});

So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :

[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.


events.js:72
    throw er; // Unhandled 'error' event
          ^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

I know I'm not using any config.rb, but two things : 1) I found no example of such files 2) gulp-compass doc gives example without such a file so I assume it's optional

Thanks in advance.

5
sassgulp
What are the values for buildType+config.path.sass and buildType+config.path.css? Are they relative path from the root of the project, where you run gulp? Regardig the config, it's not gulp-compass config, but compass confg itself. One more thing, Compass only adds libs to SASS. Thereof, the ability of compiling .sass and .scss are not from Compass, but SASS itself, so gulp-sass should do the work for you anyway. - Caio Cunha
Thanks for the quick answer. buildType+config.path.sass is a valid String coming from a Json config file, i'm using it in other tasks in the same gulpfile and it works perfectly. When i'm using gulp-sass instead of 'compass' another error shows up when reading the file ([gulp] [gulp-sass] source string:4: error: error reading values after $gray and others like this). I assume that .sass files are not supported by gulp-sass but only .scss. - soenguy
gulp does not care what the file extension is. It uses the node-sass parser which does. Consider using gulp-ruby-sass as it should have support for .scss and .sass extensions. It then can reduce the possible errors to narrow your issue. - SteveLacy
Thanks @SteveLacy. Everything works as expected ! Answer has been posted. - soenguy

5 Answers

5
votes

Thanks to SteveLacy i could manage to fix this.

If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :

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

gulp.task('compile-sass', function() {
    gulp.src(path/to/your/sass/folder/main.sass")
        .pipe(sass())
    .pipe(gulp.dest('path/to/your/css/folder));
});
2
votes

The most basic and simple way is:

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

gulp.task('styles', function() {
    gulp.src('sass/*.scss')
    .pipe(sass({ 
        noCache : true,
        style   : "compact"
    }))
    .pipe(gulp.dest('css'));
});
2
votes

The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.

https://github.com/sass/node-sass/releases

or the latest release at this moment

https://github.com/sass/node-sass/releases/tag/v0.9.3

node-sass is using libsasss

https://github.com/sass/libsass/releases

Look at their 2.0 release notes.

0
votes

I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.

For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.

In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.

Hope this helps someone!

0
votes

Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.

Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):

var sass = require('gulp-sass');
sass.compiler = require('node-sass');

gulp.task('my-sass-task', function () {
  return gulp.src('styles/**/*.sass')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

gulp.task('my-scss-task', function () {
  return gulp.src('styles/**/*.scss')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.

Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.