How to compile SASS files in different directories using Gulp?

Question

I'm using gulp-ruby-sass to compile my js and sass.

I ran into this error first TypeError: Arguments to path.join must be strings

Found this answer and it was because I was using sourcemaps with gulp-sass and the answer recommended using gulp-ruby-sass instead.

Next I tried to compile all my SASS files using this syntax:

gulp.task('sass', function () {
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
        .pipe(sourcemaps.init())
        .pipe(concat('bitage_public.css'))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/_assets/css'))
        .pipe(livereload());
});

Which produced this error: gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

I then noticed in the answer I found the author wrote that globes ** aren't supported yet:

Also keep in mind, as of this writing when using gulp-ruby-sass 1.0.0-alpha, globs are not supported yet.

I did more digging and found a way to use an Array to specify the paths to my SASS files, so then I tried the following:

gulp.task('sass', function () {
    return sass(['public/_sources/sass/*.scss',
             'public/_sources/sass/layouts/*.scss',
             'public/_sources/sass/modules/*.scss',
             'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(concat('bitage_public.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

But still I'm getting Errno::ENOENT: No such file or directory and it lists all the dirs I put into that array.

How do you compile SASS in multiple directories with gulp?

SASS source folder structure:

_sources
    layouts
        ...scss
    modules
        ...scss
    vendors
        ...scss
    main.scss

Use gulp.src as first and then pipe it with sass plugin. Gulp src handles globes with ** — niba, Feb 14 '15 at 22:57
Sourcemap usage in docs looks different than in your example: https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap — Heikki, Feb 14 '15 at 22:59
I don't understand why its not correct Heikki. He can take older version of plugin which has support for multiple files and probably works fine and eventually change it in the future when autor will add functionality to ** in globes — niba, Feb 14 '15 at 23:11

Leon Gaban · Accepted Answer · 2015-02-15T05:40:23.520

Figured it out!

Well not 100%, still not sure why the multiple path array didn't work.

Anyways so I forgot that in my main web.scss file I already had multiple import statements setup:

@import "vendors/normalize";    // Normalize stylesheet
@import "modules/reset";        // Reset stylesheet
@import "modules/base";         // Load base files
@import "modules/defaults";     // Defaults
@import "modules/inputs";       // Inputs & Selects
@import "modules/buttons";      // Buttons
@import "modules/layout";       // Load Layouts
@import "modules/svg";          // Load SVG
@import "modules/queries";      // Media Queries

So I didn't actually need to try use Gulp the way I was trying, I just needed to target that 1 .scss file directly. So I did that here:

// Compile public SASS
gulp.task('sass', function () {
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

Now it works because it sees a specific file to target and compile

Nice, interesting how often the simple solutions are the answers. — mattsven, Sep 18 '15 at 20:51

Raphael Isidro · Answer 2 · 2015-09-03T04:39:43.707

5

I was having trouble using '*.scss' too

In the git documentation (https://github.com/sindresorhus/gulp-ruby-sass) they use this sintax:

gulp.task('sass', function(){
   return sass('public/_sources/sass/',
   { style: 'compressed'})
.pipe(sourcemaps.init())
});

I tested it and it works, it compiles all the files within the folder.

Just in case someone has the same problem

edited Sep 03 '15 at 04:39

answered Sep 03 '15 at 04:29

Raphael Isidro

932
10
19

For me I had to add an asterisk e.g. "desktop/sass/shared/*" – Adam Prax Jan 28 '17 at 05:58

How to compile SASS files in different directories using Gulp?

2 Answers2