How to compile SASS files in different directories using Gulp?

Question

I am using gulp -ruby-sass to compile js and sass.

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

Found this answer , and that was because I used the source code with gulp -sass , and the answer was recommended using gulp -ruby-sass .

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()); }); 

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

Then I noticed in the answer that the author found that globes ** are not yet supported:

Also keep in mind that with this entry when using gulp -ruby-sass 1.0.0-alpha globs are not yet supported.

I did more digging and found a way to use Array to specify the paths to my SASS files, so 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 get Errno::ENOENT: No such file or directory and lists all the directories placed in this array.

How to compile SASS in multiple directories using gulp?

Structure of the original SASS folder:

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

Answer 1

It revealed!

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

In any case, I forgot that in my main web.scss file I already had several import settings:

 @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 have to try to use Gulp the way I tried, I just needed to target this 1 .scss file directly. So I did it 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 for targeting and compilation

Answer 2

I also had a problem with '* .scss'

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 inside the folder.

Just in case someone has the same problem