0

I am relatively new to gulp. I have one issue when I try to compile one directory with subfolders with their sass files.

Folder structure:

|_sass
   |__folder1
   |   |_file.sass
   |__folder2
   |   |_file.sass
   |__folder3
       |_file.sass

My simple gulp task to try the compilation

gulp.task('sass', function(){
  return sass('sass/')
    .pipe(gulp.dest('css');
}

This task above doesn't work with a folder but if I specify the file like in gulp task below, it works correctly.

gulp.task('sass', function(){
  return sass('sass/folder1/file1.sass')
    .pipe(gulp.dest('css');
}

I have checked the documentation of the repository (gulp-ruby-sass) and other topics in stackoverflow and the one solution that i have found is import all sass code into one file and compile it.

I have tried different paths: ./sass, sass, sass/ even the last syntax with gulp.src(path/**/*.sass) with gulp-sass repository as well.

Can you help me? Thanks in advance

naeramarth7
  • 6,030
  • 1
  • 22
  • 26
  • Im using webstorm with gulpfile.js –  Apr 15 '15 at 10:47
  • The solutions you've found are correct. Create a main sass file and import all the files you want to use. – donnywals Apr 15 '15 at 10:48
  • So if i want to separate my final css in two for differents parts of my application i need two gulp tasks? I think that it is not the way. –  Apr 15 '15 at 11:00
  • ohh so you want the output to be file1.css, file2.css etc? – donnywals Apr 15 '15 at 11:02
  • Yes. I want diferent css. Now is a simple example but in my application i will need different final css. Maybe two or three. –  Apr 15 '15 at 11:04
  • Why are you prefixing the filenames with an underscore if you want them to compile to individual CSS files? – cimmanon Apr 15 '15 at 12:49
  • it Is not a underscore, is for draw the tree structure. The names are sass, folderN and file.sass –  Apr 15 '15 at 12:58

1 Answers1

1

Edit: Using gulp-sass, not gulp-ruby-sass, since gulp-ruby-sass does only support single files, as mentioned in the docs:

gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.

You should create a stream with valid glob arguments gulp.src() instead of just calling sass() directly and call it in a pipe():

gulp.task('sass', function (){
  return gulp.src([
    'sass/folder1/file.sass',
    'sass/folder2/file.sass',
    'sass/folder3/file.sass'
  ])
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

If the files you just want to import are named correctly (starting with an underscore), this should work as well:

gulp.task('sass', function (){
  return gulp.src('sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'));
});

Edit: Fixed some code errors - SO needs a linter (;

naeramarth7
  • 6,030
  • 1
  • 22
  • 26
  • Hi, i dont know what is the meaning of 'globs' but few words later it puts "or directories". I understood bad then. So i have tried with the procedure that you explain me with a common error, "Arguments to path.join must be strings". And this is the end for me, im still searching but i dont know what to do with this error. –  Apr 15 '15 at 14:44
  • Can you share your updated code that is not working? – quoo Apr 15 '15 at 14:48
  • I will try after work other time and i tell you. But is simple, with gulp-ruby-sass i can not compile directory, because is not possible according the naeramatrth7 post. And with gulp-sass sends me an error. –  Apr 15 '15 at 15:48